website_applicants/tutorgo/assets/scssold/layout/_slider.scss

171 lines
3.9 KiB
SCSS
Raw Normal View History

2023-12-28 11:59:50 +03:00
@use '../utils' as *;
/*----------------------------------------*/
/* 04. SLIDER CSS
/*----------------------------------------*/
.tp-slider{
$self : &;
&__section{
margin-bottom: -70px;
@media #{$xs,$sm} {
margin-bottom: -15px;
}
}
&__height{
min-height: 950px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@media #{$md}{
min-height: 750px;
}
@media #{$sm}{
min-height: 650px;
}
@media #{$xs}{
min-height: 450px;
}
&-2{
min-height: 820px;
@media #{$md}{
min-height: 750px;
}
@media #{$sm}{
min-height: 650px;
}
@media #{$xs}{
min-height: 450px;
}
}
}
&__item{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
&__overlay{
position: relative;
z-index: 1;
&::after{
@include tp-afbf-full();
background-color: rgb(0, 6, 20);
opacity: .8;
z-index: -1;
}
}
&__subtitle{
color:var(--tp-common-white) ;
font-size: 20px;
margin-bottom: 10px;
display: inline-block;
}
&__title{
font-size: 90px;
color: var(--tp-common-white);
font-weight: var(--tp-fw-bold);
line-height: 1.1;
margin-bottom: 20px;
@media #{$xs,$sm,$md,$lg} {
font-size: 60px;
& br {
display: none;
}
}
@media #{$sm}{
font-size: 60px;
}
@media #{$xs}{
font-size: 45px;
}
&-pre{
font-size: 18px;
font-weight: 500;
color: var(--tp-common-white);
display: inline-block;
margin-bottom: 15px;
text-transform: uppercase;
}
}
&__content{
& p{
font-size: 18px;
line-height: 28px;
color: var(--tp-common-white);
margin-bottom: 45px;
}
}
&__arrows{
@media #{$sm, $xs}{
display: none;
}
& button{
position: absolute;
top: 50%;
left: 30px;
z-index: 1;
font-size: 50px;
font-weight: 300;
color: var(--tp-common-white);
@media #{$md} {
left: 10px;
}
&.slick-next{
left: auto;
right: 30px;
z-index: 11;
@media #{$md} {
right: 10px;
}
}
}
}
&__dot{
position: absolute;
bottom: 0;
left: 50%;
@include transform(translateX(-50%));
z-index: 9;
text-align: center;
& .swiper-pagination-bullet{
width: 8px;
height: 8px;
background-color: var(--tp-common-white);
margin: 0 8px;
@include transform(scale(1));
}
}
}
.slider-play-btn{
font-size: 14px;
color: var(--tp-common-dark-3);
text-transform: capitalize;
font-weight: 700;
@media #{$xs}{
display: block;
}
& .slider-play-btn-icon{
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: var(--tp-common-white);
color: var(--tp-common-dark-3);
border-radius: 50%;
}
& .slider-play-btn-text{
margin-left: 20px;
}
&:hover{
color: var(--tp-common-white);
}
}