447 lines
7.0 KiB
SCSS
447 lines
7.0 KiB
SCSS
@import '../includes/fonts/lato';
|
|
@import '../includes/fonts/montserrat';
|
|
|
|
@media ($max-mobile-viewport) {
|
|
body {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
div#page {
|
|
background: url('img/body-bg.png') center left no-repeat;;
|
|
}
|
|
|
|
%button, %inverted-button {
|
|
border: 2px solid $primary-color;
|
|
text-transform: uppercase;
|
|
box-shadow: none;
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
%cell-links-list {
|
|
> li {
|
|
> a {
|
|
color: $font-color;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
&.required-authentication, &.is-redirection, &.external-link {
|
|
> a {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
div#header {
|
|
max-width: 100%;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.mel-link-wrapper {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
#toplinks {
|
|
top: 7px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
right: 1rem;
|
|
text-transform: uppercase;
|
|
.toplinks--list {
|
|
display: flex;
|
|
align-items: center;
|
|
&-item {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
a {
|
|
color: white;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
top: -$nav-menu-side + 5px;
|
|
}
|
|
}
|
|
|
|
.site-title {
|
|
@media (max-width: 1200px) {
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
div#header {
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
#header-wrapper {
|
|
background: $primary-color;
|
|
@media ($max-mobile-viewport) {
|
|
background: white;
|
|
border-top: $nav-menu-side + 10px solid $primary-color;
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
h1#logo {
|
|
@media ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
a {
|
|
color: white;
|
|
text-transform: uppercase;
|
|
@media ($max-mobile-viewport) {
|
|
color: $font-color;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* NAV */
|
|
|
|
#nav-wrapper {
|
|
background-image: url('img/header-bg.png');
|
|
background-color: #FBFAF7;
|
|
}
|
|
|
|
div.gru-nav {
|
|
li {
|
|
&:hover, &.selected {
|
|
a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
font-size: 130%;
|
|
&::after {
|
|
content: '';
|
|
border-top: 0.4rem solid $primary-color;
|
|
display: block;
|
|
width: 3.15rem;
|
|
@media ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.gru-nav-button {
|
|
position: absolute;
|
|
+ ul {
|
|
@media ($max-mobile-viewport) {
|
|
width: 75%;
|
|
}
|
|
}
|
|
&.toggled {
|
|
position: fixed;
|
|
background: transparent;
|
|
.icon-bar {
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
&-wrapper {
|
|
@media ($max-mobile-viewport) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gru-nav-button.toggled + ul {
|
|
position: fixed;
|
|
border-top: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 2001;
|
|
padding: $nav-mobile-bottom-bar-height 1rem 1rem 2rem;
|
|
a {
|
|
&::before {
|
|
content: '';
|
|
border-top: 0.4rem solid $primary-color;
|
|
display: inline-block;
|
|
width: 1.15rem;
|
|
margin-right: 1rem;
|
|
margin-bottom:0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pwa-navigation div > ul li {
|
|
a {
|
|
background-size: auto 25px;
|
|
background-position-y: 12%;
|
|
}
|
|
&.selected a, &:hover a {
|
|
box-shadow: 1px 1px 10px 0px #202020 inset;
|
|
}
|
|
&[data-include-user-name] a {
|
|
color: #e9bcbf;
|
|
}
|
|
}
|
|
|
|
div.previous-button button {
|
|
border: 2px solid $gray;
|
|
background: $gray;
|
|
color: white;
|
|
&:hover {
|
|
color: $gray;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.form-content--body {
|
|
border: $cell-border;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.wcs-step {
|
|
position: relative;
|
|
&:not(.current) &--marker {
|
|
border: $cell-border;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
content: '';
|
|
border-top: 0.4rem solid $primary-color;
|
|
width: 5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CELLS */
|
|
|
|
div.cell {
|
|
&.tracking-code-input-cell {
|
|
h2:first-child {
|
|
color: white;
|
|
}
|
|
}
|
|
&.searchcell {
|
|
border: 2px solid $primary-color;
|
|
background: transparent;
|
|
form {
|
|
background: url('img/search-cell-bg.svg') 1em top no-repeat;
|
|
background-size: auto 95%;
|
|
}
|
|
}
|
|
&.textcell {
|
|
padding: 1rem;
|
|
h2, h3 {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
&.wcs-forms-of-category-cell, &.link-list-cell {
|
|
background: transparent;
|
|
border: 0;
|
|
&.foldable {
|
|
h2:first-child {
|
|
padding-top: 1.25rem;
|
|
padding-bottom: 1.25rem;
|
|
&::after {
|
|
right: -2px;
|
|
bottom: 0;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
}
|
|
&.has-asset-picture h2:first-child {
|
|
padding-left: 6rem;
|
|
margin-left: -4rem;
|
|
}
|
|
> div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
padding: 5px 2px 0 2px;
|
|
border: 2px solid $font-color;
|
|
background: $cell-background;
|
|
> * {
|
|
flex: 0 0 100%;
|
|
}
|
|
> picture {
|
|
display: block;
|
|
order: -1;
|
|
flex: 0 0 4.5rem;
|
|
align-self: stretch;
|
|
margin-left: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
&:hover {
|
|
border-color: $primary-color;
|
|
box-shadow: inset 0px 0px 0px 2px $primary-color;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
}
|
|
}
|
|
h2:first-child {
|
|
flex: 1 0 50%;
|
|
padding-left: 1rem;
|
|
&::before {
|
|
content: '';
|
|
border-top: 0.4rem solid $primary-color;
|
|
display: block;
|
|
width: 3rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
}
|
|
&.most-popular {
|
|
border: 0;
|
|
padding-bottom: 0;
|
|
&:hover {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
ul > li {
|
|
> a {
|
|
color: $primary-color;
|
|
&:hover {
|
|
background: $font-color;
|
|
color: white;
|
|
transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.wcs-tracking-code-input, div.searchcell {
|
|
button {
|
|
background: white;
|
|
color: $primary-color;
|
|
border: 0;
|
|
margin-top: 0.5rem;
|
|
margin-right: 0;
|
|
&:hover {
|
|
background: $primary-color;
|
|
color: white;
|
|
}
|
|
}
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
form {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
div.searchcell input[type="search"] {
|
|
&, &:focus {
|
|
border: 0;
|
|
border-bottom: 2px solid $primary-color;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
div.wcs-tracking-code-input {
|
|
background: #4c4c4c;
|
|
color: white;
|
|
padding-top: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div#sidebar div.cell {
|
|
h2:first-child {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
|
|
div.searchcell {
|
|
border: 2px solid $primary-color;
|
|
}
|
|
|
|
div#tracking-code {
|
|
h3, a {
|
|
padding-left: 0;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
div.title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
li.required-authentication, li.external-link, li.is-redirection {
|
|
a::after {
|
|
color: unset;
|
|
position: relative;
|
|
margin-left: 1rem;
|
|
right: initial;
|
|
}
|
|
}
|
|
|
|
li.required-authentication a::after {
|
|
content: '\f023'; /* fa-lock */
|
|
}
|
|
|
|
li.external-link, li.is-redirection {
|
|
a::after {
|
|
content: '\f08e'; /* fa-external-link */
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
|
|
@media ($max-mobile-viewport) {
|
|
#toplinks a.account-link {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* customize upload color */
|
|
div.file-upload-widget div.file-button div.widget-message.upload-done::after {
|
|
color: green;
|
|
}
|
|
|
|
@if ($field-on-error-style == custom) {
|
|
div.error {
|
|
color: $primary-color;
|
|
background: url('img/error.svg') center left no-repeat;
|
|
padding-left: 22px;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
div.widget-with-error .content {
|
|
input, select, textarea, .select2, .file-button {
|
|
border: 1px solid $primary-color;
|
|
&:focus {
|
|
border: $widget-focus-border;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* FOOTER */
|
|
#footer-wrapper {
|
|
background: url('/assets/footer:background'), linear-gradient(to right, #303030, #303030);
|
|
a {
|
|
&:hover {
|
|
color: $primary-color;
|
|
}
|
|
img:hover {
|
|
filter: brightness(0) saturate(100%) invert(40%) sepia(85%) saturate(7470%) hue-rotate(347deg) brightness(84%) contrast(119%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer a {
|
|
color: white;
|
|
}
|