479 lines
13 KiB
SCSS
479 lines
13 KiB
SCSS
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - swiper-box
|
|
* 2.0 - swiper-slider
|
|
* 2.1 - type-default
|
|
* 2.2 - type-custom
|
|
* 2.3 - type-post
|
|
* 2.4 - type-product
|
|
* 2.5 - grid
|
|
* 3.0 - swiper-wrapper
|
|
* 4.0 - swiper-slide
|
|
* 4.1 - slide__container
|
|
* 4.2 - slide__content
|
|
* 4.3 - slide__sub-h
|
|
* 4.4 - slide__h
|
|
* 4.5 - slide__desc
|
|
* 4.6 - slide__button
|
|
* 5.0 - swiper-button
|
|
* 5.1 - swiper-button-prev
|
|
* 5.2 - swiper-button-next
|
|
* 6.0 - swiper-scrollbar
|
|
* 7.0 - swiper-pagination
|
|
*/
|
|
|
|
|
|
@include keyframes(fadeInUpPx) {
|
|
from {
|
|
opacity: 0;
|
|
@include css3(transform, translate3d(0, 100px, 0));
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
@include css3(transform, translate3d(0, 0px, 0));
|
|
}
|
|
}
|
|
|
|
.home {
|
|
.jumbotron {
|
|
.swiper {
|
|
|
|
/* 1.0 - swiper-box */
|
|
&-box {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* 2.0 - swiper-slider */
|
|
&-slider {
|
|
|
|
|
|
.swiper-slide {}
|
|
|
|
|
|
/* 2.1 - type-default */
|
|
&.type-default {
|
|
&:not(.grid) .slide {
|
|
height: 750px;
|
|
|
|
@include media-max(1200px) {
|
|
height: 100vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.2 - type-custom */
|
|
&.type-custom {
|
|
&:not(.grid) .slide {
|
|
height: 750px;
|
|
|
|
@include media-max(md) {
|
|
height: 450px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.3 - type-post */
|
|
&.type-post {}
|
|
|
|
|
|
/* 2.4 - type-product */
|
|
&.type-product {}
|
|
|
|
|
|
/* 2.5 - grid */
|
|
&.grid .swiper {
|
|
&-wrapper {
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
&-slide {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - swiper-wrapper */
|
|
&-wrapper {}
|
|
|
|
|
|
/* 4.0 - swiper-slide */
|
|
&-slide {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
[class*="col-"] {
|
|
padding: 0;
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
.slide {
|
|
|
|
/* 4.1 - slide__container */
|
|
&__container {
|
|
text-align: center;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
|
|
@include media-max(1200px) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.2 - slide__content */
|
|
&__content {
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: $transition;
|
|
height: 100%;
|
|
position: relative;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
@include media-max(1200px){
|
|
opacity: 1;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(#000, 70%);
|
|
@include absolute(0, 0, 0, 0);
|
|
opacity: 0;
|
|
transition: $transition;
|
|
|
|
@include media-max(1200px){
|
|
opacity: 1;
|
|
}
|
|
|
|
@include media-max(1200px) {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include media-max(1200px) {
|
|
width: 100%;
|
|
}
|
|
|
|
@include media-min(1201px) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.3 - slide__sub-h */
|
|
&__sub-h {}
|
|
|
|
|
|
/* 4.4 - slide__h */
|
|
&__h {
|
|
font-size: 55px;
|
|
line-height: 70px;
|
|
color: #ffffff;
|
|
font-weight: 300;
|
|
|
|
@include media-max(1200px) {
|
|
margin-top: -50px;
|
|
font-size: 40px;
|
|
line-height: 50px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.5 - slide__desc */
|
|
&__desc {}
|
|
|
|
|
|
/* 4.6 - slide__button */
|
|
&__button {
|
|
margin-top: 10px;
|
|
border-color: #fff;
|
|
background: transparent;
|
|
color: #fff;
|
|
position: relative;
|
|
|
|
@include media-max(1200px){
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background: #fff;
|
|
transition: all .35s;
|
|
z-index: -1;
|
|
}
|
|
|
|
&:hover {
|
|
color: #000000 !important;
|
|
|
|
&:before {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&__sub-h,
|
|
&__h,
|
|
&__desc,
|
|
&__button-wrap {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&-active .slide {
|
|
&__sub-h {
|
|
@include css3(animation, (.8s .9s fadeInUpPx both));
|
|
}
|
|
|
|
&__h {
|
|
@include css3(animation, (.8s .8s fadeInUpPx both));
|
|
}
|
|
|
|
&__desc {
|
|
@include css3(animation, (.8s .7s fadeInUpPx both));
|
|
}
|
|
|
|
&__button-wrap {
|
|
@include css3(animation, (.8s .6s fadeInUpPx both));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 5.0 - swiper-button */
|
|
&-box .swiper-button {
|
|
|
|
|
|
/* 5.1 - swiper-button-prev */
|
|
&-prev {}
|
|
|
|
|
|
/* 5.2 - swiper-button-next */
|
|
&-next {}
|
|
|
|
}
|
|
|
|
|
|
/* 6.0 - swiper-scrollbar */
|
|
&-box .swiper-scrollbar {}
|
|
|
|
|
|
/* 7.0 - swiper-pagination */
|
|
&-box .swiper-pagination {
|
|
font-size: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
&-bullet {
|
|
|
|
c &-active {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
|
|
/* 1.0 - swiper-box */
|
|
&-box {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* 2.0 - swiper-slider */
|
|
&-slider {
|
|
|
|
|
|
/* 2.1 - type-default */
|
|
&.type-default {
|
|
&:not(.grid) .slide {
|
|
height: 750px;
|
|
|
|
@include media-max(md) {
|
|
height: 450px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.2 - type-custom */
|
|
&.type-custom {
|
|
&:not(.grid) .slide {
|
|
height: 750px;
|
|
|
|
@include media-max(md) {
|
|
height: 450px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 2.3 - type-post */
|
|
&.type-post {}
|
|
|
|
|
|
/* 2.4 - type-product */
|
|
&.type-product {}
|
|
|
|
|
|
/* 2.5 - grid */
|
|
&.grid .swiper {
|
|
&-wrapper {
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
&-slide {
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - swiper-wrapper */
|
|
&-wrapper {}
|
|
|
|
|
|
/* 4.0 - swiper-slide */
|
|
&-slide {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
[class*="col-"] {
|
|
padding: 0;
|
|
-ms-flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
.slide {
|
|
|
|
/* 4.1 - slide__container */
|
|
&__container {}
|
|
|
|
|
|
/* 4.2 - slide__content */
|
|
&__content {}
|
|
|
|
|
|
/* 4.3 - slide__sub-h */
|
|
&__sub-h {}
|
|
|
|
|
|
/* 4.4 - slide__h */
|
|
&__h {}
|
|
|
|
|
|
/* 4.5 - slide__desc */
|
|
&__desc {}
|
|
|
|
|
|
/* 4.6 - slide__button */
|
|
&__button {}
|
|
|
|
|
|
&__sub-h,
|
|
&__h,
|
|
&__desc,
|
|
&__button-wrap {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&-active .slide {
|
|
&__sub-h {
|
|
@include css3(animation, (.8s .9s fadeInUpPx both));
|
|
}
|
|
|
|
&__h {
|
|
@include css3(animation, (.8s .8s fadeInUpPx both));
|
|
}
|
|
|
|
&__desc {
|
|
@include css3(animation, (.8s .7s fadeInUpPx both));
|
|
}
|
|
|
|
&__button-wrap {
|
|
@include css3(animation, (.8s .6s fadeInUpPx both));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* 5.0 - swiper-button */
|
|
&-box .swiper-button {
|
|
|
|
|
|
/* 5.1 - swiper-button-prev */
|
|
&-prev {}
|
|
|
|
|
|
/* 5.2 - swiper-button-next */
|
|
&-next {}
|
|
|
|
}
|
|
|
|
|
|
/* 6.0 - swiper-scrollbar */
|
|
&-box .swiper-scrollbar {}
|
|
|
|
|
|
/* 7.0 - swiper-pagination */
|
|
&-box .swiper-pagination {
|
|
font-size: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
&-bullet {
|
|
|
|
|
|
&-active {}
|
|
}
|
|
}
|
|
} |