170 lines
3.4 KiB
SCSS
170 lines
3.4 KiB
SCSS
.slick-dotted.slick-slider {
|
|
margin-bottom: 0;
|
|
}
|
|
.slick-dots {
|
|
display: inline-block !important;
|
|
position: static;
|
|
z-index: 2;
|
|
margin-top: 20px;
|
|
|
|
li button {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
color: transparent;
|
|
border: 0;
|
|
outline: none;
|
|
background: transparent !important;
|
|
border-radius: 50%;
|
|
border: 2px solid $body-color;
|
|
}
|
|
li.slick-active button {
|
|
background: $color-primary !important;
|
|
border-color: $color-primary;
|
|
}
|
|
}
|
|
|
|
.slick-gutter-15 {
|
|
.slick-list {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
.slick-slide {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
.slick-activation-01 {
|
|
&.slick-gutter-15 {
|
|
.slick-list {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.slide-arrow {
|
|
height: 50px;
|
|
width: 50px;
|
|
line-height: 48px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
transition: 0.3s;
|
|
color: #fff;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.5) 0.29%,
|
|
rgba(255, 255, 255, 0.1) 99.71%,
|
|
rgba(0, 0, 0, 0.5) 99.71%
|
|
);
|
|
backdrop-filter: blur(40px);
|
|
border: none;
|
|
transform: translateY(-50%) scale(1);
|
|
top: 50%;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(97.3deg, #ff512f 0%, #dd2476 100%);
|
|
transition: 0.5s;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
border-radius: inherit;
|
|
}
|
|
&:hover {
|
|
&::before {
|
|
transition: 0.5s;
|
|
opacity: 1;
|
|
}
|
|
i {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
button.slide-arrow {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
button.slide-arrow {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 767px) {
|
|
button.slide-arrow {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
button.slide-arrow i {
|
|
font-size: 22px;
|
|
color: #fff;
|
|
}
|
|
button.slide-arrow.slide-arrow {
|
|
top: -85px !important;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
}
|
|
button.slide-arrow.prev-arrow {
|
|
right: 65px !important;
|
|
}
|
|
button.slide-arrow.next-arrow {
|
|
right: 0 !important;
|
|
}
|
|
|
|
button.slide-arrow:hover.slide-arrow i {
|
|
color: #fff !important;
|
|
}
|
|
.slick-dots li button:before {
|
|
font-size: 0;
|
|
}
|
|
// slick top
|
|
.slick-arrow-top {
|
|
button.slide-arrow.prev-arrow {
|
|
right: 19% !important;
|
|
@include lg-device {
|
|
right: 14% !important;
|
|
}
|
|
@include md-device {
|
|
right: 9% !important;
|
|
}
|
|
}
|
|
button.slide-arrow.next-arrow {
|
|
right: 15.7% !important;
|
|
|
|
@include xl-device {
|
|
right: 14.7% !important;
|
|
}
|
|
@include lg-device {
|
|
right: 9% !important;
|
|
}
|
|
}
|
|
}
|
|
// slick center
|
|
.slick-arrow-between {
|
|
position: relative;
|
|
}
|
|
|
|
.slick-arrow-between button.slide-arrow.prev-arrow {
|
|
top: 50% !important;
|
|
left: -20px !important;
|
|
}
|
|
.slick-arrow-between button.slide-arrow.next-arrow {
|
|
top: 50% !important;
|
|
right: -20px !important;
|
|
}
|
|
.slick-arrow-none {
|
|
button.slide-arrow {
|
|
display: none !important;
|
|
}
|
|
}
|