532 lines
8.4 KiB
SCSS
532 lines
8.4 KiB
SCSS
//
|
|
// TYPO
|
|
//
|
|
%title {
|
|
position: relative;
|
|
margin-left: 1rem;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 0.2em;
|
|
background-color: currentColor;
|
|
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
font-size: $fz-3;
|
|
}
|
|
}
|
|
h1 {
|
|
@extend %title;
|
|
font-size: $fz-1;
|
|
@media ($max-mobile-viewport) {
|
|
font-size: $fz-2;
|
|
}
|
|
}
|
|
h2 {
|
|
@extend %title;
|
|
}
|
|
%button {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
%cancel-button {
|
|
background-color: $gray;
|
|
border-color: $gray;
|
|
&:hover {
|
|
color: $gray-dark;
|
|
}
|
|
}
|
|
|
|
//
|
|
// SITE HEADER
|
|
//
|
|
$header-desktop-height: 100px;
|
|
$logo-width: 310px;
|
|
|
|
div#header {
|
|
max-width: $header-width;
|
|
#top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@media ($min-desktop-viewport) {
|
|
height: $header-desktop-height;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
flex-wrap: wrap;
|
|
padding: calc(10px + 0.7rem) 10px;
|
|
.site-nav {
|
|
order: 1;
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
}
|
|
// Logo
|
|
#logo {
|
|
flex: 1 1 $logo-width;
|
|
@media ($max-mobile-viewport) {
|
|
flex-basis: 100%;
|
|
}
|
|
padding: 0;
|
|
font-size: 1em;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
a {
|
|
display: block;
|
|
width: $logo-width;
|
|
height: 40px;
|
|
@media ($min-desktop-viewport) {
|
|
margin-top: 10px;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// User links
|
|
#toplinks {
|
|
$icon-size: 38px;
|
|
position: static;
|
|
z-index: 1;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0.33em;
|
|
padding: $fz-small 1rem;
|
|
padding-left: calc(#{$icon-size} + (#{$fz-small} * 2));
|
|
background: url(img/account.svg) left $fz-small center no-repeat $green;
|
|
background-size: $icon-size;
|
|
@media ($max-mobile-viewport) {
|
|
margin-right: $nav-menu-side;
|
|
}
|
|
a {
|
|
color: $violet-dark;
|
|
display: block;
|
|
font-weight: bold;
|
|
&:last-child {
|
|
font-size: $fz-small;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// NAV
|
|
// inside header-content
|
|
//
|
|
.gru-nav-wrapper {
|
|
@media ($max-mobile-viewport) {
|
|
margin-top: calc(-1 * #{$nav-menu-side});
|
|
}
|
|
}
|
|
|
|
div.gru-nav {
|
|
> ul {
|
|
margin: 0;
|
|
> li {
|
|
a {
|
|
font-weight: normal;
|
|
}
|
|
&.selected > a,
|
|
a:hover, a:focus {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
$header-gutter: '(10px + 0.7em)';
|
|
text-align: right;
|
|
.gru-nav-button {
|
|
display: inline-block;
|
|
border: 5px solid transparent;
|
|
+ ul {
|
|
position: relative;
|
|
text-align: left;
|
|
border-top: 0;
|
|
margin-left: calc(-1 * #{$header-gutter});
|
|
margin-right: calc(-1 * #{$header-gutter});
|
|
}
|
|
&.toggled + ul {
|
|
border-top: 10px solid white;
|
|
overflow: visible;
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 10px solid transparent;
|
|
border-bottom-color: $green;
|
|
position: absolute;
|
|
top: -20px;
|
|
right: calc(#{$nav-menu-side / 2} - 10px + #{$header-gutter});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// PAGE HEADER
|
|
//
|
|
|
|
%page-title {
|
|
background-color: $violet-dark;
|
|
background-image: var(--page-picture);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
padding : 4em 0;
|
|
color: white;
|
|
> div, > h1 {
|
|
max-width: $width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
* {
|
|
color: inherit;
|
|
}
|
|
}
|
|
.theme-page-header {
|
|
max-width: $header-width;
|
|
margin: 0 auto 2rem;
|
|
|
|
.text-cell {
|
|
@extend %page-title;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
min-height: calc(360em / 15);
|
|
@media ($max-mobile-viewport) {
|
|
min-height: calc(240em / 15);
|
|
}
|
|
> div {
|
|
flex: 0 0 100%;
|
|
}
|
|
}
|
|
div.carrousel-content {
|
|
min-height: calc(360em / 15);
|
|
@media ($max-mobile-viewport) {
|
|
min-height: calc(240em / 15);
|
|
}
|
|
input + div div.carrousel-item {
|
|
padding-bottom: $carrousel-navigation-bullet-size + 20;
|
|
div.carrousel-item-content{
|
|
flex: 0 1 $width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
> a {
|
|
max-width: 40rem;
|
|
strong {
|
|
@extend h1;
|
|
margin-left: 0;
|
|
color: white;
|
|
display: block;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.carrousel-nav {
|
|
max-width: $width;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: left;
|
|
label {
|
|
background-color: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// MAIN
|
|
//
|
|
div#main-content-wrapper {
|
|
position: static;
|
|
}
|
|
// home page template
|
|
.page-template-homepage {
|
|
.gru-content {
|
|
flex-wrap: wrap;
|
|
}
|
|
#theme-top-section {
|
|
flex: 0 0 100%;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
@media ($max-mobile-viewport) {
|
|
padding-left: 0.7rem;
|
|
padding-right: 0.7rem;
|
|
}
|
|
.cell {
|
|
@media ($min-desktop-viewport) {
|
|
margin-left: #{$columns-gutter / 2};
|
|
margin-right: #{$columns-gutter / 2};
|
|
}
|
|
}
|
|
|
|
}
|
|
// 3 cols layout
|
|
@media ($min-desktop-viewport) {
|
|
#columns {
|
|
display: flex;
|
|
.column {
|
|
flex: 1 1 0;
|
|
|
|
.cell {
|
|
margin-left: #{$columns-gutter / 2};
|
|
margin-right: #{$columns-gutter / 2};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// CELLS
|
|
//
|
|
|
|
.gru-content div.cell {
|
|
margin-bottom: $columns-gutter;
|
|
}
|
|
|
|
// cells custom style
|
|
.shadowed-cell {
|
|
overflow: hidden;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
|
|
> div {
|
|
box-shadow: 0 0 1.9em -0.8em #000;
|
|
padding-top: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.shadowed-cell-top {
|
|
@extend .shadowed-cell;
|
|
padding-bottom: 0;
|
|
> div {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.shadowed-cell-bottom {
|
|
@extend .shadowed-cell;
|
|
padding-top: 0;
|
|
> div {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.list-of-forms-cell {
|
|
$image-size: 2.5rem;
|
|
.gru-content &.cell {
|
|
color: white;
|
|
background-color: $red-dark;
|
|
h2:first-child {
|
|
color: inherit;
|
|
font-size: $fz-5;
|
|
text-align: left;
|
|
min-height: 5em;
|
|
display: flex !important;
|
|
align-items: center;
|
|
padding-right: 3rem;
|
|
padding-bottom: 0;
|
|
padding-left: 1rem;
|
|
margin-left: 0;
|
|
background-color: $red;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
&.foldable.folded {
|
|
h2:first-child {
|
|
background-color: $violet-dark;
|
|
}
|
|
}
|
|
// Picture position
|
|
&.has-asset-picture {
|
|
h2:first-child {
|
|
padding-left: $image-size + 2;
|
|
}
|
|
> div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
> * {
|
|
flex: 0 0 100%;
|
|
}
|
|
> h2:first-child {
|
|
flex: 1 0 50%;
|
|
margin-left: -1 * ($image-size + 1);
|
|
}
|
|
> picture {
|
|
display: block;
|
|
order: -1;
|
|
flex: 0 0 $image-size;
|
|
align-self: center;
|
|
margin-left: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
img {
|
|
padding: 0;
|
|
height: $image-size;
|
|
width: $image-size;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ul > li {
|
|
border-bottom: none;
|
|
color: inherit;
|
|
> *, a::after {
|
|
color: inherit !important;
|
|
}
|
|
> a:hover {
|
|
background-color: $red-xdark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#theme-top-section {
|
|
.tracking-code-input-cell {
|
|
@extend .shadowed-cell-bottom;
|
|
.wcs-tracking-code-input {
|
|
@media ($min-desktop-viewport) {
|
|
&, & form {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
h2 {
|
|
flex: 1 0 auto;
|
|
& + div {
|
|
padding-top: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
}
|
|
form {
|
|
p {
|
|
flex: 1 1 50%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
input {
|
|
margin-right: 1rem;
|
|
}
|
|
button {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-cell {
|
|
.combo-search--button::before {
|
|
content: "\f002"; // search icon
|
|
font-family: FontAwesome;
|
|
font-size: $fz-5;
|
|
}
|
|
.combo-search--button-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.wcs-forms-of-category-cell {
|
|
@extend .list-of-forms-cell;
|
|
}
|
|
|
|
//
|
|
// Forms
|
|
//
|
|
|
|
label {
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
}
|
|
|
|
//
|
|
// WCS
|
|
//
|
|
.wcs-steps {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: $fz-5;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-4;
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox {
|
|
padding: 0.5rem;
|
|
div#tracking-code {
|
|
@extend .shadowed-cell;
|
|
h3 {
|
|
margin-left: 0;
|
|
}
|
|
a {
|
|
font-weight: bold;
|
|
color: $red;
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
padding-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.theme-form-title {
|
|
@extend %page-title;
|
|
padding-left: calc(0.7rem + 0.5rem);
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
div#rub_service {
|
|
h3 {
|
|
@extend h2;
|
|
margin-left: 0;
|
|
}
|
|
h4 {
|
|
font-size: $fz-3;
|
|
}
|
|
}
|
|
|
|
//
|
|
// FOOTER
|
|
//
|
|
#theme-gray-footer-wrapper {
|
|
background-color: $gray-light;
|
|
}
|
|
#theme-gray-footer {
|
|
max-width: $width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#footer-wrapper {
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
#theme-gray-footer,
|
|
#footer {
|
|
padding: 3rem 0.7rem 2rem;
|
|
@media ($min-desktop-viewport) {
|
|
padding-top: 4.5rem;
|
|
padding-bottom: 3.5rem;
|
|
}
|
|
.cell {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|