1144 lines
20 KiB
SCSS
1144 lines
20 KiB
SCSS
$header-height-desktop: 6.25rem;
|
|
$header-height-mobile: 5rem;
|
|
$nav-btn-width-desktop: calc( 3em + #{$nav-menu-side});
|
|
$nav-btn-width-mobile: $nav-menu-side;
|
|
|
|
// icon for url() function
|
|
// $property: "content" or "background-image";
|
|
// $color: hexa with no #
|
|
// $strokWidth: int, no unit;
|
|
@mixin arrowIcon($property: content, $color: 'fff', $strokeWidth: 3) {
|
|
#{$property}: url("data:image/svg+xml,%3Csvg viewBox='0 0 32.5 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m20 2 10 9-10 9m-20-9h30' fill='none' stroke='%23#{$color}' stroke-linejoin='round' stroke-width='#{$strokeWidth}'/%3E%3C/svg%3E")
|
|
}
|
|
|
|
//
|
|
// GENERIC
|
|
//
|
|
|
|
// Typo
|
|
html {
|
|
@media ($max-mobile-viewport) {
|
|
font-size: $fz-small;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: $fz-h1;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $fz-h3;
|
|
font-weight: 900;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $fz-h4;
|
|
font-weight: bold;
|
|
}
|
|
h4 {
|
|
font-size: $fz-h5;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Utils
|
|
.gru-content div.cell.pk-transparent {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
// Form
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
input, textarea, select {
|
|
font-weight: 800;
|
|
font-size: $fz-h6;
|
|
}
|
|
|
|
//
|
|
// COMPONENTS
|
|
//
|
|
|
|
// button
|
|
%button {
|
|
text-transform: uppercase;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
%cancel-button {
|
|
background-color: $gray-light;
|
|
color: $font-color;
|
|
&:hover {
|
|
background-color: $gray-light;
|
|
color: $font-color;
|
|
}
|
|
}
|
|
|
|
// Notifs
|
|
#messages li.error, .errornotice,
|
|
#messages li.warning, .warningnotice,
|
|
#messages li.success, .successnotice,
|
|
#messages li.info, .infonotice {
|
|
color: white;
|
|
|
|
a {
|
|
color: inherit;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid hsla(0, 0%, 100%, .4);
|
|
&:hover {
|
|
text-decoration: none;
|
|
border-bottom: 2px solid hsla(0, 0%, 100%, .8);
|
|
}
|
|
}
|
|
}
|
|
|
|
div.timetable-widget {
|
|
|
|
div.head {
|
|
border-bottom: 2px solid $primary-color;
|
|
font-weight: 900;
|
|
}
|
|
button.next,
|
|
button.prev {
|
|
height: 2.8em;
|
|
flex: 0 0 2.8em;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 3px $button-background;
|
|
// arrow: use background image instead UTF8 charater
|
|
text-indent: -1000em;
|
|
background-repeat: no-repeat;
|
|
background-size: 1em;
|
|
background-position: center;
|
|
@include arrowIcon($property: "background-image");
|
|
&:hover, &:focus {
|
|
box-shadow: 0 0 0 3px $primary-color, 0px 0px 10px #777 !important;
|
|
}
|
|
|
|
&:disabled {
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 3px grayscale($button-background);
|
|
}
|
|
|
|
&.prev {
|
|
transform: rotate(0.5turn);
|
|
}
|
|
}
|
|
|
|
div span.timetable-cell {
|
|
border-radius: 1em;
|
|
margin: 0.7em;
|
|
border: 1px solid transparent;
|
|
|
|
&.disabled {
|
|
background-color: $gray-light;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
span.timetable-cell.selectable {
|
|
background-color: $green;
|
|
&:hover {
|
|
box-shadow: none;
|
|
background-color: $green;
|
|
color: black;
|
|
border: 1px solid;
|
|
}
|
|
&.on {
|
|
background: $primary-color;
|
|
color: $button-color;
|
|
}
|
|
}
|
|
|
|
&.mobile {
|
|
> div {
|
|
width: 100%;
|
|
}
|
|
div span.timetable-cell {
|
|
display: inline-block;
|
|
padding: 0.5em;
|
|
margin: 0.5em;
|
|
}
|
|
button {
|
|
&.prev, &.next {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// back-top
|
|
.back-top--link {
|
|
&::before {
|
|
box-sizing: content-box;
|
|
border-radius: 50%;
|
|
border: 2px solid;
|
|
width: 1em;
|
|
height: 1em;
|
|
line-height: 1em;
|
|
padding: 0.33em;
|
|
transition:
|
|
background-color 300ms,
|
|
color 300ms;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
&::before {
|
|
background-color: $link-color;
|
|
color: white;
|
|
border-color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// CELLS
|
|
//
|
|
%title {
|
|
line-height: 1.2;
|
|
}
|
|
// vertical space
|
|
.column div.a2-block,
|
|
.gru-content div.cell,
|
|
.block {
|
|
margin-bottom: $columns-gutter / 2;
|
|
}
|
|
// Add box-shadow to cells
|
|
#columns .cell {
|
|
box-shadow: 0 0 10px #ccc;
|
|
}
|
|
|
|
// Search cell
|
|
// Use search icon for search submit
|
|
.search-cell {
|
|
.submit-button {
|
|
&::before {
|
|
content: "\f002";
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
.search-cell--btn-label {
|
|
display: none;
|
|
}
|
|
}
|
|
// Carrousel
|
|
.carrousel div.carrousel-content {
|
|
input + div div.carrousel-item {
|
|
padding: $theme-gutter*3 $theme-gutter-mobile*2 $theme-gutter*2;
|
|
@media ($min-desktop-viewport) {
|
|
padding: $theme-page-padding;
|
|
}
|
|
}
|
|
.carrousel-item-title {
|
|
@extend h1;
|
|
@media (max-width: $very-small-limit) {
|
|
font-size: $fz-h4;
|
|
}
|
|
}
|
|
div.carrousel-nav {
|
|
top: $theme-gutter-mobile*3;
|
|
left: $theme-gutter-mobile*2;
|
|
width: auto;
|
|
@media ($min-desktop-viewport) {
|
|
left: $theme-page-padding;
|
|
|
|
}
|
|
label:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
$btn-size: 50px;
|
|
a.carrousel-next,
|
|
a.carrousel-previous {
|
|
width: $btn-size;
|
|
height: $btn-size;
|
|
border: 5px solid;
|
|
border-radius: 50%;
|
|
background: no-repeat center center;
|
|
background-size: 1.5rem;
|
|
@include arrowIcon($property: background-image);
|
|
|
|
top: $theme-gutter-mobile*2;
|
|
right: $theme-page-padding;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
a.carrousel-previous {
|
|
left: auto;
|
|
right: calc( #{$theme-page-padding} + #{$btn-size} + #{$theme-gutter} );
|
|
transform: rotate(180deg);
|
|
// right: calc( #{$theme-page-padding} );
|
|
}
|
|
}
|
|
// tracking-code-input
|
|
.tracking-code-input-cell {
|
|
input, button {
|
|
line-height: 3rem;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
input {
|
|
margin-bottom: 1rem;
|
|
}
|
|
button {
|
|
// reset
|
|
@include vendor-prefix('appearance', 'none');
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
|
|
.btn-label {
|
|
@media ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
&:after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
border: 2px solid white;
|
|
margin-left: .66em;
|
|
background: center no-repeat;
|
|
@include arrowIcon($property: 'background-image');
|
|
background-size: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Links List
|
|
//
|
|
%cell-links-list {
|
|
padding: 0 $theme-gutter-mobile;
|
|
|
|
& > li > a {
|
|
// padding-right: 0;
|
|
padding-left: 2.33em;
|
|
position: relative;
|
|
&::before {
|
|
@include arrowIcon($color: str-slice('#{$link-color}', 2));
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 1em;
|
|
width: 1em;
|
|
transform: translateX(-1em);
|
|
transition: transform .5s;
|
|
}
|
|
&:hover::before {
|
|
transform: translateX(-0.5em);
|
|
}
|
|
|
|
}
|
|
li.required-authentication a:after {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: block;
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
//
|
|
// LAYOUT
|
|
//
|
|
div#nav-wrapper,
|
|
.top-bandeau,
|
|
.pwa-navigation--wrapper {
|
|
width: 100%;
|
|
max-width: $width;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
div#header,
|
|
div#nav-wrapper,
|
|
div#footer,
|
|
div#main-content-wrapper,
|
|
.top-bandeau,
|
|
.pwa-navigation--wrapper {
|
|
padding-left: $theme-gutter-mobile;
|
|
padding-right: $theme-gutter-mobile;
|
|
@media ($min-desktop-viewport) and (max-width: $width) {
|
|
padding-left: $theme-gutter;
|
|
padding-right: $theme-gutter;
|
|
}
|
|
@media (min-width: $width + 1) {
|
|
padding-left: $theme-page-padding;
|
|
padding-right: $theme-page-padding;
|
|
}
|
|
}
|
|
.top-bandeau {
|
|
padding-left: 0;
|
|
@media ($max-mobile-viewport){
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.pwa-navigation--wrapper {
|
|
.search-cell {
|
|
&::before {
|
|
content: " ";
|
|
display: block;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0;
|
|
background-color: $gray-light;
|
|
@media ($min-desktop-viewport) and (max-width: $width) {
|
|
width: $theme-gutter;
|
|
}
|
|
@media (min-width: $width + 1) {
|
|
width: $theme-page-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#columns-wrapper {
|
|
@media ($max-mobile-viewport) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 3cols layout
|
|
.theme-3cols-layout {
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
margin-left: -#{$columns-gutter / 2};
|
|
margin-right: -#{$columns-gutter / 2};
|
|
> .column {
|
|
flex: 1 1 0;
|
|
> .cell {
|
|
margin-left: #{$columns-gutter / 2} !important;
|
|
margin-right: #{$columns-gutter / 2} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// BLOCS
|
|
//
|
|
|
|
// Header
|
|
#top {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#logo {
|
|
padding: 0 !important;
|
|
flex: 1;
|
|
font-size: $fz-h5;
|
|
color: $primary-color;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 800;
|
|
// Logo
|
|
a {
|
|
display: block;
|
|
box-sizing: content-box;
|
|
height: $header-height-desktop;
|
|
background: url(img/vascq-logo-couleur.png) no-repeat;
|
|
background-position: left top 5px;
|
|
padding-left: 220px;
|
|
background-size: 220px auto;
|
|
margin-right: $theme-gutter-mobile;
|
|
text-indent: -10000em;
|
|
@media ($max-mobile-viewport) {
|
|
height: $header-height-mobile;
|
|
padding-left: 110px;
|
|
background-size: 110px auto;
|
|
background-position: left center;
|
|
width: 0;
|
|
}
|
|
}
|
|
// baseline
|
|
.theme-header--baseline {
|
|
padding: 0.6em 0 0.4em;
|
|
padding-left: $theme-half-gutter;
|
|
border-left: 1px solid;
|
|
|
|
@media ($max-mobile-viewport) {
|
|
@include sr-only();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Toplinks
|
|
#toplinks {
|
|
position: static;
|
|
line-height: 1.25;
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: left;
|
|
}
|
|
|
|
// Keep Space for burger btn
|
|
margin-right: $nav-btn-width-mobile;
|
|
@media ($min-desktop-viewport) {
|
|
margin-right: $nav-btn-width-desktop;
|
|
}
|
|
}
|
|
|
|
.toplinks--list {
|
|
// layout
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
margin-right: $theme-gutter;
|
|
}
|
|
// login / registration & account in 2 lines
|
|
.registration {
|
|
display: block;
|
|
}
|
|
.account-link {
|
|
display: none;
|
|
}
|
|
|
|
// add icon
|
|
.toplinks--list-item-home,
|
|
.toplinks--sublist--logged-in,
|
|
.toplinks--sublist--login {
|
|
padding-left: calc( 20px + .66em);
|
|
background: no-repeat left center;
|
|
background-size: 20px auto;
|
|
line-height: $fz-h4;
|
|
&.toplinks--sublist--login {
|
|
background-image: url(img/user.svg);
|
|
}
|
|
&.toplinks--sublist--logged-in {
|
|
background-image: url(img/deconnexion.svg);
|
|
}
|
|
&.toplinks--list-item-home {
|
|
background-image: url(img/home.svg);
|
|
// hide back home link on mobile
|
|
@media (max-width: $very-small-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toplinks--sublist {
|
|
list-style: none;
|
|
margin: 0;
|
|
&--item {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Nav (hamburger in right)
|
|
div.gru-nav {
|
|
position: relative;
|
|
z-index: 1000;
|
|
|
|
&-wrapper {
|
|
margin-top: 0;
|
|
}
|
|
.gru-nav-button {
|
|
margin-left: 0;
|
|
text-align: right;
|
|
|
|
// align button to toplinks
|
|
position: absolute;
|
|
top: calc(
|
|
( (#{$header-height-mobile} - #{$nav-menu-side})
|
|
/ 2 + #{$nav-menu-side}
|
|
) * -1
|
|
) ;
|
|
right: 0;
|
|
|
|
@media ($min-desktop-viewport) {
|
|
// align button to toplinks
|
|
top: calc(
|
|
( (#{$header-height-desktop} - #{$nav-menu-side})
|
|
/ 2 + #{$nav-menu-side}
|
|
) * -1
|
|
) ;
|
|
width: $nav-btn-width-desktop;
|
|
.icon-bar {
|
|
width: #{$nav-menu-side/3*2};
|
|
left: #{$nav-menu-side/6};
|
|
}
|
|
|
|
// Add menu label
|
|
&::after {
|
|
color: $link-color;
|
|
content: attr(aria-label);
|
|
}
|
|
}
|
|
|
|
+ ul {
|
|
display: none;
|
|
}
|
|
&.toggled + ul {
|
|
display: block;
|
|
}
|
|
|
|
+ ul {
|
|
position: absolute;
|
|
right: 0;
|
|
min-width: 18em;
|
|
max-width: 100%;
|
|
border-top: 0;
|
|
margin: 0;
|
|
width: auto;
|
|
border: .33em solid $nav-mobile-menu-background;
|
|
|
|
li {
|
|
a {
|
|
padding-left: 2.33em;
|
|
position: relative;
|
|
}
|
|
a::before {
|
|
@include arrowIcon($color: str-slice('#{$nav-item-selected-color}', 2));
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 1em;
|
|
width: 1em;
|
|
transform: translateX(-.5em);
|
|
opacity: 0;
|
|
transition: opacity .5s, transform .5s;
|
|
|
|
}
|
|
a:hover::before,
|
|
&.selected a::before {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Page title
|
|
.theme-page-header {
|
|
text-align: center;
|
|
color: $primary-color;
|
|
|
|
// Hide Default title if a cell or custom title is defined
|
|
> * + .theme-page-title--default {
|
|
display: none;
|
|
}
|
|
|
|
// WCS title
|
|
.wcs-page-title {
|
|
position: relative;
|
|
color: white;
|
|
background-color: $primary-color;
|
|
margin: 0;
|
|
text-align: left;
|
|
|
|
padding: $theme-gutter-mobile;
|
|
margin-left: -$theme-gutter-mobile;
|
|
margin-right: -$theme-gutter-mobile;
|
|
@media ($min-desktop-viewport) {
|
|
padding: $theme-gutter*2 $theme-gutter;
|
|
margin-left: -$theme-gutter;
|
|
margin-right: -$theme-gutter;
|
|
|
|
// Category image
|
|
padding-right: calc( 33.333% + #{$theme-gutter*2});
|
|
// Form Category img
|
|
&--image {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 66.666%;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
@media (min-width: $width + 1) {
|
|
padding-left: $theme-page-padding;
|
|
padding-right: calc( 33.333% + #{$theme-page-padding} );
|
|
margin-right: -$theme-page-padding;
|
|
margin-left: -$theme-page-padding;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Top bandeau
|
|
.top-bandeau {
|
|
@media ($min-desktop-viewport) {
|
|
background-color: $primary-color;
|
|
}
|
|
// top bandeau cell styles
|
|
.cell:not(#carrousel) {
|
|
color: white;
|
|
background-color: $primary-color;
|
|
padding: $theme-gutter;
|
|
|
|
h2:first-child {
|
|
font-weight: 800;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
.carrousel + .cell {
|
|
@media ($max-mobile-viewport) {
|
|
position: relative;
|
|
z-index: 101;
|
|
margin-top: -#{$theme-gutter};
|
|
margin-right: $theme-gutter-mobile;
|
|
margin-left: $theme-gutter-mobile;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.carrousel {
|
|
// stretch all flex space
|
|
@media ($min-desktop-viewport) {
|
|
position: relative;
|
|
padding-top: 38%;
|
|
> div {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.carrousel-content {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
// Desktop layout
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
& > .cell:last-child {
|
|
flex: 0 0 calc( (100% - #{$theme-gutter}) / 3 );
|
|
@media (min-width: $width + 1) {
|
|
flex: 0 0 calc( (100% - #{$theme-page-padding}) / 3 );
|
|
|
|
}
|
|
}
|
|
& > .cell:first-child {
|
|
flex: 1 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// PWA nav & Search Form
|
|
.pwa-navigation--wrapper {
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
justify-content: center;
|
|
border-top: 2px solid $gray-light;
|
|
border-bottom: 2px solid $gray-light;
|
|
.pwa-navigation {
|
|
flex: 0 1 66.666%;
|
|
align-self: center;
|
|
}
|
|
}
|
|
.search-cell,
|
|
.search-cell > div {
|
|
background-color: $gray-light;
|
|
}
|
|
.search-cell {
|
|
@media ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
padding: 0;
|
|
background-color: $gray-light;
|
|
position: relative;
|
|
flex: 0 0 33.333%;
|
|
|
|
> div {
|
|
padding: 0 $theme-gutter;
|
|
}
|
|
}
|
|
.combo-search-form {
|
|
padding: $theme-gutter/2 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.combo-search-input {
|
|
border: 1px solid transparent;
|
|
margin: 0;
|
|
padding-right: 2em;
|
|
}
|
|
.submit-button {
|
|
// reset
|
|
@include vendor-prefix('appearance', 'none');
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
|
|
display: block;
|
|
width: 2em;
|
|
font-size: $fz-h6;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// JS UI ANIMATION
|
|
// Fix cell on right of window when she's activated (input get focus)
|
|
// Use JS, see extra.js
|
|
|
|
body.no-overflow {
|
|
overflow: hidden !important;
|
|
}
|
|
.pwa-navigation--wrapper .search-cell {
|
|
$open-width: 30em;
|
|
$btn-width: 1.8em;
|
|
$time: 900ms;
|
|
|
|
// button
|
|
.top-search-close-btn {
|
|
@extend %button;
|
|
width: $btn-width;
|
|
height: $btn-width;
|
|
line-height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
position: fixed;
|
|
top: $theme-gutter-mobile;
|
|
right: $open-width - $btn-width / 2;
|
|
&::before {
|
|
content: "\f00d";
|
|
font-family: fontawesome;
|
|
}
|
|
|
|
display: none;
|
|
}
|
|
// Mask
|
|
.top-search-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1999;
|
|
background-color: black;
|
|
opacity: 0;
|
|
transition: opacity $time;
|
|
display: none;
|
|
}
|
|
> div {
|
|
transition:
|
|
top $time,
|
|
left $time,
|
|
height $time,
|
|
width $time;
|
|
will-change: top, left, height, width;
|
|
}
|
|
.combo-search-input {
|
|
transition: none;
|
|
-webkit-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
.combo-search-results {
|
|
display: none;
|
|
}
|
|
|
|
&.search-cell-fixed {
|
|
> div {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
}
|
|
.top-search-mask {
|
|
display: block;
|
|
}
|
|
|
|
// fixed on position
|
|
&.search-cell-move-on-top {
|
|
> div {
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
left: calc(100vw - #{$open-width}) !important;
|
|
height: 100% !important;
|
|
width: $open-width !important;
|
|
overflow-y: auto;
|
|
}
|
|
.combo-search-results,
|
|
.top-search-close-btn {
|
|
display: block;
|
|
}
|
|
.top-search-mask {
|
|
opacity: .6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pwa-navigation {
|
|
@media ($max-mobile-viewport) {
|
|
border-top: 2px solid $gray-light;
|
|
left: 0;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
justify-content: center;
|
|
}
|
|
div > ul li a {
|
|
color: $gray;
|
|
font-weight: bold;
|
|
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%;
|
|
}
|
|
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
position: static;
|
|
z-index: 0;
|
|
div > ul {
|
|
justify-content: space-around;
|
|
li {
|
|
text-align: left;
|
|
flex: 0 0 auto;
|
|
a {
|
|
$icon-width: 30px;
|
|
padding: 0;
|
|
padding-left: calc( #{$theme-gutter / 2 } + #{$icon-width} + 10px );
|
|
padding-right: $theme-gutter / 2;
|
|
background-position: #{$theme-gutter / 2} center;
|
|
background-size: $icon-width auto;
|
|
span {
|
|
font-size: $fz-small;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// WCS
|
|
//
|
|
|
|
// layout
|
|
@media ($min-desktop-viewport) {
|
|
.form-content--sidebox {
|
|
width: $sidebar-width;
|
|
& + div#rub_service {
|
|
width: calc( 100% - #{$sidebar-width});
|
|
padding-left: $theme-gutter;
|
|
}
|
|
}
|
|
}
|
|
#rub_service {
|
|
// Hide default title
|
|
> h2:first-child {
|
|
display: none;
|
|
}
|
|
form.quixote {
|
|
padding: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $fz-h4;
|
|
font-weight: 700;
|
|
color: $primary-color;
|
|
}
|
|
// buttons icons & colors
|
|
.buttons button::before,
|
|
.buttons button::after {
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
border-radius: 50%;
|
|
border: 2px solid;
|
|
margin: 0 .66em;
|
|
background: no-repeat center;
|
|
background-size: .75em auto;
|
|
vertical-align: -.33em;
|
|
}
|
|
.submit-button button {
|
|
background-color: $green;
|
|
color: $font-color;
|
|
&::after {
|
|
content: "";
|
|
@include arrowIcon($property: background-image, $color: str-slice('#{$font-color}', 2), $strokeWidth: 4);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.previous-button button {
|
|
background-color: $font-color;
|
|
color: white;
|
|
&::before {
|
|
content: "";
|
|
@include arrowIcon($property: background-image, $color: 'fff', $strokeWidth: 4);
|
|
transform: rotate(0.5turn);
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.cancel-button button {
|
|
&::before {
|
|
content: "";
|
|
background-image: url(img/cross.svg);
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
.form-content--sidebox {
|
|
margin-top: 0;
|
|
@media ($min-desktop-viewport) {
|
|
background-image: linear-gradient(to top, transparent, $gray-light 200px);
|
|
}
|
|
|
|
@media ($min-desktop-viewport) {
|
|
box-sizing: content-box;
|
|
height: 100%;
|
|
padding-left: $theme-gutter;
|
|
margin-left: -$theme-gutter;
|
|
}
|
|
@media (min-width: $width + 1) {
|
|
padding-left: $theme-page-padding;
|
|
margin-left: -$theme-page-padding;
|
|
}
|
|
|
|
// Tracking code
|
|
#tracking-code {
|
|
font-size: 100%;
|
|
margin-bottom: 0;
|
|
.tracking-code-part {
|
|
background-color: $font-color;
|
|
color: white;
|
|
padding: .66em;
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: $theme-gutter;
|
|
margin-left: -$theme-gutter;
|
|
}
|
|
@media (min-width: $width + 1) {
|
|
padding-left: $theme-page-padding;
|
|
margin-left: -$theme-page-padding;
|
|
}
|
|
// reset default styles
|
|
* {
|
|
color: inherit !important;
|
|
font-size: inherit !important;
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
h3 {
|
|
font-weight: normal;
|
|
margin-right: .66em;
|
|
}
|
|
a {
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
form {
|
|
margin: 1em 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Steps
|
|
.wcs-steps {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
}
|
|
.wcs-step {
|
|
@include desktop-vertical-steps() {
|
|
margin-bottom: 0;
|
|
}
|
|
&.step-before {
|
|
color: $primary-color;
|
|
.wcs-step--marker {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// FOOTER
|
|
//
|
|
|
|
.has-pwa-navigation footer {
|
|
// keep space for PWA nav
|
|
@media ($max-mobile-viewport) {
|
|
margin-bottom: $nav-mobile-bottom-bar-height;
|
|
}
|
|
|
|
}
|
|
#footer {
|
|
padding-top: $theme-gutter;
|
|
padding-bottom: $theme-gutter;
|
|
.footer-imgs {
|
|
text-align: center;
|
|
line-height: 0;
|
|
.logo-blanc {
|
|
width: 200px;
|
|
}
|
|
.skyline {
|
|
width: 600px;
|
|
}
|
|
|
|
@media ($min-desktop-viewport) {
|
|
text-align: justify;
|
|
&::after {
|
|
content: " ";
|
|
display: inline-block;
|
|
width: 90%;
|
|
}
|
|
.logo-blanc {
|
|
width: 25%;
|
|
max-width: 250px;
|
|
}
|
|
.skyline {
|
|
width: 70%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menucell {
|
|
@media ($min-desktop-viewport) {
|
|
text-align: right;
|
|
}
|
|
li {
|
|
@media ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
a {
|
|
@media ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
color: white;
|
|
@media ($min-desktop-viewport) {
|
|
padding-right: 0;
|
|
padding-left: 3em;
|
|
}
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|