719 lines
12 KiB
SCSS
719 lines
12 KiB
SCSS
$homepage-header-links:
|
|
"signalements" "picto-signalements" $light-green,
|
|
"demarches" "picto-demarches" $cyan,
|
|
"connexion" "picto-connexion" $orange,
|
|
;
|
|
|
|
$cells-backgrounds:
|
|
"dark-blue" $dark-blue,
|
|
"dark-gray" $dark-gray,
|
|
"red" $red,
|
|
"violet" $violet,
|
|
"cyan" $cyan,
|
|
"orange" $orange,
|
|
"light-green" $light-green,
|
|
"green" $green,
|
|
"purple" $purple,
|
|
"blue" $blue
|
|
;
|
|
|
|
html {
|
|
@media ($max-mobile-viewport) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
%title {
|
|
@media ($max-mobile-viewport) {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Typo
|
|
//
|
|
|
|
h1 {
|
|
font-size: $fz-h1;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
h2 {
|
|
font-size: $fz-h2;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
main {
|
|
background: url('img/grille_points_bleu.svg') left top no-repeat,
|
|
url('img/grille_points_orange.svg') right bottom no-repeat;
|
|
}
|
|
|
|
%button {
|
|
@extend %button;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
}
|
|
|
|
%custom-radio-checkbox-widget {
|
|
@extend %custom-radio-checkbox-widget;
|
|
input {
|
|
&[type="checkbox"] + span::before {
|
|
border-radius: 3px;
|
|
}
|
|
+ span {
|
|
&::before {
|
|
top: 0.22rem;
|
|
height: 0.9rem;
|
|
width: 0.88rem;
|
|
border: 2px solid $widget-custom-radio-checkbox-border-color;
|
|
}
|
|
&::after {
|
|
height: calc(0.9rem - 4px);
|
|
width: calc(0.88rem - 4px);
|
|
top: calc(0.22rem + 4px);
|
|
left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
span.select2 {
|
|
color: $widget-color;
|
|
border-radius: $widget-border-radius;
|
|
border: $widget-border;
|
|
box-shadow: $widget-box-shadow;
|
|
&:focus {
|
|
outline: $widget-focus-outline;
|
|
}
|
|
&-search {
|
|
padding-top: 0;
|
|
input {
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rounded-corners {
|
|
border-radius: 1.5em;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#logo.has-logo {
|
|
height: 120px;
|
|
display: flex;
|
|
@media ($max-mobile-viewport) {
|
|
padding-left: 0.5em;
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.lso-page-header {
|
|
height: 510px;
|
|
background: url('/assets/banner:background') center no-repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2em;
|
|
&--default {
|
|
width: $width;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
text-align: center;
|
|
h1 {
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
bottom: -0.25em;
|
|
left: calc(50% - 0.75em);
|
|
content:"";
|
|
width: 1.5em;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
display: block;
|
|
border-radius: 1em 0 1em 0;
|
|
}
|
|
}
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
.lso-home--wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top: -460px;
|
|
background: url('img/logo.svg') top right no-repeat;
|
|
padding-top: 280px;
|
|
margin-bottom: 2em;
|
|
@media ($max-mobile-viewport) {
|
|
background: url('img/logo.svg') top center no-repeat;
|
|
background-size: auto 230px;
|
|
padding-top: 230px;
|
|
margin-top: -350px;
|
|
}
|
|
@media (max-width: 460px) {
|
|
background-size: contain;
|
|
}
|
|
div.linkcell {
|
|
padding: 0.5em;
|
|
li {
|
|
width: 228px;
|
|
height: 228px;
|
|
border-radius: 50%;
|
|
margin: 0 0.75em;
|
|
display: flex;
|
|
justify-content: center;
|
|
@media ($max-mobile-viewport) {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
}
|
|
a {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
@each $name, $img, $background in $homepage-header-links {
|
|
&.lien-#{$name} li {
|
|
background: #{$background};
|
|
border: 3px solid #{$background};
|
|
a {
|
|
background: url('img/#{$img}.svg') center 25% no-repeat;
|
|
padding-top: 3em;
|
|
@media ($max-mobile-viewport) {
|
|
background-size: auto 3em;
|
|
}
|
|
}
|
|
&:hover {
|
|
background: #fff;
|
|
a {
|
|
color: #{$background};
|
|
background: url('img/#{$img}-hover.svg') center 25% no-repeat;
|
|
@media ($max-mobile-viewport) {
|
|
background-size: auto 3em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h1.has-logo a {
|
|
width: 260px;
|
|
}
|
|
|
|
#top {
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Nav
|
|
//
|
|
div.gru-nav {
|
|
ul li {
|
|
@media (max-width: $nav-mobile-limit) {
|
|
text-align: center;
|
|
}
|
|
margin: 0 0.5em;
|
|
&:last-child a {
|
|
@extend %button;
|
|
margin: 0;
|
|
}
|
|
a.registration {
|
|
&:hover::after {
|
|
background: url('img/fleche-hover.svg') center no-repeat;
|
|
}
|
|
&::after {
|
|
margin-left: 0.4em;
|
|
content: '';
|
|
background: url('img/fleche.svg') center no-repeat;
|
|
width: 1em;
|
|
height: 0.8em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
@media (max-width: $nav-mobile-limit) {
|
|
a.account-link {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.gru-nav-button {
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 3em;
|
|
top: 2em;
|
|
@media (max-width: $nav-mobile-limit) {
|
|
+ ul {
|
|
margin-top: 2em;
|
|
padding-bottom: 1em;
|
|
a {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
.icon-bar {
|
|
width: 50%;
|
|
left: 25%;
|
|
&-1 {
|
|
top: 30%;
|
|
}
|
|
&-2 {
|
|
top: 50%;
|
|
}
|
|
&-3 {
|
|
top: 70%;
|
|
}
|
|
}
|
|
&.toggled {
|
|
background: transparent;
|
|
+ ul {
|
|
margin-top: 4em;
|
|
}
|
|
.icon-bar {
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pwa-navigation {
|
|
padding: 1em 0;
|
|
div > ul li a {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
background-position: 50% 5px;
|
|
background-size: auto calc( #{$nav-mobile-bottom-bar-height / 2} - 5px );
|
|
span {
|
|
height: auto;
|
|
width: 100%;
|
|
font-size: $fz-small;
|
|
}
|
|
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
left: 0;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
position: static;
|
|
background-color: white;
|
|
div > ul li {
|
|
a, &.selected a, &.selected:hover a, &:hover a {
|
|
color: $cyan;
|
|
background-color: transparent
|
|
}
|
|
a {
|
|
color: $violet;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Content
|
|
//
|
|
|
|
.gru-content {
|
|
div.wcsformsofcategorycell {
|
|
h2:first-child {
|
|
background: $orange;
|
|
color: #fff;
|
|
border-radius: 0.5em;
|
|
text-transform: uppercase;
|
|
}
|
|
li {
|
|
box-shadow: $widget-box-shadow;
|
|
border-radius: 1em;
|
|
margin: 1em 0;
|
|
a {
|
|
color: $orange;
|
|
font-size: 1.5em;
|
|
padding-left: 2.5em;
|
|
justify-content: space-between;
|
|
&::after {
|
|
content: '\f0a9'; /* fa-arrow-right */
|
|
font-family: FontAwesome;
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.trackingcodeinputcell {
|
|
color: #fff;
|
|
background: $cyan;
|
|
padding: 1.5em;
|
|
@extend .rounded-corners;
|
|
input {
|
|
@extend .rounded-corners;
|
|
color: #fff;
|
|
background: transparent;
|
|
border: 2px solid #fff;
|
|
margin: 0 1em;
|
|
box-shadow: none;
|
|
}
|
|
button {
|
|
background-image: url('img/fleche.svg');
|
|
background-position: 95% 50%;
|
|
background-repeat: no-repeat;
|
|
padding-right: 1.75em;
|
|
&:not(:hover) {
|
|
background-color: #{$button-background};
|
|
color: #{$button-color};
|
|
}
|
|
&:hover {
|
|
background-image: url('img/fleche-hover.svg');
|
|
}
|
|
}
|
|
}
|
|
div.cell--title {
|
|
font-size: 1.4em;
|
|
background: url('img/suivez-votre-demarche.svg') center left no-repeat;
|
|
padding-left: 3em;
|
|
margin: 0.25em 0;
|
|
div {
|
|
line-height: 1em;
|
|
&:first-child {
|
|
font-size: 2.4em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
div:first-child {
|
|
font-size: 2em;
|
|
}
|
|
padding-left: 3.5em;
|
|
}
|
|
}
|
|
div.wcs-tracking-code-input {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
@media ($max-mobile-viewport) {
|
|
justify-content: center;
|
|
form * {
|
|
margin: 0.5em 0;
|
|
}
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
form * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
div.linkcell, div.linklistcell {
|
|
ul li a {
|
|
font-size: 1.3em;
|
|
&:hover {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
&.has-asset-picture {
|
|
h2, a {
|
|
display: flex;
|
|
align-items: center;
|
|
div, span {
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
background-size: cover;
|
|
background-position: center;
|
|
margin-right: 0.5em;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.linklistcell {
|
|
border-radius: 1.5em;
|
|
background: $primary-color;
|
|
h2:first-child {
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
line-height: 1em;
|
|
}
|
|
ul {
|
|
padding-bottom: 0.5em;
|
|
&::before {
|
|
content: '';
|
|
height: 2px;
|
|
display: block;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
margin: 0 1.5em;
|
|
}
|
|
}
|
|
li a {
|
|
color: #fff;
|
|
background: url('img/fleche-d.svg') center left no-repeat;
|
|
margin-left: 1.5em;
|
|
padding-left: 1.5em;
|
|
&:hover {
|
|
color: #fff;
|
|
background: transparent url('img/fleche-d-bold.svg') center left no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
border-radius: 1em;
|
|
}
|
|
|
|
div#columns > div.trackingcodeinputcell:first-child {
|
|
margin-top: -6em;
|
|
}
|
|
|
|
div.cell.foldable {
|
|
> div > h2:first-child {
|
|
padding-right: 1.75em;
|
|
&::after {
|
|
top: calc(50% - 0.5em);
|
|
right: 0.5em;
|
|
content: '';
|
|
width: 1em;
|
|
height: 1em;
|
|
display: block;
|
|
background-image: url('img/fleche-haut.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
&.folded > div > h2:first-child::after {
|
|
content: '';
|
|
background-image: url('img/fleche-bas.svg');
|
|
}
|
|
}
|
|
|
|
@each $name, $background in $cells-backgrounds {
|
|
div.cell.#{$name}-bg {
|
|
background-color: #{$background};
|
|
color: #fff;
|
|
div.links-list ul > li > a {
|
|
color: #fff;
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: $orange;
|
|
}
|
|
|
|
@if ($field-on-error-style == custom) {
|
|
div.widget-with-error {
|
|
label {
|
|
color: $red;
|
|
}
|
|
div.content {
|
|
input, select, textarea {
|
|
border: 1px solid $red;
|
|
background: rgba(255, 0, 0, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.submit-button button, .gru-content button.submit-button {
|
|
background: #ffff;
|
|
color: $orange;
|
|
}
|
|
|
|
.form-content--title {
|
|
background: $orange;
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
div#side {
|
|
background: $cyan;
|
|
display: flex;
|
|
border-radius: 10px;
|
|
padding: 0.5em 2em;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
div#tracking-code {
|
|
div.tracking-code-part {
|
|
background-image: url('img/suivez-votre-demarche.svg');
|
|
background-position: center left;
|
|
background-repeat: no-repeat;
|
|
padding-left: 4.5em;
|
|
}
|
|
&.has-discard-button {
|
|
form {
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
h3, a {
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
display: inline-block;
|
|
}
|
|
a {
|
|
@extend .rounded-corners;
|
|
border: 1px solid #fff;
|
|
@media (min-width: $very-small-limit + 1) {
|
|
margin-left: 2em;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#tracking-code, .wcs-steps {
|
|
margin: 0;
|
|
}
|
|
|
|
.form-content--sidebox div#tracking-code a {
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
// Steps
|
|
.wcs-steps h2 {
|
|
@extend h3;
|
|
font-weight: bold;
|
|
display: block;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
color: #fff;
|
|
line-height: 1.2em;
|
|
@media ($max-mobile-viewport) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.wcs-step {
|
|
margin: 0;
|
|
@media ($max-mobile-viewport) {
|
|
justify-content: center;
|
|
}
|
|
&--marker {
|
|
width: auto;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
.wcs-steps {
|
|
@media (min-width: $very-small-limit + 1) {
|
|
max-width: 40%;
|
|
}
|
|
&--list {
|
|
margin-top: -1em;
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
@media ($max-mobile-viewport) {
|
|
justify-content: center;
|
|
}
|
|
a {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
|
|
#footer-wrapper {
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.footer-logo {
|
|
text-align: center;
|
|
img {
|
|
width: 250px;
|
|
height: auto;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
float: left;
|
|
height: 100%;
|
|
margin-right: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.footer-post {
|
|
background: #022d55;
|
|
text-align: center;
|
|
color: #fff;
|
|
padding: 0.5em 0;
|
|
font-size: 0.8em;
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// Misc
|
|
|
|
a.orange-link,
|
|
div.linkcell.orange-link div.links-list ul > li > a {
|
|
color: $orange;
|
|
text-decoration: underline;
|
|
&:hover {
|
|
color: $dark-blue;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.cyan-button {
|
|
@extend %button;
|
|
background: $cyan;
|
|
border: 0;
|
|
&:hover {
|
|
color: $cyan;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
a.cyan-button,
|
|
div.linkcell.cyan-button div.links-list ul > li > a {
|
|
@extend .cyan-button;
|
|
}
|
|
|
|
@each $name in (stores, portail-cartographique) {
|
|
div##{$name} {
|
|
color: #fff;
|
|
background: url('/assets/#{$name}:background') center no-repeat;
|
|
h2 {
|
|
margin: 0;
|
|
line-height: 1em;
|
|
}
|
|
a {
|
|
@extend .cyan-button;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|