1051 lines
17 KiB
SCSS
1051 lines
17 KiB
SCSS
@mixin roundedCell {
|
|
border-radius: $custom-border-radius;
|
|
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);
|
|
overflow: hidden;
|
|
|
|
h2 {
|
|
display: block !important;
|
|
text-align: center;
|
|
background: none;
|
|
color: black;
|
|
padding-top: 0.7em;
|
|
padding-bottom: 0.7em;
|
|
|
|
+ div {
|
|
padding: 1rem;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// add black triangle on bottom of element
|
|
// $position: left | right;
|
|
@mixin triangle($position: right, $width: 1rem 0.7rem) {
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border: solid transparent;
|
|
border-width: $width;
|
|
border-top-color: $font-color;
|
|
position: absolute;
|
|
top: 100%;
|
|
z-index: 1;
|
|
@if $position == right {
|
|
right: 1rem;
|
|
}
|
|
@if $position == left {
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin underlined-with-triangle {
|
|
@include triangle(left, 0.8rem 0.6rem);
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: $font-color;
|
|
}
|
|
}
|
|
|
|
@mixin image-to-white {
|
|
filter:
|
|
invert(100%)
|
|
grayscale(100%)
|
|
contrast(60%)
|
|
brightness(200%)
|
|
drop-shadow(0 0 3px #000);
|
|
}
|
|
|
|
@mixin white-button {
|
|
color: $font-color;
|
|
background-color: white;
|
|
|
|
&:hover {
|
|
color: $primary-color;
|
|
border-color: currentColor;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
%button {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
%cancel-button {
|
|
@extend %button;
|
|
@include white-button;
|
|
}
|
|
|
|
.white-button {
|
|
@extend %cancel-button;
|
|
}
|
|
|
|
|
|
// typo
|
|
|
|
html, body {
|
|
@media ($min-desktop-viewport) {
|
|
font-size: 110%;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: $fz-h1;
|
|
font-family: $ff-title;
|
|
text-transform: uppercase;
|
|
}
|
|
h2 {
|
|
font-size: $fz-h2;
|
|
font-family: $ff-title;
|
|
text-transform: uppercase;
|
|
}
|
|
h3 {
|
|
font-size: $fz-h3;
|
|
font-family: $ff-text;
|
|
text-transform: uppercase;
|
|
}
|
|
h4 {
|
|
font-size: $fz-h4;
|
|
font-family: $ff-text;
|
|
}
|
|
h5 {
|
|
font-size: $fz-h5;
|
|
font-family: $ff-title;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// forms
|
|
input[readonly], select[readonly], textarea[readonly] {
|
|
border: $widget-border;
|
|
background: none;
|
|
border-radius: $widget-border-radius;
|
|
}
|
|
|
|
// utils
|
|
.site-wrapper {
|
|
width: $width;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// header
|
|
#top {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#logo {
|
|
flex-grow: 1;
|
|
padding-left: 0;
|
|
&.has-logo a {
|
|
height: $logo-size;
|
|
width: $logo-size;
|
|
margin-right: .5rem;
|
|
margin-left: .5rem;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
// toplinks
|
|
#toplinks {
|
|
// reset
|
|
position: relative;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
|
|
text-transform: uppercase;
|
|
line-height: 1.5;
|
|
font-size: $fz-small;
|
|
margin-right: $nav-menu-side * 2;
|
|
word-spacing: 0.7em;
|
|
@media (max-width: $very-small-limit + 1) {
|
|
margin-right: $nav-menu-side * 1.25;
|
|
}
|
|
a {
|
|
color: $font-color;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
span.connected-user {
|
|
padding-right: 0;
|
|
}
|
|
// user icon
|
|
min-height: $fz-h3;
|
|
padding-right: $fz-h3 + 0.7;
|
|
background: url(icons/usager.svg) no-repeat right center;
|
|
background-size: auto $fz-h3;
|
|
|
|
// label align
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// nav
|
|
div.gru-nav {
|
|
$btn-bottom-space: ( $logo-size - $nav-menu-side ) / 2 ;
|
|
$nav-width: 25rem;
|
|
|
|
position: relative;
|
|
z-index: 101;
|
|
|
|
@media (min-width: $very-small-limit + 1) {
|
|
transform: translateX(-1rem);
|
|
}
|
|
|
|
&-wrapper {
|
|
margin-top: 0;
|
|
}
|
|
.gru-nav-button {
|
|
margin-left: 0;
|
|
position: absolute;
|
|
top: calc((#{$nav-menu-side} + #{$btn-bottom-space}) * -1) ;
|
|
right: 0;
|
|
|
|
+ ul {
|
|
display: none;
|
|
}
|
|
&.toggled + ul {
|
|
display: block;
|
|
}
|
|
|
|
+ ul {
|
|
margin: 0;
|
|
font-size: $fz-small;
|
|
text-align: center;
|
|
padding-bottom: 1px;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: $nav-width;
|
|
max-width: 100%;
|
|
|
|
a {
|
|
font-weight: 400;
|
|
position: relative;
|
|
// separarator line
|
|
&::after {
|
|
content: "";
|
|
width: calc(100% - 4em);
|
|
height: 1px;
|
|
background-color: $nav-active-color;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
}
|
|
a:hover, li.selected > a {
|
|
&::after {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
// background shadow in first item
|
|
> li:first-child a {
|
|
background-image: $top-gradient;
|
|
}
|
|
|
|
ul {
|
|
text-align: center;
|
|
li a {
|
|
padding-left: 0.75em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// PWA nav
|
|
@media ($min-desktop-viewport) {
|
|
.pwa-navigation {
|
|
display: none;
|
|
}
|
|
.has-pwa-navigation footer {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.pwa-navigation {
|
|
text-transform: uppercase;
|
|
box-shadow: 0 0 2px 1px white;
|
|
|
|
div > ul li {
|
|
a {
|
|
background-size: 28px auto;
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
&.selected a {
|
|
filter: brightness(200%);
|
|
}
|
|
&:hover {
|
|
background-color: $primary-color;
|
|
}
|
|
&:not(.selected) a, &:hover a {
|
|
filter: grayscale(100%) brightness(500%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Default bandeau
|
|
.default-bandeau {
|
|
background: var(--page-picture) no-repeat center;
|
|
background-size: cover;
|
|
background-color: $gray-light;
|
|
height: 350px;
|
|
display: flex;
|
|
|
|
&--img-wrapper {
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
&--img {
|
|
@include image-to-white;
|
|
height: 180px;
|
|
width: auto;
|
|
margin: auto;
|
|
}
|
|
|
|
// Don't display ".default-bandeau" if placeholder "bandeau" as one or more cell
|
|
.top-bandeau > * + & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Content layout
|
|
.gru-content {
|
|
flex-wrap: wrap;
|
|
|
|
#sidebar {
|
|
margin: 0;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
@media ($max-mobile-viewport) {
|
|
order: -1;
|
|
background-color: $font-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Gutter columns
|
|
#columns-wrapper {
|
|
@media ($max-mobile-viewport) {
|
|
padding: 0;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
#sidebar + & {
|
|
flex-basis: 50%;
|
|
}
|
|
}
|
|
}
|
|
div#services > ul > li,
|
|
.column div.a2-block,
|
|
.gru-content div.cell,
|
|
.block {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.top-column div.cell {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
// Page header
|
|
.page-header {
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
flex: 1 1 100%;
|
|
background-color: $font-color;
|
|
color: white;
|
|
margin: 0;
|
|
text-align: center;
|
|
display: flex;
|
|
|
|
@include triangle;
|
|
|
|
// cells & cells content styles
|
|
& *:not(&--logo-wrapper):not(&--logo) {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background-color: transparent !important;
|
|
color: inherit !important;
|
|
text-align: inherit !important;
|
|
flex: 1 1 auto;
|
|
}
|
|
// cells styles
|
|
& > *:not(&--logo-wrapper):not(&--logo) {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
|
|
body[class*="-sidebar"] &,
|
|
body.page-template-homepage & {
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: $sidebar-width;
|
|
}
|
|
}
|
|
}
|
|
// if logo
|
|
.page-header-with-logo {
|
|
@media ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
}
|
|
body[class*="-sidebar"] & {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.page-header--logo-wrapper {
|
|
background-color: $gray-light;
|
|
background-image: $top-gradient;
|
|
flex: 0 0 $sidebar-width;
|
|
display: flex;
|
|
@media ($max-mobile-viewport) {
|
|
flex-basis: 6rem;
|
|
}
|
|
}
|
|
.page-header--logo {
|
|
margin: auto;
|
|
height: 5rem;
|
|
@media ($min-desktop-viewport) {
|
|
height: 6rem;
|
|
width: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Links-list
|
|
%cell-links-list {
|
|
& > li {
|
|
font-weight: bold;
|
|
color: $gray;
|
|
|
|
&:hover {
|
|
color: black;
|
|
}
|
|
|
|
&:not(.add-more-items) {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 3rem;
|
|
font-size: $fz-small;
|
|
text-transform: uppercase;
|
|
background-color: $gray-light;
|
|
overflow: hidden;
|
|
&::before {
|
|
content: ">";
|
|
font-size: $fz-h3;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.33em;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
position: static;
|
|
padding: .7rem;
|
|
font-family: $ff-title;
|
|
flex-grow: 1;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
div.description {
|
|
display: none;
|
|
}
|
|
|
|
&.required-authentication a::after {
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1rem;
|
|
right: auto;
|
|
margin: auto;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
background: url(icons/cadenas.svg) center;
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
// Gray logo keyword options
|
|
@each $name, $file in $logos-gris {
|
|
&[class*="keyword-"][class*="-#{$name}"]{
|
|
&::after {
|
|
content: "";
|
|
background: url(/assets/logo:gris:#{$file}) no-repeat right center;
|
|
background-size: contain;
|
|
height: 3rem;
|
|
width: 7rem;
|
|
margin-right: 10px;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cells
|
|
.gru-content div.cell {
|
|
// Cells titles
|
|
h2:first-child {
|
|
background-color: $font-color;
|
|
color: white;
|
|
padding-bottom: 1.1em;
|
|
padding-top: 1.1em;
|
|
line-height: 1.1;
|
|
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
}
|
|
|
|
&.foldable > div > h2:first-child {
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0.15em;
|
|
right: auto;
|
|
left: auto;
|
|
transform: scaleY(1.3);
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
&.link-list-cell h2 + div {
|
|
padding: 0;
|
|
}
|
|
// Cell title icon option
|
|
&[class*=" icon-"] {
|
|
$title-height: 6.3rem;
|
|
$gradient-width: 2rem;
|
|
|
|
h2:first-child {
|
|
padding-left: $title-height + $gradient-width;
|
|
min-height: $title-height;
|
|
|
|
// Add icon
|
|
&::before {
|
|
content:"";
|
|
display: block;
|
|
box-sizing: content-box;
|
|
// icon position
|
|
background-size: 90%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: $title-height;
|
|
height: 100%;
|
|
// vertical center block
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: auto;
|
|
margin: auto;
|
|
// Add right gradient with border-image
|
|
border-right: 2rem solid;
|
|
border-image-source: linear-gradient(to right, hsla(0, 0%, 0%, 0.5) 0, transparent 100%);
|
|
border-image-repeat: stretch;
|
|
border-image-slice: 0 100% 0 0;
|
|
}
|
|
}
|
|
&.foldable > div > h2:first-child {
|
|
&::after {
|
|
left: $title-height + $gradient-width;
|
|
}
|
|
}
|
|
}
|
|
@each $name, $file in $icons {
|
|
&.icon-#{$name} {
|
|
h2:first-child {
|
|
&::before {
|
|
background-image: url(icons/#{$file});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// cell color option
|
|
@each $name, $hexa in $colors {
|
|
&.color-#{$name} {
|
|
h2:first-child {
|
|
background-color: $hexa;
|
|
}
|
|
|
|
li:not(.add-more-items) {
|
|
&::before {
|
|
color: $hexa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// cell description / intro
|
|
.description, .intro {
|
|
font-size: $fz-small;
|
|
}
|
|
|
|
// WCS FORM CELL SIGNALISATION
|
|
&.wcs-form-cell.signalement {
|
|
a {
|
|
@extend %title;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
background-color: $red-orange;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
// add megaphone icon
|
|
$title-height: 6rem;
|
|
&:before {
|
|
content: "";
|
|
flex-shrink: 0;
|
|
background-size: auto 100%;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
width: $title-height;
|
|
height: $title-height;
|
|
background-image: url(icons/megaphone.svg);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: darken($red-orange, 10%);
|
|
}
|
|
|
|
}
|
|
.description {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Sidebar specifity
|
|
.page-header:not(:empty):not(.page-header-with-logo) + #sidebar {
|
|
@media ($min-desktop-viewport) {
|
|
transform: translateY(-4.5rem);
|
|
}
|
|
}
|
|
// hide SIdebar on mobile && not home page
|
|
body:not(.page-template-homepage) #sidebar {
|
|
@media ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.gru-content #sidebar {
|
|
|
|
padding-top: 1.5rem;
|
|
|
|
div.cell {
|
|
@include roundedCell;
|
|
margin-right: 0;
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
max-width: 25rem;
|
|
text-align: center;
|
|
|
|
p {
|
|
font-size: $fz-small;
|
|
margin: 0.66em 0;
|
|
}
|
|
|
|
// inline form
|
|
form {
|
|
position: relative;
|
|
display: flex;
|
|
border: 1px solid;
|
|
border-radius: $custom-border-radius;
|
|
padding: 0;
|
|
|
|
input, select {
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
flex: 1 1 auto;
|
|
width: 50%;
|
|
}
|
|
button {
|
|
border-radius: $custom-border-radius;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: .33em;
|
|
}
|
|
.errornotice {
|
|
font-size: $fz-small;
|
|
text-align: left;
|
|
position: absolute;
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
//
|
|
div.tracking-code-input-cell {
|
|
button {
|
|
transform: translateX(1px);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// search cell
|
|
div.search-cell {
|
|
button {
|
|
order: -1;
|
|
@include white-button;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
transform: translateX(-1px);
|
|
// hide label
|
|
.submit-label {
|
|
@include sr-only();
|
|
}
|
|
|
|
&::after {
|
|
content: "\f002";
|
|
font-family: FontAwesome, sans-serif;
|
|
}
|
|
}
|
|
}
|
|
.link-cell.pk-button {
|
|
ul > li {
|
|
padding: 0;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
> a {
|
|
@media ($max-mobile-viewport) {
|
|
@include white-button;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// carrousel
|
|
div.carrousel-content {
|
|
input + div {
|
|
div.carrousel-item {
|
|
font-size: 1rem;
|
|
padding: $carrousel-navigation-bullet-size + 20;
|
|
div.carrousel-item-content {
|
|
line-height: normal;
|
|
a {
|
|
padding: .33em;
|
|
background-color: #222;
|
|
display: block;
|
|
border-radius: .5em;
|
|
|
|
&:hover {
|
|
background-color: black;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
strong {
|
|
text-transform: uppercase;
|
|
font-size: $fz-h2;
|
|
}
|
|
}
|
|
// no image mask
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.carrousel-nav {
|
|
text-align: left;
|
|
label {
|
|
box-shadow: 0 0 1px 1px white;
|
|
background-color: hsla(0, 0%, 100%, 0.5);
|
|
margin: 0 0 0 $carrousel-navigation-bullet-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Retour Icitoyen
|
|
#sidebar .retour-icitoyen {
|
|
&--title {
|
|
margin: 0;
|
|
padding: 0 !important;
|
|
}
|
|
&--content {
|
|
padding: 1rem;
|
|
}
|
|
&--back-btn {
|
|
font-size: $fz-small;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// cell Choix commune
|
|
// use select2 autocomplète
|
|
#form-cell-choix-commune {
|
|
span.select2-container {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
div.select2-container, span.select2-container {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// WCS
|
|
.form-content--title {
|
|
@extend h1;
|
|
}
|
|
|
|
.form-content--sidebox {
|
|
@media ($max-mobile-viewport) {
|
|
margin-top: 0;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
width: $sidebar-width;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
#tracking-code {
|
|
text-align: center;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid $font-color;
|
|
.tracking-code-part {
|
|
h3 {
|
|
padding-left: 0;
|
|
}
|
|
a:hover {
|
|
color: $primary-color;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
h3, a {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
form {
|
|
@media ($max-mobile-viewport) {
|
|
margin-top: 0;
|
|
}
|
|
button {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
width: calc(100% - #{$sidebar-width});
|
|
}
|
|
}
|
|
div#rub_service {
|
|
> h2:first-child {
|
|
display: none;
|
|
}
|
|
.quixote {
|
|
h3 {
|
|
font-size: $fz-h4;
|
|
@include underlined-with-triangle;
|
|
}
|
|
.submit-button button {
|
|
&::after {
|
|
font-family: FontAwesome;
|
|
content: "\0025ba";
|
|
vertical-align: .1em;
|
|
padding-left: .66em;
|
|
}
|
|
}
|
|
.previous-button button {
|
|
&::before {
|
|
font-family: FontAwesome;
|
|
content:"\0025c4";
|
|
vertical-align: .1em;
|
|
padding-right: .66em;
|
|
}
|
|
}
|
|
}
|
|
.section.foldable {
|
|
> h2 {
|
|
font-size: $fz-h4;
|
|
border-bottom: 2px solid $font-color;
|
|
|
|
&:hover {
|
|
&::after {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
.dataview {
|
|
h3 {
|
|
font-size: $fz-h6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// steps
|
|
.wcs-step {
|
|
padding: 0;
|
|
&--marker {
|
|
@include desktop-vertical-steps() {
|
|
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
|
align-items: center;
|
|
flex: 0 0 #{$wcs-step-marker-size - 0.5};
|
|
&-nb {
|
|
margin: .15em;
|
|
}
|
|
}
|
|
}
|
|
&--label {
|
|
letter-spacing: 0;
|
|
|
|
@include desktop-vertical-steps() {
|
|
font-size: .6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Remove cancel buttons on login page
|
|
#login-page .cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
// Footer
|
|
#footer {
|
|
$block-border: 1px solid fade-out($font-color, 0.3);
|
|
|
|
a {
|
|
color: $red-light;
|
|
}
|
|
|
|
.menucell {
|
|
clear: both;
|
|
border-top: $block-border;
|
|
padding-top: .7rem;
|
|
|
|
li {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
color: $footer-color;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
a {
|
|
// background-color: transparent;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
color: white;
|
|
&:hover {
|
|
color: $red-light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Text-cell liste of logos
|
|
.text-cell.footer-logos {
|
|
background-color: $gray-light;
|
|
@media ($min-desktop-viewport) {
|
|
width: 100vw;
|
|
margin-left: calc(-50vw + 50%);
|
|
}
|
|
> div {
|
|
margin: 0 auto;
|
|
max-width: $width;
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: .5rem 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
& + ul {
|
|
border-top: $block-border;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
li{
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
width: 6.5rem;
|
|
height: 5rem;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
box-shadow: inset 0 0 6px $gray-light;
|
|
|
|
&:hover {
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#frontend-registration-fc.a2-block {
|
|
> h2 {
|
|
display: none;
|
|
}
|
|
> div {
|
|
padding: 0;
|
|
}
|
|
}
|