1840 lines
34 KiB
SCSS
1840 lines
34 KiB
SCSS
$remote-font-path: 'https://montoulouse.eservices.toulouse-metropole.fr/static/_fonts/';
|
|
|
|
@mixin aauxpro-font($type, $weight) {
|
|
@font-face {
|
|
font-family: 'AauxPro';
|
|
src: url('#{$remote-font-path}aauxpro-#{$type}.woff') format('woff'),
|
|
url('#{$remote-font-path}aauxpro-#{$type}.ttf') format('truetype');
|
|
font-weight: $weight;
|
|
}
|
|
}
|
|
|
|
@include aauxpro-font('thin', 100);
|
|
@include aauxpro-font('regular', 400);
|
|
@include aauxpro-font('medium', 500);
|
|
@include aauxpro-font('bold', 700);
|
|
|
|
$header-height: 164px;
|
|
$nav-width: 156px;
|
|
$intro-height: calc(100vh - 150px);
|
|
|
|
div.a2-block, div.block,
|
|
.gru-content div.cell {
|
|
overflow: visible;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
%button {
|
|
@extend %button;
|
|
font-weight: bold;
|
|
padding: 1rem 2rem;
|
|
&.inverse {
|
|
color: $orange;
|
|
background: white;
|
|
&:hover {
|
|
color: white;
|
|
background: $orange;
|
|
}
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: $nav-width;
|
|
right: 0;
|
|
background: transparent;
|
|
z-index: 999;
|
|
h1#logo {
|
|
background: url(img/header/logo-header.png) center center no-repeat;
|
|
text-indent: -10000px;
|
|
height: $header-height;
|
|
width: 287px;
|
|
margin: 0 auto;
|
|
a {
|
|
display: block;
|
|
width: 207px;
|
|
height: $header-height;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
left: 0;
|
|
h1#logo {
|
|
padding: 0;
|
|
}
|
|
}
|
|
#toplinks {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
position: fixed;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #6a5f5b;
|
|
color: white;
|
|
font-size: 0.846rem;
|
|
width: $nav-width;
|
|
text-transform: uppercase;
|
|
z-index: 150;
|
|
#nav-wrapper {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
&::after {
|
|
box-shadow: 0 0 5px black;
|
|
z-index: 0;
|
|
position: fixed;
|
|
content: "";
|
|
display: block;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
width: $nav-width;
|
|
top: 0;
|
|
height: 100vh;
|
|
@media screen and ($max-mobile-viewport) {
|
|
content: none;
|
|
}
|
|
}
|
|
div#nav {
|
|
height: 100%;
|
|
ul li {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
a {
|
|
padding-top: 60px;
|
|
background: transparent 50% 25px no-repeat;
|
|
@media screen and ($min-desktop-viewport) {
|
|
span {
|
|
transition: transform linear 0.1s;
|
|
display: block;
|
|
}
|
|
&:hover span {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent 50% 10px no-repeat;
|
|
padding-top: 45px;
|
|
span {
|
|
display: inline;
|
|
font-size: 0.846rem;
|
|
}
|
|
}
|
|
}
|
|
&.menu-particuliers a,
|
|
&.menu-particuliers.selected a,
|
|
&.menu-particuliers a:hover {
|
|
background-image: url(img/menu/menu-particuliers.png);
|
|
}
|
|
&.menu-associations a,
|
|
&.menu-associations.selected a,
|
|
&.menu-associations a:hover {
|
|
background-image: url(img/menu/menu-associations.png);
|
|
}
|
|
&.menu-professionnels a,
|
|
&.menu-professionnels.selected a,
|
|
&.menu-professionnels a:hover {
|
|
background-image: url(img/menu/menu-professionnels.png);
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
&.selected a,
|
|
&:hover a {
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent 50% 10px no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: fixed;
|
|
height: $nav-mobile-bottom-bar-height;
|
|
top: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#side-user-block {
|
|
padding: 20px 10px;
|
|
a.login {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
background: $orange url(img/header/icone-connexion.png) left center no-repeat;
|
|
padding-left: 45px;
|
|
}
|
|
span.registration {
|
|
display: block;
|
|
padding-top: 10px;
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
a.logout {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
span.connected-user {
|
|
display: block;
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
z-index: 200;
|
|
box-shadow: 0 0 10px #666;
|
|
margin-left: $nav-width;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
#footer-wrapper {
|
|
padding-bottom: 0;
|
|
background: transparent;
|
|
}
|
|
div.trackingcodeinputcell,
|
|
div.feedcell {
|
|
display: none;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
box-shadow: none;
|
|
#footer-wrapper {
|
|
padding-top: 0;
|
|
}
|
|
div.trackingcodeinputcell {
|
|
display: block;
|
|
background: #554b49;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
border-top: 5px solid $violet;
|
|
text-align: center;
|
|
h2 {
|
|
text-transform: uppercase;
|
|
margin-bottom: 0;
|
|
}
|
|
form {
|
|
margin-top: 0;
|
|
}
|
|
p {
|
|
display: none;
|
|
}
|
|
input {
|
|
background: transparent;
|
|
color: white !important;
|
|
border: 0;
|
|
border-bottom: 1px solid #66606b;
|
|
}
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: url(img/menu/menu-validation.png) center center no-repeat;
|
|
text-indent: -1000px;
|
|
height: 43px;
|
|
width: 43px;
|
|
}
|
|
|
|
}
|
|
div.textcell img {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#page {
|
|
// simulate left black band (may be replaced by a data uri PNG)
|
|
background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
div#main-content-wrapper {
|
|
padding-left: $nav-width;
|
|
flex: unset;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
div#main-content br:last-child {
|
|
display: none;
|
|
}
|
|
|
|
div#main-content div.meetings_table br:last-child {
|
|
display: block;
|
|
}
|
|
|
|
.page-template-homepage .gru-content {
|
|
display: block;
|
|
}
|
|
|
|
section {
|
|
padding: 2rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 2rem 1rem;
|
|
}
|
|
}
|
|
|
|
section#intro {
|
|
min-height: $intro-height;
|
|
background: url(img/header/img_ville_background_header.jpg) top center no-repeat;
|
|
background-size: cover;
|
|
box-shadow: 0 4px 8px #ccc;
|
|
@media screen and ($max-mobile-viewport) {
|
|
min-height: 0;
|
|
padding-top: 120px;
|
|
}
|
|
}
|
|
|
|
section#section-particuliers,
|
|
section#section-associations,
|
|
section#section-professionnels {
|
|
background: white;
|
|
color: #27252f;
|
|
position: relative;
|
|
h1:first-child {
|
|
font-size: 2.462rem;
|
|
font-weight: 600;
|
|
margin-bottom: 3rem;
|
|
@media screen and (max-width: 380px) {
|
|
font-size: 1.846rem;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
background: white center center no-repeat;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 5px 5px #ccc;
|
|
position: relative;
|
|
top: 12px;
|
|
margin-right: 20px;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
background: $violet;
|
|
height: 4px;
|
|
width: 45px;
|
|
display: block;
|
|
margin-top: 20px;
|
|
}
|
|
+ a {
|
|
position: absolute;
|
|
top: -4rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
top: -2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-particuliers {
|
|
min-height: 400px;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-particuliers/picto-particuliers.png);
|
|
}
|
|
position: absolute;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
h1 + div.link-list-cell,
|
|
h1 + div.wcsformsofcategorycell {
|
|
margin-top: 70px;
|
|
}
|
|
div.forms {
|
|
margin-left: 400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
div.search-results,
|
|
div.link-list-cell,
|
|
div.wcsformsofcategorycell {
|
|
background: transparent;
|
|
margin-left: 0px;
|
|
margin-bottom: 0;
|
|
width: 400px;
|
|
border: none;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
div.intro {
|
|
display: none;
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
h2 {
|
|
background: #6A5F5B;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding: 2rem;
|
|
box-shadow: 0px 0px 5px #333;
|
|
z-index: 100;
|
|
> span {
|
|
display: inline-block;
|
|
background-position: 0px center;
|
|
background-repeat: no-repeat;
|
|
font-weight: bold;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-position: 10px center;
|
|
}
|
|
> span {
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
i.opener {
|
|
display: none;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
height: 23px;
|
|
width: 19px;
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 20px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 2ex;
|
|
i.opener {
|
|
background-image: url(img/FlecheBas.png);
|
|
}
|
|
}
|
|
}
|
|
position: relative;
|
|
ul {
|
|
padding: 20px 30px;
|
|
position: absolute;
|
|
background: white;
|
|
left: 400px;
|
|
top: -30px;
|
|
width: 300px;
|
|
z-index: 20;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 5px black;
|
|
li {
|
|
a {
|
|
border: none;
|
|
color: $dark-link-color;
|
|
background: url(img/home/home-particuliers/fleche-rose.png) 10px 50% no-repeat;
|
|
padding-left: 30px;
|
|
padding-right: 10px;
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: #eee;
|
|
}
|
|
&::after {
|
|
// don't mark forms requiring authentication
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
height: 22px;
|
|
width: 23px;
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 42px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-radius: 0 0 10px 10px;
|
|
position: static;
|
|
left: auto;
|
|
top: auto;
|
|
width: auto;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
.opened {
|
|
h2 {
|
|
background: $orange;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (min-width: #{$mobile-limit - 1px}) {
|
|
&:hover {
|
|
h2 {
|
|
background: $orange url(img/home/home-particuliers/fleche_blanche_hover.png) top 50% right 20px no-repeat;
|
|
border-radius: 5px 30px 30px 5px;
|
|
margin-right: -30px;
|
|
}
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#search {
|
|
position: absolute;
|
|
top: 170px;
|
|
max-width: 320px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-size: 1.231rem;
|
|
line-height: 135%;
|
|
}
|
|
p {
|
|
font-weight: bold;
|
|
}
|
|
form {
|
|
display: flex;
|
|
input {
|
|
flex: 1;
|
|
background: white;
|
|
}
|
|
button {
|
|
border: none;
|
|
height: 43px;
|
|
width: 43px;
|
|
margin-right: 0;
|
|
box-shadow: none;
|
|
background: url(img/home/home-particuliers/valider.png) center center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
div.search-results {
|
|
display: none;
|
|
padding-top: 1rem;
|
|
p.no-hits {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 5px black;
|
|
color: black;
|
|
padding: 1rem;
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
display: block;
|
|
position: static;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-associations {
|
|
background: #e4dccf;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-associations/picto-associations.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-professionnels {
|
|
background: white;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-professionnels/picto-professionnels.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-associations,
|
|
section#section-professionnels {
|
|
div.wcsformcell {
|
|
background: transparent;
|
|
display: inline-block;
|
|
border: none;
|
|
margin-right: 3rem;
|
|
margin-bottom: 3rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-right: 10px;
|
|
}
|
|
a {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
width: 20vw;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 85vw;
|
|
}
|
|
display: inline-block;
|
|
padding: 2rem;
|
|
padding-right: 50px;
|
|
background: #fff;
|
|
color: $dark-link-color;
|
|
border-radius: 40px;
|
|
box-shadow: 0 0 4px #45434c;
|
|
font-size: 1rem;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 19px;
|
|
height: 23px;
|
|
left: -8px;
|
|
top: calc(50% - 10px);
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-associations/chevron-fond-orange.png) top right no-repeat;
|
|
width: 48px;
|
|
height: 48px;
|
|
right: 10px;
|
|
top: calc(50% - 24px);
|
|
}
|
|
&:hover {
|
|
background: #6a5f5b;
|
|
text-decoration: none;
|
|
color: white;
|
|
&::after {
|
|
background-image: url(img/home/home-associations/chevron-fond-blanc.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#vos-services-en-ligne {
|
|
margin: 120px auto 0 auto;
|
|
max-width: 50rem;
|
|
text-align: center;
|
|
> div {
|
|
margin: 0;
|
|
}
|
|
border: none;
|
|
background: transparent;
|
|
color: white;
|
|
font-size: 1.308rem;
|
|
font-weight: bold;
|
|
h1 {
|
|
padding-top: 50px;
|
|
color: white;
|
|
font-size: 5rem;
|
|
letter-spacing: 4px;
|
|
margin: 0;
|
|
margin-bottom: 50px;
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
height: 5px;
|
|
width: 56px;
|
|
position: absolute;
|
|
margin-top: 20px;
|
|
left: calc(50% - 28px + #{$nav-width / 2});
|
|
background: white;
|
|
@media screen and ($max-mobile-viewport) {
|
|
left: calc(50% - 28px);
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
margin-left: 0;
|
|
line-height: 1.8;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 10px;
|
|
text-align: center;
|
|
width: auto;
|
|
h1 {
|
|
font-size: 3.077rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.538rem;
|
|
}
|
|
}
|
|
a.pk-button {
|
|
display: inline-block;
|
|
width: 14.5em;
|
|
margin: 0 1rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 1rem 0;
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#intro {
|
|
#encart-inscription {
|
|
> div {
|
|
margin: 0;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 58px;
|
|
height: 58px;
|
|
background: url(img/home/inscription-accueil/home-utilisateur.png);
|
|
position: absolute;
|
|
top: -29px;
|
|
left: calc(50% - 29px);
|
|
}
|
|
box-sizing: content-box;
|
|
padding-top: 30px;
|
|
background-color: #ebebeb;
|
|
border-radius: 9px;
|
|
position: absolute;
|
|
width: 300px;
|
|
right: 150px;
|
|
top: 220px;
|
|
text-align: center;
|
|
@media screen and (max-width: 1500px) {
|
|
right: 80px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 2rem 0;
|
|
position: relative;
|
|
right: auto;
|
|
top: auto;
|
|
width: auto;
|
|
}
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 1.385rem;
|
|
letter-spacing: 3px;
|
|
}
|
|
p {
|
|
font-size: 1rem;
|
|
padding: 0 1rem;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
&:hover {
|
|
color: #333;
|
|
}
|
|
}
|
|
a#creer-mon-compte {
|
|
margin-left: 10%;
|
|
display: block;
|
|
background: url(img/home/inscription-accueil/plus.png) left center no-repeat;
|
|
padding-left: 50px;
|
|
height: 60px;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
margin-right: 10%;
|
|
padding-top: 24px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
div.menucell {
|
|
text-align: center;
|
|
li {
|
|
display: inline-block;
|
|
a {
|
|
border: none;
|
|
font-size: 0.769rem;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
background: inherit;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 1ex;
|
|
border-right: 1px solid #666;
|
|
}
|
|
}
|
|
&:last-child a {
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#title-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
|
|
background-size: cover;
|
|
padding: 170px 50px 100px 100px;
|
|
font-size: 1.231rem;
|
|
font-weight: bold;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 150px 1rem 1rem 1rem;
|
|
}
|
|
color: white;
|
|
p.category-name {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 1.154rem;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 4.231rem;
|
|
letter-spacing: 4px;
|
|
line-height: 100%;
|
|
margin-right: 160px;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 56px;
|
|
bottom: -20px;
|
|
left: 0;
|
|
background-color: #fff;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
div#temps-de-reponse {
|
|
position: absolute;
|
|
right: 80px;
|
|
top: 150px;
|
|
width: 50px;
|
|
text-align: center;
|
|
background: white;
|
|
border-radius: 5px;
|
|
padding: 10px 0;
|
|
span {
|
|
display: block;
|
|
color: #6b5f5a;
|
|
font-size: 1rem;
|
|
padding-top: 45px;
|
|
background: url(img/formulaire/picto-reveil.png) top center no-repeat;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: relative;
|
|
right: auto;
|
|
top: -10px;
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
span {
|
|
background-position: 5px 50%;
|
|
padding: 10px 5px 10px 40px;
|
|
}
|
|
}
|
|
}
|
|
& > div {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
div#content div#buttons-section {
|
|
background: $violet url(img/standard/img_background_footer_contenus.jpg) top center no-repeat;
|
|
background-size: cover;
|
|
padding: 2rem 1rem;
|
|
overflow: hidden;
|
|
margin: -10px 100px 3rem 100px;
|
|
box-shadow: 0 0 5px #ccc;
|
|
}
|
|
|
|
div#title-section,
|
|
div#title-section ~ div.encart {
|
|
& + div.textcell {
|
|
background: transparent;
|
|
> div {
|
|
margin-top: -70px;
|
|
background: white;
|
|
position: relative;
|
|
z-index: 100;
|
|
padding: 60px 60px;
|
|
box-shadow: 0 0 5px #ccc;
|
|
}
|
|
&.encart > div {
|
|
background: #6c5e5b;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#buttons-section {
|
|
& > div {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
section#section-professionnels {
|
|
div.wcsformcell {
|
|
a {
|
|
&::before {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#gauche {
|
|
box-shadow: 0 0 5px #ccc;
|
|
position: relative;
|
|
margin: 0 100px 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
}
|
|
div#tracking-code {
|
|
position: absolute;
|
|
top: -100px;
|
|
&.has-discard-button {
|
|
top: -180px;
|
|
button {
|
|
margin: 0 0 0.5em 0;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: center;
|
|
position: static;
|
|
width: 80%;
|
|
margin: 0 auto 1rem auto;
|
|
}
|
|
right: 10px;
|
|
background: white;
|
|
border-radius: 5px;
|
|
h3, a {
|
|
background: transparent;
|
|
color: #6b5f5a;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#gauche + div#rub_service {
|
|
margin-top: -30px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
div#title-section + div#rub_service {
|
|
margin-top: -45px;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding-top: 30px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
margin: 0 100px 50px 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 0 50px 0;
|
|
}
|
|
}
|
|
|
|
#steps {
|
|
h2 {
|
|
display: none;
|
|
}
|
|
margin-top: -55px;
|
|
background: white;
|
|
ol {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
top: -30px;
|
|
text-align: left;
|
|
display: flex;
|
|
li {
|
|
position: relative;
|
|
padding: 0 1rem;
|
|
&.first {
|
|
padding-left: 60px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
flex: 1;
|
|
text-align: center;
|
|
.marker {
|
|
display: inline-block;
|
|
padding: 0;
|
|
width: 52px;
|
|
height: 52px;
|
|
line-height: 52px;
|
|
font-size: 1.538rem;
|
|
border-radius: 100%;
|
|
color: #333;
|
|
border: 2px solid $primary-color;
|
|
background: white;
|
|
z-index: 100;
|
|
position: relative;
|
|
font-weight: bold;
|
|
}
|
|
&.step-before,
|
|
&.current {
|
|
background: transparent;
|
|
span.marker {
|
|
background: #6a5f5b;
|
|
border-color: #6a5f5b;
|
|
border-radius: 100%;
|
|
color: white;
|
|
}
|
|
}
|
|
.label {
|
|
padding-top: 10px;
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #4d4d55;
|
|
z-index: 50;
|
|
}
|
|
&.current::before {
|
|
content: '';
|
|
width: 50%;
|
|
}
|
|
&.step-before::before {
|
|
content: '';
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 28px;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #c5c4c2;
|
|
}
|
|
}
|
|
&.steps-10, &.steps-11, &.steps-12, &.steps-13, &.steps-14, &.steps-15,
|
|
&.steps-16, &.steps-17, &.steps-18, &.steps-19, &.steps-20, &.steps-21,
|
|
&.steps-22, &.steps-23, &.steps-24, &.steps-25, &.steps-26, &.steps-27,
|
|
&.steps-28, &.steps-29, &.steps-30, &.steps-31, &.steps-32, &.steps-33 {
|
|
margin-top: -45px;
|
|
ol {
|
|
li {
|
|
min-width: auto;
|
|
width: 2rem;
|
|
span.label {
|
|
display: none;
|
|
}
|
|
&.current {
|
|
span.label {
|
|
display: block;
|
|
width: 10rem;
|
|
margin-left: -1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
ol {
|
|
li {
|
|
min-width: none;
|
|
max-width: none;
|
|
width: 100%;
|
|
&.step-after,
|
|
&.step-before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
box-shadow: 0 10px 5px #ccc;
|
|
font-size: 1.308rem;
|
|
div.form-validation > div.infonotice,
|
|
div.drafts-recall,
|
|
form {
|
|
margin: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 10px;
|
|
}
|
|
padding: 0;
|
|
}
|
|
div.form-validation > div.infonotice {
|
|
background: white;
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
border-radius: 10px;
|
|
padding: 1rem 1rem 1rem 4rem;
|
|
margin-bottom: 2rem;
|
|
color: $font-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0rem 1rem 0rem 4rem;
|
|
}
|
|
}
|
|
|
|
form {
|
|
> h3, > h4, > div, > p.comment-field {
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
h3 {
|
|
font-size: 1.769rem;
|
|
text-transform: uppercase;
|
|
margin-bottom: 3rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $orange;
|
|
}
|
|
}
|
|
div.page h3 {
|
|
border: none;
|
|
}
|
|
div.widget div.title {
|
|
font-size: 1.231rem;
|
|
}
|
|
> div.buttons {
|
|
margin: 0 -100px;
|
|
background: $violet url(img/standard/img_background_footer_contenus.jpg) top center no-repeat;
|
|
background-size: cover;
|
|
padding: 4rem 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 -10px;
|
|
padding: 4rem 1rem;
|
|
}
|
|
.savedraft-button {
|
|
display: none;
|
|
}
|
|
div.widget {
|
|
margin: 0 5rem;
|
|
text-transform: uppercase;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
&.previous-button {
|
|
margin-left: 1ex;
|
|
}
|
|
}
|
|
}
|
|
div.cancel-button {
|
|
visibility: hidden;
|
|
}
|
|
div.previous-button + div.cancel-button {
|
|
display: none;
|
|
}
|
|
button {
|
|
min-width: 200px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
min-width: 150px;
|
|
}
|
|
}
|
|
div.submit-button {
|
|
order: 1;
|
|
button {
|
|
color: $orange;
|
|
background: white;
|
|
&:hover {
|
|
background: $orange;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
span.required {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.CheckboxWidget input + span::before,
|
|
.CheckboxesWidget input + span::before,
|
|
.RadiobuttonsWidget input + span::before {
|
|
border: none;
|
|
box-shadow: 0 0 6px 0px #505050;
|
|
}
|
|
|
|
.CheckboxWidget input + span::after,
|
|
.CheckboxesWidget input + span::after,
|
|
.RadiobuttonsWidget input + span::after {
|
|
left: 0;
|
|
top: calc(0.33em - 1px);
|
|
height: calc(0.66rem);
|
|
width: calc(0.66rem);
|
|
}
|
|
|
|
div#rub_service {
|
|
div#receipt-intro,
|
|
div.section {
|
|
padding: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#evolution-log,
|
|
div#summary {
|
|
h2 {
|
|
font-size: 1.769rem;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
form + br,
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
|
|
ul#evolutions {
|
|
li {
|
|
span.item {
|
|
background: $orange !important;
|
|
border: 1px solid transparent;
|
|
box-shadow: none;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
&::after {
|
|
width: 3px;
|
|
background: $orange;
|
|
left: 29px;
|
|
}
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#columns-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.gru-content .cell.textcell.encart {
|
|
float: right;
|
|
z-index: 1000;
|
|
position: relative;
|
|
@media screen and ($max-mobile-viewport) {
|
|
float: none;
|
|
}
|
|
> div {
|
|
padding: 1rem;
|
|
max-width: 20em;
|
|
margin-right: 100px;
|
|
position: relative;
|
|
background: #6c5e5b;
|
|
color: white;
|
|
&::before {
|
|
content: "";
|
|
width: 85px;
|
|
height: 79px;
|
|
background: url(img/standard/picto--infos.png) center center no-repeat;
|
|
display: block;
|
|
position: absolute;
|
|
top: -40px;
|
|
left: -40px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 1ex 3ex;
|
|
max-width: none;
|
|
}
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gru-content .cell.textcell > div {
|
|
margin: 3rem 100px 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3rem 1rem 0 1rem;
|
|
}
|
|
h2 {
|
|
display: inline-block;
|
|
padding: 0;
|
|
font-size: 1.769rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
h3, h4, h5, ul, p, table {
|
|
margin: 1em 0;
|
|
line-height: 1.8;
|
|
}
|
|
ul {
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
|
|
.gru-content {
|
|
div#title-section ~ div.profile,
|
|
div#title-section ~ div.account-management,
|
|
div#title-section ~ div.cell > div {
|
|
margin: 3rem 100px 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3rem 1rem 0 1rem;
|
|
}
|
|
h2 {
|
|
display: inline-block;
|
|
padding: 0;
|
|
font-size: 1.769rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
div#title-section ~ div.profile,
|
|
div#title-section ~ div.account-management {
|
|
margin: 3rem 0px 0 0px;
|
|
padding: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
div#title-section ~ div.cell.encart > div {
|
|
margin: 3rem 100px 0 10px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3rem 1rem 0 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#a2-profile {
|
|
div#profile {
|
|
padding-left: 0;
|
|
font-size: 110%;
|
|
line-height: 130%;
|
|
}
|
|
}
|
|
|
|
div#account-management {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
div.comment-field.note {
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-right: 3rem;
|
|
margin-bottom: 2rem;
|
|
h4 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
div#main-content-wrapper {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
div#actu {
|
|
position: absolute;
|
|
z-index: 100;
|
|
right: -400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
right: calc(-100vw + 85px);
|
|
}
|
|
transition: right ease-out 0.5s;
|
|
top: 62px;
|
|
height: calc(100vh - 62px);
|
|
background: url(img/header/icone-actu-home.png) top left no-repeat;
|
|
img {
|
|
transition: opacity ease-out 0.5s;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
position: relative;
|
|
right: -1px;
|
|
}
|
|
div#actu-content {
|
|
height: 100%;
|
|
background: white;
|
|
display: inline-block;
|
|
width: 400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: calc(100vw - 85px);
|
|
}
|
|
padding: 20px 20px 20px 40px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
box-shadow: none;
|
|
}
|
|
border-bottom-left-radius: 10px;
|
|
h3 {
|
|
font-size: 3.077rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 1.538rem;
|
|
}
|
|
margin-bottom: 2rem;
|
|
a.rss {
|
|
margin-left: 1rem;
|
|
display: inline-block;
|
|
background: url(img/home/home-actu-ouvert/flux-rss.png) center center no-repeat;
|
|
width: 17px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
div.feed-entries {
|
|
height: calc(100vh - 300px);
|
|
overflow-y: auto;
|
|
div.feed-entry {
|
|
border-top: 1px solid #d5d5d5;
|
|
padding: 1rem 0;
|
|
margin-right: 20px;
|
|
span.date {
|
|
background: url(img/home/home-actu-ouvert/picto-date.png) left center no-repeat;
|
|
padding-left: 20px;
|
|
font-style: italic;
|
|
}
|
|
a.read {
|
|
text-transform: uppercase;
|
|
display: block;
|
|
color: $dark-link-color;
|
|
text-align: right;
|
|
padding-right: 30px;
|
|
padding-top: 3px;
|
|
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
h4 a {
|
|
color: $font-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
padding-right: 30px;
|
|
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a.all {
|
|
margin-top: 3rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
padding-right: 30px;
|
|
color: $dark-link-color;
|
|
background: url(img/home/home-actu-ouvert/chevron-droite-rouge.png) center right no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
transition: opacity linear 0.2s;
|
|
}
|
|
|
|
#main-content.news-open {
|
|
div#actu {
|
|
right: 0;
|
|
div#actu-content {
|
|
box-shadow: 0 0 5px black;
|
|
}
|
|
img {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
#content {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
#login-page div.block,
|
|
#content div.a2-block {
|
|
width: 40rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
padding-top: 1rem;
|
|
}
|
|
margin: 0 auto;
|
|
h2 {
|
|
font-size: 3.538rem;
|
|
font-weight: bold;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 2.462rem;
|
|
}
|
|
}
|
|
p {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
form ul.errorlist.nonfield li {
|
|
background: #eee;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
#columns > div.a2-block {
|
|
padding-top: 160px;
|
|
}
|
|
|
|
#login-page button.cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
list-style-image: url(img/puce.png);
|
|
}
|
|
|
|
#nav-tracking-code {
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
box-sizing: content-box;
|
|
background: #554b49;
|
|
border-top: 10px solid $violet;
|
|
padding: 10px 1rem 0 1rem;
|
|
text-align: center;
|
|
height: 200px;
|
|
input {
|
|
background: #554b49;
|
|
border: 0;
|
|
border-bottom: 1px solid white;
|
|
color: white;
|
|
}
|
|
input::placeholder {
|
|
color: #eee;
|
|
}
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: url(img/menu/menu-validation.png) center center no-repeat;
|
|
text-indent: -1000px;
|
|
height: 43px;
|
|
width: 43px;
|
|
}
|
|
}
|
|
|
|
#messages li {
|
|
margin-top: 0;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
#steps-mobile {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
#steps {
|
|
display: none;
|
|
}
|
|
#steps-mobile {
|
|
display: block;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
div.position {
|
|
margin: -35px auto 0 auto;
|
|
width: 68px;
|
|
height: 68px;
|
|
background: $orange;
|
|
border-radius: 100%;
|
|
color: white;
|
|
span {
|
|
font-size: 1.385rem;
|
|
line-height: 34px;
|
|
font-weight: bold;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
width: 2rem;
|
|
&.current-page {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
}
|
|
}
|
|
.current-label {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
padding: 1ex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CheckboxWidget, .CheckboxesWidget, .RadiobuttonsWidget {
|
|
> .title {
|
|
padding-bottom: 2px;
|
|
}
|
|
.content {
|
|
line-height: 150%;
|
|
}
|
|
}
|
|
|
|
#content #registration-title {
|
|
background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
|
|
background-size: cover;
|
|
font-size: 1.231rem;
|
|
text-align: center;
|
|
width: auto;
|
|
padding-top: 160px;
|
|
padding-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
max-width: none;
|
|
color: white;
|
|
h2 {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
p {
|
|
font-weight: 600;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 70px;
|
|
}
|
|
}
|
|
|
|
#login-blocks,
|
|
#registration-blocks {
|
|
display: flex;
|
|
justify-content: center;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
div.a2-block {
|
|
max-width: 35rem;
|
|
margin: 0 3rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
max-width: none;
|
|
margin: 0 1rem;
|
|
}
|
|
position: relative;
|
|
h2 {
|
|
font-size: 2.769rem;
|
|
padding-left: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
&#frontend-login-password::after,
|
|
&#frontend-registration-email::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
background: #666;
|
|
width: 1px;
|
|
top: 80px;
|
|
bottom: 80px;
|
|
right: -3rem; // -margin
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 1px;
|
|
width: auto;
|
|
top: auto;
|
|
bottom: -12px;
|
|
left: 40px;
|
|
right: 40px;
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#login-page.methods1 #login-blocks #frontend-login-password::after,
|
|
#registration-blocks div.a2-block.registration-frontend-0#frontend-registration-email::after {
|
|
content: none;
|
|
}
|
|
|
|
#login-blocks {
|
|
padding-bottom: 7rem; // enough space for lost password/create account lines
|
|
}
|
|
|
|
#frontend-login-password {
|
|
.login-actions {
|
|
// get lost password/create account lines out of flow, so the
|
|
// FranceConnect button can be aligned with the login button.
|
|
position: absolute;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#frontend-login-fc,
|
|
div#frontend-registration-fc {
|
|
div#fc-button-wrapper, div#fc-explanation-text {
|
|
text-align: left;
|
|
padding-top: 0;
|
|
}
|
|
|
|
div#fc-button {
|
|
box-shadow: none;
|
|
width: auto;
|
|
a div img {
|
|
height: 60px;
|
|
}
|
|
position: absolute;
|
|
bottom: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.list-of-forms span.form-number {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#profile span.label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
form p label,
|
|
form.quixote div.title label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
form.quixote div.widget {
|
|
margin-bottom: 4ex;
|
|
}
|
|
|
|
div#rub_service div#info {
|
|
padding: 100px;
|
|
h2 {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: 3.077rem;
|
|
padding: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 60px 20px;
|
|
}
|
|
}
|
|
|
|
#pwa-navigation {
|
|
a {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
padding-top: 38px;
|
|
}
|
|
}
|
|
|
|
div.communes-toulouse {
|
|
line-height: 60px;
|
|
select {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
width: auto;
|
|
border-radius: 20px;
|
|
border: 1px solid #6A5F5B;
|
|
&:focus {
|
|
border: 1px solid #6A5F5B;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div#messages {
|
|
margin: 0 0 0 4px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
li {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
div#main-content div#messages {
|
|
// push main content down
|
|
visibility: hidden;
|
|
}
|
|
|
|
$list-illus:
|
|
dechets-fagots,
|
|
dechets-sacs,
|
|
encombrants-armoire-commode,
|
|
encombrants-aspirateur,
|
|
encombrants-autre-objet-volumineux,
|
|
encombrants-canape,
|
|
encombrants-chaise,
|
|
encombrants-cuisiniere,
|
|
encombrants-etagere-table,
|
|
encombrants-lave-vaisselle-four,
|
|
encombrants-machine-a-laver,
|
|
encombrants-matelas-sommier,
|
|
encombrants-ordinateur-tele,
|
|
encombrants-palette,
|
|
encombrants-petit-electromenager,
|
|
encombrants-refrigerateur,
|
|
encombrants-refrigerateur-americain;
|
|
|
|
@each $list-illu in $list-illus {
|
|
div#rub_service form div.widget.#{$list-illu} div.title {
|
|
background: url(/assets/picto:#{$list-illu}) 0px 20px no-repeat;
|
|
height: 150px;
|
|
}
|
|
}
|