757 lines
16 KiB
SCSS
757 lines
16 KiB
SCSS
@import 'variables', 'mixin';
|
|
|
|
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - container
|
|
* 2.0 - content
|
|
* 3.0 - data-aos
|
|
* 4.0 - reset css
|
|
* 5.0 - img
|
|
* 6.0 - full__width
|
|
* 6.1 - full__left
|
|
* 6.2 - full__right
|
|
* 7.0 - form search
|
|
* 8.0 - gallery
|
|
* 9.0 - thumbnail hover
|
|
* 10.0 - pagination
|
|
* 11.0 - woocommerce-pagination
|
|
* 12.0 - margins & paddings
|
|
* 13.0 - modal
|
|
* 14.0 - catapult-cookie-bar
|
|
* 15.0 - keyframes
|
|
* 16.0 - accordion
|
|
*/
|
|
|
|
::-webkit-scrollbar {
|
|
width: 15px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: $primary-color;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
transition: $transition;
|
|
background: darken($primary-color, 10);
|
|
}
|
|
|
|
b, strong{
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
/* 1.0 - container */
|
|
.container {
|
|
max-width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
&-fluid {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
&.large {
|
|
max-width: 1920px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.0 - content */
|
|
.content {
|
|
padding: $content-padding;
|
|
|
|
&.front-content {
|
|
padding: $content-padding-home;
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - data-aos */
|
|
[data-aos] {
|
|
@include media-max(md) {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
@each $item in (2 3 4 5) {
|
|
|
|
&.nc-#{$item},
|
|
&.columns-#{$item} {
|
|
@for $i from 1 through $item {
|
|
>[data-aos]:not([data-aos-delay]) {
|
|
&:nth-child(#{$item}n + #{$i}) {
|
|
transition-delay: ($i * 0.1s);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.0 - reset css */
|
|
.screen-reader-text {
|
|
border: 0;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
-webkit-clip-path: inset(50%);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
word-wrap: normal !important;
|
|
|
|
&:focus {
|
|
background-color: #f1f1f1;
|
|
border-radius: 3px;
|
|
clip: auto !important;
|
|
-webkit-clip-path: none;
|
|
clip-path: none;
|
|
color: #21759b;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
height: auto;
|
|
left: 5px;
|
|
line-height: normal;
|
|
padding: 15px 23px 14px;
|
|
text-decoration: none;
|
|
top: 5px;
|
|
width: auto;
|
|
z-index: 100000;
|
|
@include css3(box-shadow, 0 0 2px 2px rgba(0, 0, 0, 0.6));
|
|
}
|
|
}
|
|
|
|
:focus,
|
|
*:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: $primary-color;
|
|
color: #fff;
|
|
}
|
|
|
|
::selection {
|
|
background: $primary-color;
|
|
color: #fff;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
max-width: $body-max-width;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
html {
|
|
max-width: $body-max-width;
|
|
margin: 0 auto;
|
|
|
|
@include media-max(xl) {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
p:empty {
|
|
display: none;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.col-flex {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
&--center {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&--bottom {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
|
|
/* 5.0 - img */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
&.alignnone {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
&.alignleft {
|
|
float: left;
|
|
margin: 30px 30px 30px 0;
|
|
|
|
@include media-max(md) {
|
|
margin: 30px auto;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
&.alignright {
|
|
float: right;
|
|
|
|
margin: 30px 0 30px 30px;
|
|
}
|
|
|
|
&.aligncenter {
|
|
display: block;
|
|
|
|
margin: 30px auto;
|
|
}
|
|
|
|
&.alignnone,
|
|
&.alignleft,
|
|
&.alignright,
|
|
&.aligncenter {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@include media-max(md) {
|
|
margin: 30px auto;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 6.0 - full__width */
|
|
.full {
|
|
&__width {
|
|
margin-left: calc(-50vw + 50%);
|
|
margin-right: calc(-50vw + 50%);
|
|
max-width: $body-max-width;
|
|
|
|
@media (min-width: $body-max-width) {
|
|
margin-left: calc((#{$body-max-width} * (-0.5)) + 50%);
|
|
margin-right: calc((#{$body-max-width} * (-0.5)) + 50%);
|
|
}
|
|
}
|
|
|
|
|
|
/* 6.1 - full__left */
|
|
&__left {
|
|
[class^="col-"] {
|
|
&:first-child {
|
|
width: calc(#{$body-max-width} / 2);
|
|
flex: 0 0 calc(#{$body-max-width} / 2);
|
|
max-width: calc(#{$body-max-width} / 2);
|
|
margin-left: calc((#{$body-max-width} * (-0.5)) + 50%);
|
|
padding-left: 0;
|
|
text-align: right;
|
|
|
|
@include media-max(md) {
|
|
padding-left: 15px;
|
|
width: 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 6.2 - full__right */
|
|
&__right {
|
|
[class^="col-"] {
|
|
&:last-child {
|
|
width: calc(#{$body-max-width} / 2);
|
|
flex: 0 0 calc(#{$body-max-width} / 2);
|
|
max-width: calc(#{$body-max-width} / 2);
|
|
margin-right: calc((#{$body-max-width} * (-0.5)) + 50%);
|
|
padding-right: 0;
|
|
|
|
@include media-max(md) {
|
|
padding-right: 15px;
|
|
width: 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 7.0 - form search */
|
|
form[role=search] {
|
|
position: relative;
|
|
|
|
input[type=search] {
|
|
padding-right: 44px;
|
|
}
|
|
|
|
button,
|
|
input[type=submit] {
|
|
border: 0;
|
|
background: transparent;
|
|
color: #aaa;
|
|
padding: 0 14px;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
border-radius: 0;
|
|
letter-spacing: 0;
|
|
@include absolute(0, 0, 0, auto);
|
|
|
|
&:hover {
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.svg-icon {
|
|
&__path {
|
|
stroke: #aaa;
|
|
}
|
|
|
|
&:hover {
|
|
.svg-icon__path {
|
|
stroke: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 8.0 - gallery */
|
|
.gallery {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin: 30px -15px 20px;
|
|
|
|
@include media-max(sm) {
|
|
margin: -7.5px;
|
|
}
|
|
|
|
&-item {
|
|
margin: 0;
|
|
padding: 15px;
|
|
|
|
@include media-max(sm) {
|
|
padding: 7.5px;
|
|
}
|
|
|
|
a,
|
|
img,
|
|
picture {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.gallery-columns-6>.gallery-item {
|
|
@include flex(16.6666666%);
|
|
|
|
@include media-max(xl) {
|
|
@include flex(20%);
|
|
}
|
|
|
|
@include media-max(lg) {
|
|
@include flex(25%);
|
|
}
|
|
|
|
@include media-max(md) {
|
|
@include flex(33.3333333%);
|
|
}
|
|
|
|
@include media-max(sm) {
|
|
@include flex(50%);
|
|
}
|
|
}
|
|
|
|
&.gallery-columns-5>.gallery-item {
|
|
@include flex(20%);
|
|
|
|
@include media-max(lg) {
|
|
@include flex(25%);
|
|
}
|
|
|
|
@include media-max(md) {
|
|
@include flex(33.3333333%);
|
|
}
|
|
|
|
@include media-max(sm) {
|
|
@include flex(50%);
|
|
}
|
|
}
|
|
|
|
&.gallery-columns-4>.gallery-item {
|
|
@include flex(25%);
|
|
|
|
@include media-max(lg) {
|
|
@include flex(33.3333333%);
|
|
}
|
|
|
|
@include media-max(md) {
|
|
@include flex(50%);
|
|
}
|
|
}
|
|
|
|
&.gallery-columns-3>.gallery-item {
|
|
@include flex(33.3333333%);
|
|
|
|
@include media-max(md) {
|
|
@include flex(50%);
|
|
}
|
|
}
|
|
|
|
&.gallery-columns-2>.gallery-item {
|
|
@include flex(50%);
|
|
}
|
|
|
|
&.gallery-columns-1>.gallery-item {
|
|
@include flex(100%);
|
|
}
|
|
}
|
|
|
|
|
|
/* 9.0 - thumbnail hover */
|
|
.gallery .gallery-item .gallery-icon>a,
|
|
.product-col .product-box-img,
|
|
.product-box>a:not(.product-box__link),
|
|
.woocommerce-product-gallery__image>a,
|
|
.blog-post__img__link {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
z-index: 9;
|
|
|
|
&:before {
|
|
content: '';
|
|
background: $gallery-overlay-background;
|
|
opacity: $gallery-overlay-opacity;
|
|
z-index: 2;
|
|
@include absolute(0, 0, 0, 0);
|
|
@include css3(transition, $transition);
|
|
}
|
|
|
|
&:after {
|
|
z-index: 3;
|
|
width: $gallery-icon-width;
|
|
height: $gallery-icon-height;
|
|
background-color: $gallery-icon-background;
|
|
text-align: center;
|
|
line-height: $gallery-icon-height - (2 * $gallery-icon-border-width);
|
|
border: $gallery-icon-border-width solid $gallery-icon-border-color;
|
|
border-radius: $gallery-icon-border-radius;
|
|
opacity: $gallery-icon-opacity;
|
|
margin-top: $gallery-icon-margin-top;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
content: '';
|
|
@include absolute(50%, auto, auto, 50%);
|
|
@include css3(transition, $transition);
|
|
@include css3(transform, translate(-50%, -50%));
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: $gallery-overlay-opacity-hover;
|
|
}
|
|
|
|
&:after {
|
|
margin-top: 0;
|
|
opacity: $gallery-icon-opacity-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slb_details {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* 10.0 - pagination */
|
|
.pagination {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin-top: 25px;
|
|
|
|
a,
|
|
span {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
color: rgb(0, 0, 0);
|
|
margin-left: -1px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgb(204, 204, 204);
|
|
-o-border-image: initial;
|
|
border-image: initial;
|
|
@include css3(transition, all 0.2s linear 0s);
|
|
|
|
&:hover,
|
|
&.current {
|
|
color: rgb(255, 255, 255);
|
|
background: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 11.0 - woocommerce-pagination */
|
|
nav.woocommerce-pagination {
|
|
margin-top: 25px;
|
|
|
|
ul.page-numbers {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
a,
|
|
span {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
color: rgb(0, 0, 0);
|
|
margin-left: -1px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgb(204, 204, 204);
|
|
-o-border-image: initial;
|
|
border-image: initial;
|
|
@include css3(transition, all 0.2s linear 0s);
|
|
|
|
&:hover,
|
|
&.current {
|
|
color: rgb(255, 255, 255);
|
|
background: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a.prev.page-numbers,
|
|
a.next.page-numbers {
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
|
|
/* 12.0 - margins & paddings */
|
|
$px-array: 100 95 90 85 80 75 70 65 60 55 50 45 40 35 30 25 20 15 10 5 0;
|
|
|
|
@each $current-px in $px-array {
|
|
.mb-#{$current-px} {
|
|
margin-bottom: #{$current-px}px !important;
|
|
}
|
|
|
|
.mb-n#{$current-px} {
|
|
margin-bottom: -#{$current-px}px !important;
|
|
}
|
|
|
|
.mt-#{$current-px} {
|
|
margin-top: #{$current-px}px !important;
|
|
}
|
|
|
|
.mt-n#{$current-px} {
|
|
margin-top: -#{$current-px}px !important;
|
|
}
|
|
|
|
.pb-#{$current-px} {
|
|
padding-bottom: #{$current-px}px !important;
|
|
}
|
|
|
|
.pb-n#{$current-px} {
|
|
padding-bottom: -#{$current-px}px !important;
|
|
}
|
|
|
|
.pt-#{$current-px} {
|
|
padding-top: #{$current-px}px !important;
|
|
}
|
|
|
|
.pt-n#{$current-px} {
|
|
padding-top: -#{$current-px}px !important;
|
|
}
|
|
}
|
|
|
|
.margin-0 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.padding-0 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
|
|
/* 13.0 - modal */
|
|
.modal {
|
|
&-header {
|
|
padding: 15px 20px;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
.h {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.close {
|
|
padding: 10px 20px;
|
|
margin-top: 0;
|
|
|
|
&:hover {
|
|
color: $primary-color;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-body {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 14.0 - catapult-cookie-bar */
|
|
#catapult-cookie-bar {
|
|
color: #ddd;
|
|
background-color: #464646;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
overflow: hidden;
|
|
transform: translateY(100%);
|
|
@include css3(transition, $transition);
|
|
|
|
.ctcc-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include media-max(md) {
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ctcc-left-side {
|
|
@include media-min(md) {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
@include css3(transition, $transition);
|
|
|
|
&:hover {
|
|
opacity: .65;
|
|
}
|
|
}
|
|
}
|
|
|
|
button#catapultCookie {
|
|
@extend .button;
|
|
padding: 7px 10px !important;
|
|
|
|
@include media-max(md) {
|
|
margin: 15px 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-cookie-bar #catapult-cookie-bar {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
|
|
/* 15.0 - keyframes */
|
|
@include keyframes('loading') {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 16.0 - accordion */
|
|
.accordion {
|
|
&-collapse {
|
|
transition: $transition;
|
|
}
|
|
|
|
&-header {
|
|
margin-top: 0;
|
|
}
|
|
} |