191 lines
4.3 KiB
SCSS
191 lines
4.3 KiB
SCSS
$subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, tourisme, sport, musees, carte-culture, support-carte, chargeur-individuel, souscription-et-suivi;
|
|
|
|
#content {
|
|
.menucell.categories-demandes {
|
|
@each $category in (mobilite, sports-et-loisirs, culture) {
|
|
&.#{$category} {
|
|
div > ul > li {
|
|
display: none;
|
|
&.selected {
|
|
display: flex;
|
|
flex-direction: row;
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
// list of top level categories
|
|
> ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
> li {
|
|
@extend %homepage-block-color;
|
|
margin-bottom: 4px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
&:hover {
|
|
@extend %homepage-block-hover;
|
|
> a, > ul {
|
|
@extend %homepage-block-hover;
|
|
}
|
|
}
|
|
> a {
|
|
@extend %homepage-block-color;
|
|
border: none;
|
|
font-size: calc(1vw + 1em);
|
|
}
|
|
// list of sub-categories
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@extend %homepage-block-color;
|
|
&:hover {
|
|
@extend %homepage-block-hover;
|
|
}
|
|
li {
|
|
@extend %homepage-block-color;
|
|
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 {
|
|
@extend %homepage-block-hover;
|
|
a {
|
|
@extend %homepage-block-hover;
|
|
}
|
|
}
|
|
a {
|
|
@extend %homepage-block-color;
|
|
display: block;
|
|
padding: 0.1em 0.5em 0.1em 25%;
|
|
height: 100%;
|
|
text-transform: capitalize;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
&::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0.3em;
|
|
left: 0;
|
|
height: 80%;
|
|
width: 25%;
|
|
}
|
|
// inner-text
|
|
span {
|
|
font-family: "Source Sans Pro", sans-serif;
|
|
font-weight: normal;
|
|
font-size: calc(0.8vw + 0.8em);
|
|
line-height: 4em;
|
|
}
|
|
}
|
|
// Declare the right class name within the following list
|
|
@each $page in $subpages {
|
|
&.menu-#{$page} {
|
|
&:hover {
|
|
a::before {
|
|
background-image: url("img/#{$page}-hover.png");
|
|
}
|
|
}
|
|
a::before {
|
|
background-image: url("img/#{$page}.png");
|
|
background-position: center center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($min-desktop-viewport) {
|
|
> ul {
|
|
> li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-left: 5px solid $body-background;
|
|
|
|
&:hover {
|
|
border-left: $menucell-hover-border;
|
|
}
|
|
a {
|
|
flex-grow: 1;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
ul {
|
|
flex-grow: 1;
|
|
flex-basis: 70%;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
flex-wrap: nowrap;
|
|
margin-left: auto;
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-basis: 10em;
|
|
border-left: 4px solid $cell-background;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
border-top: 0;
|
|
height: 10em;
|
|
margin-bottom: 0;
|
|
&:first-child {
|
|
border-bottom: 0;
|
|
border-top: 0;
|
|
}
|
|
a {
|
|
padding: 5em 0.5em 0.5rem 0.5rem;
|
|
text-align: center;
|
|
&::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 25%;
|
|
height: 40%;
|
|
width: 50%;
|
|
}
|
|
span {
|
|
font-size: calc(0.8vw + 0.3em);
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.categorie-demandes div > ul > li {
|
|
display: none;
|
|
&.selected {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@media screen and ($min-desktop-viewport) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $page in $subpages {
|
|
body.page-#{$page} {
|
|
#content div.menucell.categories-demandes li.menu-#{$page} a {
|
|
background-color: #999999;
|
|
color: #FFFFFF;
|
|
&::before {
|
|
background-image: url("img/#{$page}-hover.png");
|
|
}
|
|
}
|
|
}
|
|
}
|