grandlyon-sau: update theme with styles for new pages and forms (#23266)
|
|
@ -0,0 +1,171 @@
|
|||
#content {
|
||||
.menucell.categories-demandes {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@each $category in (mobilite, sports-et-loisirs, culture) {
|
||||
&.#{$category} {
|
||||
div > ul > li {
|
||||
display: none;
|
||||
&.selected {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
> ul {
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
> li {
|
||||
background-color: $body-background;
|
||||
margin-bottom: 4px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
> a {
|
||||
background-color: $cell-entry-hover-background;
|
||||
color: $cell-entry-hover-color;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
background-color: $body-background;
|
||||
border: none;
|
||||
font-size: calc(1vw + 1em);
|
||||
color: $title-color;
|
||||
}
|
||||
ul {
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
background-color: $cell-background;
|
||||
li {
|
||||
background-color: $body-background;
|
||||
border-bottom: 2px solid $cell-background;
|
||||
border-top: 2px solid $cell-background;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
height: 5em;
|
||||
&:first-child {
|
||||
border-top: 4px solid $cell-background;
|
||||
}
|
||||
&:target, &:hover {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
background-color: $cell-entry-hover-background;
|
||||
color: $cell-entry-hover-color;
|
||||
a {
|
||||
color: $cell-background;
|
||||
}
|
||||
}
|
||||
a {
|
||||
padding: 0.1em 0.5em 0.1em 0.5em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
text-overflow: ellipsis;
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0.3em;
|
||||
left: 0;
|
||||
height: 80%;
|
||||
width: 25%;
|
||||
}
|
||||
span {
|
||||
font-family: SourceSansPro-Regular;
|
||||
font-size: calc(1vw + 8px);
|
||||
line-height: 3em;
|
||||
}
|
||||
}
|
||||
// Declare the right class name within the following list
|
||||
@each $category in (transport-en-commun, velo-partage, parking, autopartage, scooters, tourisme, sport, musees, carte-culture) {
|
||||
&.menu-#{$category} {
|
||||
&:hover {
|
||||
a::before {
|
||||
background-image: url("img/#{$category}-hover.png");
|
||||
}
|
||||
}
|
||||
a::before {
|
||||
background-image: url("img/#{$category}.png");
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
> ul {
|
||||
> li {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
border-left: 5px solid $body-background;
|
||||
|
||||
&:hover {
|
||||
border-left: $menucell-hover-border;
|
||||
> a {
|
||||
background-color: $body-background;
|
||||
color: $title-color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include vendor-prefix(flex-grow, 1);
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
ul {
|
||||
@include vendor-prefix(flex-grow, 1);
|
||||
@include vendor-prefix(flex-basis, 70%);
|
||||
@include flex-direction(row);
|
||||
@include justify-content(flex-end);
|
||||
@include vendor-prefix(flex-wrap, nowrap);
|
||||
margin-left: auto;
|
||||
background-color: $body-background;
|
||||
li {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include vendor-prefix(flex-basis, 10em);
|
||||
border-left: 2px solid $cell-background;
|
||||
border-right: 2px solid $cell-background;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
height: 10em;
|
||||
margin-bottom: 0;
|
||||
&:first-child {
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
border-left: 4px solid $cell-background;
|
||||
}
|
||||
a {
|
||||
padding: 5em 0.5em 0.5rem 0.5rem;
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
height: 40%;
|
||||
width: 50%;
|
||||
}
|
||||
span {
|
||||
font-size: calc(0.8vw + 2px);
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
@import '../includes/font-roboto';
|
||||
@import '../includes/font-source-sans-pro';
|
||||
|
||||
body {
|
||||
background: $body-background;
|
||||
border-top: 25px solid $primary-color;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
border-top: 3px solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
div#nav {
|
||||
|
|
@ -19,7 +22,9 @@ div.cell hr {
|
|||
}
|
||||
|
||||
div#header-wrapper {
|
||||
max-width: 100%;
|
||||
background: white;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
#top #logo {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
padding-left: 0;
|
||||
|
|
@ -40,16 +45,20 @@ div#header-wrapper {
|
|||
}
|
||||
|
||||
div#main-content-wrapper {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
padding-top: 40px;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
padding-top: 5px;
|
||||
margin: 2ex auto;
|
||||
div#content {
|
||||
@include vendor-prefix(align-items, flex-start);
|
||||
}
|
||||
div#columns {
|
||||
padding: 1em;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
div#sidebar {
|
||||
position: sticky;
|
||||
top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,23 +71,206 @@ div#footer a {
|
|||
background: white;
|
||||
}
|
||||
|
||||
#columns {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.cell > div {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
div.textcell {
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 2px;
|
||||
#content {
|
||||
#columns {
|
||||
div.cell {
|
||||
&.bandeau div {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
background: $cell-background;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&.textcell {
|
||||
> div:first-child {
|
||||
padding: 2em 2em 0em 2em;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.text-motif:target {
|
||||
display: block;
|
||||
}
|
||||
h2 {
|
||||
letter-spacing: 2px;
|
||||
font-weight: normal;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
> div:first-child {
|
||||
padding: 1em 2em;
|
||||
h2:first-child {
|
||||
padding: 0;
|
||||
font-size: 200%;
|
||||
font-family: SourceSansPro-Regular;
|
||||
}
|
||||
}
|
||||
&.linkcell {
|
||||
&.lien-motif {
|
||||
> div {
|
||||
padding: 0 1em;
|
||||
ul > li > a {
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
&::after {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
content: '\f105'; /* angle-right */
|
||||
font-family: FontAwesome;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#rub_service {
|
||||
margin: 0 auto;
|
||||
form {
|
||||
padding: 3ex;
|
||||
}
|
||||
}
|
||||
#rub_service, div.block, div.a2-block {
|
||||
&.has-sidebox {
|
||||
float: none;
|
||||
}
|
||||
.buttons {
|
||||
@include flexbox();
|
||||
@include vendor-prefix(justify-content, center);
|
||||
.widget {
|
||||
padding: 1em;
|
||||
@include flex(1);
|
||||
@include vendor-prefix(flex-grow, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
#gauche {
|
||||
display: none;
|
||||
}
|
||||
form {
|
||||
&.quixote {
|
||||
text-align: left;
|
||||
}
|
||||
input, textarea, select, option {
|
||||
border-radius: $input-border-radius;
|
||||
background-color: $input-background-color;
|
||||
max-width: 100%;
|
||||
vertical-align: sub;
|
||||
border: 1px solid darken($input-background-color, 10%);
|
||||
outline: medium none;
|
||||
}
|
||||
button {
|
||||
background-color: #CCC;
|
||||
border-radius: $input-border-radius;
|
||||
color: $title-color;
|
||||
margin: 0.5em;
|
||||
&.previous {
|
||||
background-color: $input-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.linkcell {
|
||||
&.retour {
|
||||
background: transparent;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.2em;
|
||||
}
|
||||
ul > li > a {
|
||||
background: transparent url('img/retour.png') no-repeat;
|
||||
background-size: contain;
|
||||
padding-left: 6em;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
text-indent: -9999px;
|
||||
}
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
&:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.formulaire-choix-service {
|
||||
width: 25em;
|
||||
margin: 1ex auto;
|
||||
padding: 1em 0;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
select {
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
.menucell.urgence {
|
||||
ul {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include vendor-prefix(flex-wrap, wrap);
|
||||
@include justify-content(space-around);
|
||||
@include vendor-prefix(align-items, stretch);
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
background-color: $body-background;
|
||||
margin: 10px;
|
||||
padding: 1em 0 0 0;
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
@include vendor-prefix(flex-grow, 1);
|
||||
-ms-transition: background 0.5s ease;
|
||||
transition: background 0.5s ease;
|
||||
@each $category in (pass-perdu-ou-vole, pass-endommage, abonnement-expire, pass-non-recu) {
|
||||
&.menu-#{$category} {
|
||||
> a {
|
||||
background-image: url('img/#{$category}.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 10px;
|
||||
background-size: auto 6.5em;
|
||||
padding-top: 10em;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
> a {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background: #000000;
|
||||
> div.page-description {
|
||||
display: block;
|
||||
}
|
||||
> a {
|
||||
background-image: url('img/#{$category}-hover.png');
|
||||
background-repeat: no-repeat;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div.page-description {
|
||||
display: none;
|
||||
bottom: -4.5em;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer a.metro {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
$width: 1200px;
|
||||
$mobile-limit: 800px;
|
||||
$body-background: #f2f2f2;
|
||||
$font-size: 13px;
|
||||
$font-family: Roboto, sans-serif;
|
||||
$font-family: SourceSansPro-Regular, sans-serif;
|
||||
$border-radius: 0;
|
||||
$primary-color: #e42320;
|
||||
$body-background: #F2F2F2;
|
||||
$primary-color: #E42320;
|
||||
$link-color: #666666;
|
||||
$nav-background: transparent;
|
||||
$nav-submenu-background: white;
|
||||
|
|
@ -16,10 +16,20 @@ $nav-item-selected-color: $primary-color;
|
|||
$nav-menu-color: $primary-color;
|
||||
$button-background: $link-color;
|
||||
$title-color: #000;
|
||||
$title-font-size: 2em;
|
||||
$footer-background: #000000;
|
||||
$footer-color: #FFFFFF;
|
||||
$dashboard-selected-color: $primary-color;
|
||||
$title-border-bottom: 1px solid #C5C5B6;
|
||||
$title-border-bottom: 0;
|
||||
$cell-border: 0;
|
||||
$cell-background: #FFFFFF;
|
||||
$title-background: #FFFFFF;
|
||||
$cell-border: 0px solid transparent;
|
||||
$cell-background: $body-background;
|
||||
$title-background: $body-background;
|
||||
$cell-entry-hover-color: #FFFFFF;
|
||||
$cell-entry-hover-effect: top-to-bottom;
|
||||
$cell-entry-hover-background: #000;
|
||||
$cell-entry-border-color: transparent;
|
||||
$sidebar-width: 250px;
|
||||
$menucell-hover-border: 5px solid #999;
|
||||
$input-border-radius: 5px;
|
||||
$input-background-color: $body-background;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
$(function() {
|
||||
if (document.body.attributes['data-picture']) {
|
||||
var sheet = document.head.appendChild(document.createElement("style")).sheet;
|
||||
sheet.insertRule('#content div.bandeau div {background-image: url("' + document.body.attributes['data-picture'].value + '"); background-repeat: no-repeat; background-size: calc(100% - 4em); height: 350px; background-position: center bottom', 0);
|
||||
}
|
||||
|
||||
$('div.menucell.urgence a').click(function(e) {
|
||||
e.preventDefault();
|
||||
var $selected = $(this).parents('li');
|
||||
$.each($selected.parents('ul').children(), function(index, element) {
|
||||
if ($(element).data('menu-page-id') != $selected.data('menu-page-id')) {
|
||||
$(element).removeClass('selected');
|
||||
}
|
||||
});
|
||||
$(this).parents('li').toggleClass('selected');
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 307 B |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
|
@ -2,4 +2,7 @@
|
|||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import '../includes/flexbox_mixins';
|
||||
@import '../includes/font-source-sans-pro';
|
||||
@import 'custom';
|
||||
@import 'categorie-demande';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
{% load combo %}
|
||||
{% if menuitems %}
|
||||
<ul>
|
||||
{% spaceless %}
|
||||
{% for menuitem in menuitems %}
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="menu-{{ menuitem.page.slug }} {% if menuitem.selected %}selected{% endif %}"><a
|
||||
href="{% page_absolute_url menuitem.page %}"><span>{{ menuitem.page.title }}</span></a>
|
||||
{% if depth > 1 %}
|
||||
{% with new_depth=depth|add:"1" %}
|
||||
{% show_menu current_page=menuitem.page level=-1 depth=new_depth %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endspaceless %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% load combo %}
|
||||
{% if menuitems %}
|
||||
<ul>
|
||||
{% spaceless %}
|
||||
{% for menuitem in menuitems %}
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="menu-{{ menuitem.page.slug }}">
|
||||
<a href="{% page_absolute_url menuitem.page %}"><span>{{ menuitem.page.title }}</span></a>
|
||||
<div class="page-description">
|
||||
{{ menuitem.page.description }}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endspaceless %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
"label": "SAU Grand Lyon",
|
||||
"variables": {
|
||||
"css_variant": "grandlyon-sau",
|
||||
"no_extra_js": true,
|
||||
"no_extra_js": false,
|
||||
"theme_color": "#E42320"
|
||||
}
|
||||
},
|
||||
|
|
|
|||