242 lines
4.4 KiB
SCSS
242 lines
4.4 KiB
SCSS
.page-template-internal_elus,
|
|
.page-template-homepage_elus {
|
|
&.has-header-background .site-header {
|
|
background: white;
|
|
}
|
|
#banner-wrapper {
|
|
border-bottom: 5px solid $aquamarine;
|
|
margin-bottom: 0;
|
|
background: #1b4e61 url(/assets/header:background-elus) top center no-repeat;
|
|
height: 270px;
|
|
#banner .title {
|
|
height: 270px;
|
|
background: url(img/portail-elus.png) top 40px left 0 no-repeat;
|
|
h1, span {
|
|
@include sr-only();
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 110px;
|
|
#banner .title {
|
|
height: 110px;
|
|
background-position: top 10px left 20px;
|
|
background-size: auto 80px;
|
|
}
|
|
border: 0;
|
|
}
|
|
}
|
|
#content-top-wrapper {
|
|
background: white;
|
|
}
|
|
#idea { // from footer
|
|
display: none;
|
|
}
|
|
|
|
div#carrousel {
|
|
&::after,
|
|
&::before {
|
|
background-color: $aquamarine;
|
|
}
|
|
}
|
|
div.carrousel-content {
|
|
input + div div.carrousel-item {
|
|
background-color: $aquamarine !important;
|
|
}
|
|
}
|
|
|
|
a.big-image-link {
|
|
background-size: 170px auto;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-size: auto 80px;
|
|
}
|
|
}
|
|
|
|
div#up a {
|
|
background: url(img/FLECHE-elus.svg);
|
|
}
|
|
|
|
.link-cell.metropole a.big-image-link {
|
|
background-color: #46acc3;
|
|
border-color: #46acc3;
|
|
}
|
|
.link-cell.commune a.big-image-link {
|
|
background-color: #1b4e61;
|
|
border-color: #1b4e61;
|
|
}
|
|
.link-cell.favori a.big-image-link {
|
|
background-color: #7a46d9;
|
|
border-color: #7a46d9;
|
|
}
|
|
.link-cell a.big-image-link {
|
|
background-position : bottom 60px left 50%;
|
|
div strong {
|
|
top: 180px;
|
|
color: white;
|
|
@media screen and ($max-mobile-viewport) {
|
|
top: 120px;
|
|
}
|
|
}
|
|
&:hover, &:focus {
|
|
outline: 4px solid $blue;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
.link-cell {
|
|
position: relative;
|
|
button {
|
|
background: transparent;
|
|
position: absolute;
|
|
margin: 0;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.2rem 0.5rem;
|
|
&::before {
|
|
content: "\f006"; // star-o
|
|
font-family: FontAwesome;
|
|
}
|
|
box-shadow: none;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
&:hover {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
&::before {
|
|
content: "\f005"; // star
|
|
color: $yellow;
|
|
}
|
|
}
|
|
}
|
|
&.favori button::before {
|
|
content: "\f005"; // star
|
|
}
|
|
}
|
|
|
|
#columns {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
#filter-view {
|
|
position: relative;
|
|
width: $width;
|
|
max-width: 100vw;
|
|
margin: 0px auto 0px auto;
|
|
#filters {
|
|
display: flex;
|
|
}
|
|
button {
|
|
background: white;
|
|
padding: 0 30px 0 0.5em;
|
|
border: none;
|
|
width: 20%;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
margin-right: 1em;
|
|
line-height: 110%;
|
|
background: url(img/bouton-plus.png) right 0.5em top 50% no-repeat;
|
|
background-size: 30px;
|
|
cursor: pointer;
|
|
@media screen and ($min-desktop-viewport) {
|
|
&:hover {
|
|
outline: 4px solid $blue;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
&.filtrer {
|
|
background: white url(img/filtrer.png) left 0.5em top 50% no-repeat;
|
|
background-size: 40px;
|
|
padding: 0 0.5em 0 60px;
|
|
color: $darkblue;
|
|
}
|
|
&.metropole {
|
|
background-color: #46acc3;
|
|
color: white;
|
|
}
|
|
&.commune {
|
|
background-color: #1b4e61;
|
|
color: white;
|
|
}
|
|
&.favoris {
|
|
background-color: #7a46d9;
|
|
color: white;
|
|
span::before {
|
|
content: "\f005"; // star
|
|
font-family: FontAwesome;
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
&.tout {
|
|
color: #1b4e61;
|
|
background: url(img/reload.png) left 0.5em top 50% no-repeat;
|
|
padding-left: 60px;
|
|
background-size: 40px;
|
|
width: 40%;
|
|
}
|
|
}
|
|
&.with-filters button.filtrer {
|
|
background: $aquamarine url(img/filtrer-active.png) left 0.5em top 50% no-repeat;
|
|
background-size: 40px;
|
|
color: white;
|
|
}
|
|
div.search {
|
|
display: flex;
|
|
input, button {
|
|
height: 100%;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 1em 1em;
|
|
}
|
|
input {
|
|
background: #ebebeb;
|
|
}
|
|
button {
|
|
background: #c9c9c9 url(img/recherche.png) center center no-repeat;
|
|
background-size: 50%;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-bottom: 2px solid $darkblue;
|
|
button {
|
|
height: 4em;
|
|
margin: 0;
|
|
}
|
|
button.search {
|
|
width: 4em;
|
|
max-width: 4em;
|
|
}
|
|
#filters {
|
|
justify-content: space-between;
|
|
input {
|
|
display: none;
|
|
}
|
|
button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
#mobile-filters {
|
|
display: none;
|
|
button {
|
|
width: 100%;
|
|
height: 4em;
|
|
}
|
|
}
|
|
&.with-filters #mobile-filters {
|
|
display: block;
|
|
}
|
|
&.with-search {
|
|
div.search {
|
|
flex: 1;
|
|
height: 4em;
|
|
}
|
|
#filters input {
|
|
display: block;
|
|
flex: 2;
|
|
}
|
|
#filters > button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|