1263 lines
22 KiB
SCSS
1263 lines
22 KiB
SCSS
$mobile-hamburger-menu-width: 70px;
|
|
$mobile-hamburger-menu-height: 50px;
|
|
|
|
body.has-header-background header {
|
|
background: none;
|
|
}
|
|
|
|
div#main-content {
|
|
min-height: 100px;
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
.site-header {
|
|
z-index: 200;
|
|
height: $header-height;
|
|
background: white;
|
|
h1 {
|
|
display: none;
|
|
}
|
|
#toplinks {
|
|
height: $header-height;
|
|
right: auto;
|
|
left: $nav-menu-side + 2px;
|
|
border-radius: 0;
|
|
text-transform: uppercase;
|
|
border: 0;
|
|
box-shadow: none;
|
|
padding-left: 0.5em;
|
|
width: $width - $nav-menu-side - $pwa-desktop-nav-width;
|
|
a, span, .toplinks--list-item::after {
|
|
color: $darkblue;
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 0.812rem;
|
|
font-weight: 500;
|
|
}
|
|
a.hello {
|
|
max-width: 200px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
span {
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.toplinks--list-item:first-child::after {
|
|
margin-left: 0.6em;
|
|
content: " - ";
|
|
}
|
|
.registration {
|
|
margin-left: 0.5em;
|
|
}
|
|
a.logout {
|
|
background: url(img/CROIX.svg) center right no-repeat;
|
|
padding-right: 30px;
|
|
}
|
|
a.home {
|
|
overflow: hidden;
|
|
background: #e8e8e8 url(img/HOME.svg) center center no-repeat;
|
|
background-size: 26px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
text-indent: -10000px;
|
|
display: block;
|
|
width: 42px;
|
|
&:hover {
|
|
background-color: $yellow;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
height: $mobile-hamburger-menu-height;
|
|
overflow: hidden;
|
|
padding-top: 7px;
|
|
left: $mobile-hamburger-menu-width;
|
|
right: 0;
|
|
text-align: left;
|
|
a.hello {
|
|
width: calc(100vw - #{50px + $mobile-hamburger-menu-width * 2});
|
|
overflow: hidden;
|
|
padding-left: 0;
|
|
span {
|
|
width: 50px;
|
|
overflow: visible;
|
|
text-overflow: normal;
|
|
white-space: normal;
|
|
}
|
|
+ span {
|
|
display: none;
|
|
}
|
|
}
|
|
a.login,
|
|
a.registration {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
a.logout {
|
|
padding-right: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
text-indent: -10000px;
|
|
right: $mobile-hamburger-menu-width;
|
|
width: 40px;
|
|
height: $mobile-hamburger-menu-height;
|
|
background-size: 30px;
|
|
background-position: center center;
|
|
}
|
|
a.home {
|
|
width: $mobile-hamburger-menu-width;
|
|
height: $mobile-hamburger-menu-height;
|
|
}
|
|
}
|
|
@media screen and ($min-desktop-viewport) and (max-width: $width) {
|
|
width: calc(100vw - #{$nav-menu-side + $pwa-desktop-nav-width});
|
|
a.logout {
|
|
text-indent: -10000px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
z-index: 250;
|
|
pointer-events: none;
|
|
button, ul {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
.gru-nav-wrapper {
|
|
margin-top: -$header-height;
|
|
}
|
|
|
|
div.gru-nav {
|
|
.gru-nav-button {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
div.gru-nav .gru-nav-button {
|
|
top: 0;
|
|
margin-left: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: $mobile-hamburger-menu-width;
|
|
height: $mobile-hamburger-menu-height;
|
|
border: solid transparent;
|
|
border-width: 2px 15px 6px;
|
|
}
|
|
+ ul {
|
|
margin-bottom: 0;
|
|
position: absolute;
|
|
width: $width;
|
|
border-top: 0;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
#pwa-navigation {
|
|
ul li {
|
|
a {
|
|
padding-top: 35px;
|
|
span {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
line-height: 110%;
|
|
font-size: 0.812rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: $mobile-limit - 1px) {
|
|
#pwa-navigation {
|
|
display: block;
|
|
max-width: $width;
|
|
margin: auto;
|
|
position: relative;
|
|
height: auto;
|
|
> div {
|
|
width: $pwa-desktop-nav-width;
|
|
background: $nav-mobile-bottom-bar-background;
|
|
position: absolute;
|
|
right: 0;
|
|
top: #{0px - $header-height};
|
|
}
|
|
ul li {
|
|
margin: 0;
|
|
a {
|
|
height: $header-height;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
background-image: none !important;
|
|
background-position: 15px 50%;
|
|
padding-top: 10px;
|
|
span {
|
|
font-size: 0.938rem;
|
|
}
|
|
span.badge {
|
|
padding: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
text-align: center;
|
|
left: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.has-pwa-navigation footer {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
#banner-wrapper {
|
|
height: 150px;
|
|
background: url(/assets/header:background) top center no-repeat;
|
|
background-position: top -40px center;
|
|
background-size: cover;
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 140px;
|
|
}
|
|
border-bottom: 5px solid $yellow;
|
|
margin-bottom: 25px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-bottom: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
#banner {
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
max-width: $width;
|
|
display: flex;
|
|
.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
h1 {
|
|
margin-top: 20px;
|
|
a {
|
|
text-indent: -10000px;
|
|
padding-top: 0;
|
|
height: 130px;
|
|
display: inline-block;
|
|
width: 522px;
|
|
background: url(img/LOGO.svg) top center no-repeat;
|
|
background-size: auto 110px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 10px;
|
|
a {
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
@media screen and (max-width: 360px) {
|
|
a {
|
|
background-size: 95% auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topside {
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
flex: 1;
|
|
max-width: 400px;
|
|
background: $blue;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
background: $blue;
|
|
display: block;
|
|
transform: skewX(-10deg);
|
|
height: 350px;
|
|
transform-origin: top left;
|
|
width: 62px;
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
background: $blue;
|
|
display: block;
|
|
height: 350px;
|
|
top: 0;
|
|
right: calc(0px - (100vw - #{$width}) / 2);
|
|
width: calc((100vw - #{$width}) / 2);
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
h2, span {
|
|
display: block;
|
|
padding-left: 60px;
|
|
position: relative;
|
|
z-index: 10;
|
|
text-transform: uppercase;
|
|
font-size: 1.25rem;
|
|
}
|
|
h2 {
|
|
padding-top: 100px;
|
|
color: $darkblue;
|
|
font-weight: bold;
|
|
}
|
|
span {
|
|
color: white;
|
|
}
|
|
|
|
#idea {
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
border: 15px solid $darkblue;
|
|
border-color: $darkblue $darkblue transparent transparent;
|
|
position: absolute;
|
|
left: -30px;
|
|
}
|
|
float: right;
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
background: $darkblue;
|
|
width: 300px;
|
|
h3, p {
|
|
font-size: 0.875rem;
|
|
margin: 0;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
h3 {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.carrousel-content {
|
|
margin: 0 auto;
|
|
max-width: $width;
|
|
div.carrousel-nav {
|
|
left: auto;
|
|
bottom: auto;
|
|
top: 60px;
|
|
right: 0px;
|
|
width: 40px;
|
|
label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
background: white;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
top: auto;
|
|
bottom: 10px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
height: 200px;
|
|
}
|
|
|
|
input + div div.carrousel-item {
|
|
padding-left: 0;
|
|
background: $yellow url(img/right.png) right 100px top 50% no-repeat !important;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-position: right 60px bottom 20px !important;
|
|
}
|
|
@media screen and (max-width: 360px) {
|
|
background-position: right 40px bottom 20px !important;
|
|
}
|
|
}
|
|
input + div div.carrousel-item div.carrousel-item-content {
|
|
margin-bottom: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
vertical-align: top;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
input + div div.carrousel-item div.carrousel-item-content > a {
|
|
text-align: left;
|
|
margin-left: 0;
|
|
margin-right: 10rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-right: 2rem;
|
|
height: 150px;
|
|
}
|
|
strong, p {
|
|
max-width: none;
|
|
color: $darkblue;
|
|
}
|
|
strong {
|
|
text-transform: uppercase;
|
|
+ p {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
input + div div.carrousel-item::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
|
|
#content-top-wrapper {
|
|
background: #ececec;
|
|
}
|
|
|
|
@mixin cover-width {
|
|
&::after,
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: calc((100vw - #{$width}) / 2);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
&::before {
|
|
left: calc(0px - (100vw - #{$width}) / 2);
|
|
}
|
|
&::after {
|
|
right: calc(10px - (100vw - #{$width}) / 2);
|
|
}
|
|
}
|
|
|
|
#footer-wrapper {
|
|
padding-top: 0;
|
|
}
|
|
|
|
footer #idea {
|
|
position: relative;
|
|
@include cover-width;
|
|
height: 140px;
|
|
background: $darkblue;
|
|
p {
|
|
color: white;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 0.812rem;
|
|
margin: 0;
|
|
a {
|
|
display: block;
|
|
padding-top: 40px;
|
|
font-size: 1.375rem;
|
|
letter-spacing: 1.5px;
|
|
color: white;
|
|
}
|
|
}
|
|
&::after,
|
|
&::before {
|
|
background: $darkblue;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 100px;
|
|
p {
|
|
font-weight: normal;
|
|
a {
|
|
font-weight: bold;
|
|
padding-top: 10px;
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 360px) {
|
|
height: 140px;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
#financeurs {
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: center;
|
|
img {
|
|
float: none !important;
|
|
display: block;
|
|
margin: 10px auto !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-top {
|
|
position: relative;
|
|
width: $width;
|
|
max-width: 100vw;
|
|
margin: 0 auto;
|
|
div#carrousel {
|
|
@include cover-width;
|
|
&::after,
|
|
&::before {
|
|
height: $carrousel-height;
|
|
background: $yellow;
|
|
}
|
|
margin-bottom: 20px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
div.cell.grid-1-2 {
|
|
margin-left: 0;
|
|
margin-right: 5px;
|
|
width: ($width / 2) - 10px;
|
|
padding-right: 0;
|
|
+ div.cell {
|
|
margin-left: 10px;
|
|
width: ($width / 2) - 10px;
|
|
}
|
|
@media screen and ($min-desktop-viewport) and (max-width: $width) {
|
|
width: calc(100vw / 2 - 10px);
|
|
+ div.cell {
|
|
width: calc(100vw / 2 - 10px);
|
|
}
|
|
}
|
|
}
|
|
|
|
a.big-image-link {
|
|
border: 0;
|
|
background-color: white;
|
|
background-position: left 20px top 50%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-position: left 5px top 50%;
|
|
background-size: 160px auto;
|
|
}
|
|
&:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
margin-bottom: 0;
|
|
div {
|
|
padding-left: 300px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 170px;
|
|
}
|
|
@media screen and ($min-desktop-viewport) and (max-width: $width) {
|
|
padding-left: 250px;
|
|
}
|
|
display: table;
|
|
strong {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
position: static;
|
|
text-align: left;
|
|
width: 200px;
|
|
font-size: 1.625rem;
|
|
line-height: 110%;
|
|
font-weight: 500;
|
|
top: 0px;
|
|
height: 100%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.cell.trackingcodeinputcell {
|
|
background: $green;
|
|
padding: 0px 20px 30px 20px;
|
|
color: white;
|
|
h2:first-child {
|
|
margin-bottom: 0;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
padding-left: 0;
|
|
}
|
|
p {
|
|
margin-top: 0;
|
|
font-size: 90%;
|
|
}
|
|
form {
|
|
margin: 0;
|
|
display: flex;
|
|
input,
|
|
input:focus {
|
|
margin: 0;
|
|
background: white;
|
|
border: none;
|
|
}
|
|
button {
|
|
flex: 0;
|
|
background: $darkblue;
|
|
color: $green;
|
|
border: 0;
|
|
margin-right: 0;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-top {
|
|
div.cell.trackingcodeinputcell {
|
|
padding: 30px 50px;
|
|
height: 250px;
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
div.menucell {
|
|
a {
|
|
color: #5a5a5a;
|
|
text-decoration: underline;
|
|
}
|
|
&#carrousel {
|
|
a {
|
|
color: $darkblue;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
div.textcell {
|
|
h4 {
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #a9aaac;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#page div#main-content-wrapper {
|
|
padding-bottom: 50px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
div#title-section {
|
|
position: relative;
|
|
background: #ececec;
|
|
@include cover-width;
|
|
&::after,
|
|
&::before {
|
|
background: #ececec;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
font-size: 3.125rem;
|
|
line-height: 100%;
|
|
letter-spacing: 1.5px;
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
color: $darkblue;
|
|
max-width: 700px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
div#service-propose-par {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 60px;
|
|
text-transform: uppercase;
|
|
span {
|
|
display: block;
|
|
text-align: right;
|
|
color: $darkblue;
|
|
font-size: 0.812rem;
|
|
}
|
|
span.commune {
|
|
font-weight: bold;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
span {
|
|
text-align: left;
|
|
}
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox {
|
|
position: relative;
|
|
width: 350px;
|
|
margin-top: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
width: $width - 350px - 20px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
@media screen and ($min-desktop-viewport) and (max-width: $width) {
|
|
width: calc(100vw - 350px - 20px);
|
|
}
|
|
}
|
|
|
|
|
|
.form-content--sidebox div#tracking-code {
|
|
background: $green;
|
|
height: 32px;
|
|
margin-top: -32px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
order: 0;
|
|
margin-left: 10px;
|
|
width: 200px;
|
|
height: auto;
|
|
}
|
|
h3, a {
|
|
background: transparent;
|
|
display: inline-block;
|
|
color: white;
|
|
font-size: $font-size;
|
|
border: none;
|
|
text-transform: uppercase;
|
|
padding: 3px 0;
|
|
font-weight: bold;
|
|
}
|
|
h3 {
|
|
font-weight: normal;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
form {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
right: -250px;
|
|
button {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
width: 250px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
button {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Steps
|
|
.wcs-steps {
|
|
text-transform: uppercase;
|
|
font-size: .89em;
|
|
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
margin: -1px 10px;
|
|
}
|
|
}
|
|
.wcs-step {
|
|
margin-bottom: 0;
|
|
border-radius: 0;
|
|
|
|
&--label {
|
|
font-size: 1em;
|
|
}
|
|
|
|
&--marker {
|
|
font-weight: bold;
|
|
> * {
|
|
transform: none;
|
|
font-size: 1em;
|
|
}
|
|
&-total {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-right: .33em;
|
|
}
|
|
// Slash
|
|
&::before {
|
|
height: 1.2em;
|
|
margin: .3em;
|
|
}
|
|
&::after {
|
|
content: "-";
|
|
align-self: center;
|
|
order: 3;
|
|
color: #fff;
|
|
}
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
height: auto;
|
|
width: auto;
|
|
color: $primary-color !important;
|
|
padding-left: .33em;
|
|
}
|
|
}
|
|
}
|
|
|
|
form.quixote div.buttons {
|
|
display: flex;
|
|
@media screen and (max-width: $width) {
|
|
flex-wrap: wrap;
|
|
}
|
|
div.savedraft-button {
|
|
display: none;
|
|
}
|
|
div.widget {
|
|
div.content,
|
|
button {
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
box-shadow: none;
|
|
}
|
|
button {
|
|
padding: 1rem 1rem;
|
|
}
|
|
div.content {
|
|
padding-right: 1rem;
|
|
}
|
|
@media screen and (max-width: $width) {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
}
|
|
div.previous-button {
|
|
flex: 1;
|
|
order: 0;
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 50%;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
div.cancel-button {
|
|
flex: 1;
|
|
order: 1;
|
|
button {
|
|
background: #ececec;
|
|
color: #adadad;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 50%;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
div.submit-button {
|
|
flex: 1;
|
|
order: 2;
|
|
button {
|
|
background: $green url(img/right.png) right 10px top 50% no-repeat;
|
|
background-size: auto 60%;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul#evolutions,
|
|
div.gru-content #disclose-dataview,
|
|
div#receipt-intro {
|
|
margin: 1em 10px;
|
|
}
|
|
|
|
div#rub_service div.dataview {
|
|
margin-top: 1rem;
|
|
font-size: 90%;
|
|
}
|
|
|
|
div.gru-content div#rub_service h3,
|
|
div#rub_service h3 {
|
|
@extend %title;
|
|
padding-left: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
div.datetimepicker {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
form.quixote {
|
|
@if ($field-on-error-style == custom) {
|
|
div.error {
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
font-weight: normal;
|
|
color: #e95f5c;
|
|
}
|
|
div.widget-with-error {
|
|
input[type=text], input[type=email], textarea {
|
|
border-color: #e95f5c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.textcell h1 {
|
|
@extend %title;
|
|
font-size: 2.5rem;
|
|
padding-left: 0;
|
|
}
|
|
|
|
footer {
|
|
.grid-footer-1-5 {
|
|
width: calc(20% - 1rem);
|
|
padding-right: 0;
|
|
padding-left: 1rem;
|
|
text-align: center;
|
|
img {
|
|
max-width: 90%;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 50%;
|
|
}
|
|
@media screen and (max-width: $very-small-limit) {
|
|
width: 100%;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar {
|
|
.textcell {
|
|
h2 {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.wcsformcell {
|
|
a {
|
|
color: $darkblue;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
border-bottom: 1px solid $yellow;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.big-image-link {
|
|
display: block;
|
|
border: 10px solid #f4f4f4;
|
|
background-color: #f4f4f4;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom 100px left 50%;
|
|
background-size: 230px auto;
|
|
margin-bottom: 2rem;
|
|
margin-bottom: 1rem;
|
|
height: 250px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 150px;
|
|
background-position: top center;
|
|
background-size: auto 80px;
|
|
margin-bottom: 5px;
|
|
}
|
|
@media screen and (max-width: 360px) {
|
|
height: 170px;
|
|
}
|
|
padding-top: 0;
|
|
overflow: hidden;
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
border-color: #e0e0e0;
|
|
background-color: #e0e0e0;
|
|
}
|
|
div {
|
|
height: 100%;
|
|
position: relative;
|
|
strong {
|
|
text-transform: uppercase;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 140px;
|
|
text-align: center;
|
|
color: $darkblue;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
strong {
|
|
top: 80px;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
strong {
|
|
top: 80px;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
p {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
border-width: 10px 5px 5px 5px;
|
|
}
|
|
@media screen and (max-width: 360px) {
|
|
border-width: 10px 2px 2px 2px;
|
|
}
|
|
}
|
|
|
|
div.cell.large a.big-image-link {
|
|
// signalement links on mobile, restore some desktop sizes
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-size: 230px auto;
|
|
border-width: 10px;
|
|
div strong {
|
|
top: 110px;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.wcs-page {
|
|
#banner-wrapper {
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 55px;
|
|
}
|
|
#banner .title h1 {
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 5px;
|
|
}
|
|
a {
|
|
padding-top: 0;
|
|
height: 130px;
|
|
background-size: auto 110px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 55px;
|
|
background-image: url(img/LOGO-no-baseline.svg);
|
|
background-size: auto 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
#columns {
|
|
padding: 0;
|
|
}
|
|
form.quixote + br.quixoteform {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.authentic-page {
|
|
#page {
|
|
background: #ececec;
|
|
background: linear-gradient(to bottom, white 0%, white 50px, #ececec 50px, #ececec 100%);
|
|
}
|
|
#columns {
|
|
margin-top: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#login-page > div.block {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
}
|
|
}
|
|
#sidebar {
|
|
flex: 0 0 350px;
|
|
max-width: 350px;
|
|
width: 350px;
|
|
margin-left: 0;
|
|
div.cell {
|
|
margin-left: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 0.7em;
|
|
width: auto;
|
|
max-width: auto;
|
|
}
|
|
}
|
|
#banner-wrapper {
|
|
}
|
|
#fc-button {
|
|
box-shadow: none;
|
|
padding: 0;
|
|
width: 250px;
|
|
}
|
|
div#fc-registration-user-info,
|
|
div#fc-button-wrapper,
|
|
div#fc-explanation-text {
|
|
text-align: left;
|
|
}
|
|
div#account-management-fc div.fc {
|
|
padding: 0 1rem;
|
|
+ p {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
}
|
|
div#frontend-registration-fc {
|
|
> div {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
}
|
|
div#frontend-registration-email {
|
|
form {
|
|
padding: 0 0 1rem 0;
|
|
}
|
|
}
|
|
div.a2-block {
|
|
padding-bottom: 1px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div.a2-block {
|
|
margin: 1rem auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div#login-page {
|
|
div.block {
|
|
h2 {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
h2 + div {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.errornotice {
|
|
color: #e95f5c;
|
|
}
|
|
|
|
div#up {
|
|
position: relative;
|
|
top: -40px;
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
background: url(img/FLECHE.svg) top left no-repeat;
|
|
width: 75px;
|
|
height: 75px;
|
|
text-indent: -10000px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.page-template-homepage {
|
|
div#main-content-wrapper {
|
|
margin-top: 25px;
|
|
}
|
|
#banner-wrapper {
|
|
border: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ($min-desktop-viewport) {
|
|
#banner-wrapper {
|
|
height: 350px;
|
|
background-position: -250px 0px;
|
|
#banner .title h1 {
|
|
margin-top: 90px;
|
|
a {
|
|
padding-top: 100px;
|
|
height: 164px;
|
|
background-size: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
#content-top-wrapper .content-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.cell {
|
|
order: 1;
|
|
&.trackingcodeinputcell {
|
|
order: 0;
|
|
}
|
|
height: 150px;
|
|
}
|
|
.cell.grid-1-2 {
|
|
margin: 1rem auto 0 auto;
|
|
width: calc(100% - 2rem);
|
|
padding: 0;
|
|
}
|
|
.cell.trackingcodeinputcell {
|
|
height: auto;
|
|
padding: 1rem;
|
|
padding-bottom: 0;
|
|
h2 {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
form {
|
|
margin: 0 -1rem; // cancel padding
|
|
width: calc(100% + 2rem);
|
|
input {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
.cell.linkcell {
|
|
margin: 1rem 0 1rem 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
#columns {
|
|
padding-left: 1rem;
|
|
.grid-1-3 {
|
|
width: calc(50% - 1rem);
|
|
}
|
|
}
|
|
#sidebar {
|
|
display: none;
|
|
}
|
|
div#page div#main-content-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
form ul.errorlist {
|
|
margin-top: 0;
|
|
color: #e95f5c;
|
|
background: $notification_error_color;
|
|
padding: 1em;
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
body.anonymous-user, body.focus-in {
|
|
#pwa-navigation {
|
|
display: none;
|
|
}
|
|
}
|
|
body.anonymous-user {
|
|
&.has-pwa-navigation footer {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|