ctt-babylon 0.8.17 → 0.9.0

package/lib/styles/styles/babylon/slider.scss

@@ -0,0 +1,876 @@
+@use './mixins.scss' as *;
+@use './variables.scss' as *;
+/*--------------------------------------------------------------
+  5. Slider
+----------------------------------------------------------------*/
+.cs_slider {
+    position: relative;
+}
+.slick-arrow {
+    cursor: pointer;
+}
+
+.slick-slide > div {
+    display: flex;
+    flex-direction: column;
+}
+.cs_remove_overflow {
+    .slick-list {
+        overflow: visible;
+    }
+
+    .slick-slide {
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s linear;
+
+        &.slick-active {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}
+.cs_slider_gap_24 {
+    .slick-slide {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+    .slick-list {
+        margin-left: -12px;
+        margin-right: -12px;
+    }
+}
+.cs_slider_gap_30 {
+    .slick-slide {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .slick-list {
+        margin-left: -15px;
+        margin-right: -15px;
+    }
+    @include full-tablet {
+        //1024
+        .slick-slide {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+        .slick-list {
+            margin-left: -12px;
+            margin-right: -12px;
+        }
+    }
+}
+.cs_slider_gap_40 {
+    .slick-slide {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    .slick-list {
+        margin-left: -20px;
+        margin-right: -20px;
+    }
+    @include full-tablet {
+        .slick-slide {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+        .slick-list {
+            margin-left: -12px;
+            margin-right: -12px;
+        }
+    }
+}
+.cs_slider_gap_60 {
+    .slick-slide {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+    .slick-list {
+        margin-left: -30px;
+        margin-right: -30px;
+    }
+    @include full-tablet {
+        .slick-slide {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+        .slick-list {
+            margin-left: -12px;
+            margin-right: -12px;
+        }
+    }
+}
+
+.cs_show_shadow_20 {
+    .slick-list {
+        padding-bottom: 20px;
+        margin-bottom: -20px;
+    }
+}
+
+.cs_slider_arrows.cs_style_1 {
+    display: flex;
+    gap: 12px;
+    .cs_left_arrow,
+    .cs_right_arrow {
+        height: 45px;
+        width: 70px;
+        border-radius: var(--btn_radius);
+        background: var(--cl_btn-arrow);
+        color: var(--cl_btn-arrow-icon);
+        flex: none;
+        transition: all 0.4s ease;
+        backdrop-filter: blur(10px);
+        position: absolute;
+        top: 30%;
+        z-index: 5;
+        cursor: pointer;
+        &:hover {
+            background: var(--cl_btn-arrow-hover);
+            color: var(--cl_btn-arrow-icon-hover);
+        }
+    }
+    .cs_left_arrow {
+        left: 0px;
+    }
+    .cs_right_arrow {
+        right: -2px;
+    }
+}
+
+.cs_slider_arrows.cs_style_2 {
+    .cs_left_arrow,
+    .cs_right_arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 20px;
+        color: var(--cl_btn-arrow);
+        &:hover {
+            &:hover {
+                color: var(--cl_btn-arrow-hover);
+            }
+        }
+    }
+    .cs_right_arrow {
+        // right: calc((100vw - 1300px) / 2 / 2);
+        // margin-right: -28px;
+        right: 2svw;
+        @include full-tablet {
+            right: calc((100vw - 1140px) / 2 / 2);
+            margin-right: -22px;
+        }
+        @include small-desktop {
+            //1199
+            right: calc((100vw - 960px) / 2 / 2);
+            margin-right: -22px;
+        }
+        @media (max-width: 1050px) {
+            margin-right: 0px;
+        }
+    }
+    .cs_left_arrow {
+        // left: calc((100vw - 1300px) / 2 / 2);
+        // margin-left: -28px;
+        left: 2svw;
+        @include full-tablet {
+            left: calc((100vw - 1140px) / 2 / 2);
+            margin-left: -22px;
+        }
+        @include small-desktop {
+            //1199
+            left: calc((100vw - 960px) / 2 / 2);
+            margin-left: -22px;
+        }
+        @media (max-width: 1050px) {
+            margin-left: 0px;
+        }
+    }
+}
+
+.cs_slider_arrows.cs_style_3 {
+    .cs_left_arrow,
+    .cs_right_arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: all 0.3s ease;
+        @include small-desktop {
+            //1199
+            top: 35%;
+        }
+        &:hover {
+            color: var(--cl_btn-arrow-icon-hover);
+        }
+    }
+    .cs_left_arrow {
+        left: 6.6%;
+        @include small-desktop {
+            //1199
+            left: 30px;
+        }
+    }
+    .cs_right_arrow {
+        right: 6.6%;
+        @include small-desktop {
+            //1199
+            right: 30px;
+        }
+    }
+}
+
+.cs_slider_arrows.cs_style_4 {
+    display: flex;
+    gap: 20px;
+    .cs_left_arrow,
+    .cs_right_arrow {
+        height: 45px;
+        width: 70px;
+        border-radius: var(--btn_radius);
+        background: var(--cl_btn-arrow);
+        color: var(--cl_btn-arrow-icon);
+        transition: all 0.4s ease;
+        font-size: 10px;
+        &:hover {
+            background-color: var(--cl_btn-arrow-hover);
+            color: var(--cl_btn-arrow-icon-hover);
+        }
+    }
+}
+
+.cs_pagination.cs_style_1 {
+    display: flex;
+    justify-content: center;
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        margin-top: 65px;
+        display: flex !important;
+        gap: 15px;
+        @include full-tablet {
+            //1024
+            margin-top: 15px;
+            gap: 8px;
+            justify-content: center;
+            padding: 20px;
+        }
+    }
+
+    li {
+        height: 10px;
+        width: 10px;
+        background-color: var(--cl_btn-dots);
+        border: none;
+        border-radius: 50%;
+        margin: 0;
+        cursor: pointer;
+        position: relative;
+        transition: all 0.3s ease;
+
+        &.slick-active {
+            background-color: var(--cl_btn-dots-active);
+            border-color: var(--cl_btn-dots-active);
+        }
+    }
+
+    button {
+        display: none;
+    }
+    &.cs_type_1 {
+        position: absolute;
+        z-index: 5;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 15%;
+        ul {
+            margin: 0;
+        }
+        li {
+            border-color: #fff;
+            &.slick-active {
+                border-color: var(--cl_accent);
+            }
+        }
+    }
+    &.cs_type_2,
+    &.cs_type_3 {
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            margin-top: 65px;
+            display: flex !important;
+            gap: 15px;
+            @include full-tablet {
+                //1024
+                margin-top: 15px;
+                gap: 8px;
+            }
+        }
+        li {
+            height: 10px;
+            width: 10px;
+            background-color: var(--cl_btn-dots);
+            border: none;
+            &.slick-active {
+                background-color: var(--cl_btn-dots-active);
+            }
+        }
+    }
+    &.cs_type_3 {
+        position: absolute;
+        right: -15px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: calc((100% - 1296px) / 2);
+        @include full-tablet {
+            width: calc((100% - 1116px) / 2);
+        }
+        @include small-desktop {
+            //1199
+            width: calc((100% - 936px) / 2);
+        }
+        @include full-tablet {
+            //1024
+            width: 100%;
+            position: initial;
+            transform: initial;
+        }
+        ul {
+            margin: 0;
+            flex-direction: column;
+            @include full-tablet {
+                //1024
+                flex-direction: row;
+                margin-top: 20px;
+            }
+        }
+    }
+    &.cs_type_3--left {
+        position: absolute;
+        left: -15px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: calc((100% - 1296px) / 2);
+        @include full-tablet {
+            width: calc((100% - 1116px) / 2);
+        }
+        @include small-desktop {
+            //1199
+            width: calc((100% - 936px) / 2);
+        }
+        @include full-tablet {
+            //1024
+            width: 100%;
+            position: initial;
+            transform: initial;
+        }
+        ul {
+            margin: 0;
+            flex-direction: column;
+            @include full-tablet {
+                //1024
+                flex-direction: row;
+                margin-top: 20px;
+                justify-content: center;
+                padding: 20px !important;
+            }
+        }
+    }
+    &.cs_type_4 {
+        position: absolute;
+        bottom: 423px;
+        width: 100%;
+    }
+    &.cs_color_1 {
+        li {
+            border-color: #fff;
+            &.slick-active {
+                border-color: var(--cl_accent);
+            }
+        }
+    }
+}
+
+.cs_slider_number.cs_style_1,
+.cs_slider_number.cs_style_2 {
+    span {
+        display: inline-block;
+        position: relative;
+    }
+    .cs_current_number {
+        color: var(--cl_accent);
+    }
+
+    .cs_slider_number_seperator {
+        display: inline-block;
+        background-color: var(--cl_corp);
+        transform: rotate(25deg);
+        position: relative;
+    }
+}
+.cs_slider_number.cs_style_1 {
+    position: absolute;
+    bottom: 6px;
+    right: calc((100vw - 1300px) / 2 / 2);
+    margin-right: -18px;
+    .cs_current_number {
+        top: -10px;
+        font-size: 50px;
+    }
+    .cs_total_numbers {
+        top: 10px;
+    }
+    .cs_slider_number_seperator {
+        height: 56px;
+        width: 1px;
+        top: 15px;
+    }
+    @include full-tablet {
+        right: calc((100vw - 1140px) / 2 / 2);
+    }
+    @include small-desktop {
+        //1199
+        right: 40px;
+        margin-right: 0;
+    }
+}
+.cs_slider_number.cs_style_2 {
+    font-size: 160px;
+    line-height: 1em;
+    padding-bottom: 80px;
+    .cs_current_number {
+        top: -35px;
+        font-size: 215px;
+    }
+    .cs_total_numbers {
+        top: 35px;
+    }
+    .cs_slider_number_seperator {
+        height: 240px;
+        width: 4px;
+        top: 70px;
+    }
+}
+.cs_hover_show_arrows {
+    .cs_slider_arrows.cs_style_1 {
+        .cs_left_arrow,
+        .cs_right_arrow {
+            opacity: 0;
+        }
+    }
+    &:hover {
+        .cs_slider_arrows.cs_style_1 {
+            .cs_left_arrow,
+            .cs_right_arrow {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.cs_slider_navigation {
+    @include full-tablet {
+        //1024
+        position: absolute;
+        z-index: 8;
+        bottom: 70px;
+        display: flex;
+        gap: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    @include medium-tablet {
+        bottom: 50%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0px 10px;
+    }
+    .cs_swiper_button_prev,
+    .cs_swiper_button_next,
+    .cs_swiper_button_prevV2,
+    .cs_swiper_button_nextV2 {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: all 0.3s ease;
+        z-index: 5;
+        color: var(--cl_btn-light);
+        font-size: 20px;
+        &:hover {
+            color: var(--cl_btn-light -hover);
+        }
+        &.swiper-button-disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+        @include full-tablet {
+            //1024
+            position: initial;
+            transform: initial;
+        }
+    }
+    .cs_swiper_button_prev,
+    .cs_swiper_button_prevV2 {
+        left: 6.6%;
+        @include small-desktop {
+            //1199
+            left: 3%;
+        }
+    }
+    .cs_swiper_button_next,
+    .cs_swiper_button_nextV2 {
+        right: 6.6%;
+        @include small-desktop {
+            //1199
+            right: 3%;
+        }
+    }
+}
+
+.swiper-slide {
+    overflow: hidden;
+    .cs_hero.cs_style_1 {
+        .cs_hero_text {
+            position: relative;
+            top: 10px;
+            opacity: 0;
+            transition: all 0.9s ease;
+            user-select: none;
+        }
+    }
+    &.swiper-slide-active {
+        .cs_hero.cs_style_1 {
+            .cs_hero_text {
+                top: 0;
+                opacity: 1;
+                transition: all 0.9s ease 0.9s;
+                max-width: 90%;
+                margin-left: 5%;
+            }
+        }
+    }
+}
+.slick-vertical {
+    &.cs_gallery_slider_nav {
+        margin-top: -12px;
+        margin-bottom: -12px;
+        .slick-slide {
+            border: none;
+            padding: 12px 0;
+        }
+        @include full-tablet {
+            //1024
+            margin-top: -5px;
+            margin-bottom: -5px;
+            .slick-slide {
+                border: none;
+                padding: 5px 0;
+            }
+        }
+    }
+
+    .cs_gallery_slider_thumb_mini {
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+        &::before {
+            content: '';
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            border: 2px solid var(--cl_accent);
+            border-radius: inherit;
+            opacity: 0;
+            transition: all 0.4s ease;
+        }
+    }
+    .slick-current {
+        .cs_gallery_slider_thumb_mini {
+            &::before {
+                opacity: 1;
+            }
+        }
+    }
+}
+.cs_left_arrow_gallery,
+.cs_right_arrow_gallery {
+    position: absolute;
+    height: 45px;
+    width: 70px;
+    border-radius: var(--btn_radius);
+    background: var(--cl_btn-arrow);
+    color: var(--cl_btn-arrow-icon);
+    top: 50%;
+    margin-top: -25px;
+    z-index: 2;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    &:hover {
+        background: var(--cl_btn-arrow-hover);
+        color: var(--cl_btn-arrow-icon-hover);
+    }
+}
+.cs_left_arrow_gallery {
+    left: 25px;
+}
+.cs_right_arrow_gallery {
+    right: 25px;
+}
+.cs_gallery_hover_show_nav {
+    .cs_left_arrow_gallery,
+    .cs_right_arrow_gallery {
+        opacity: 0;
+    }
+    &:hover {
+        .cs_left_arrow_gallery,
+        .cs_right_arrow_gallery {
+            opacity: 1;
+        }
+    }
+}
+.cs_gallery_slider_thumb_item_2 {
+    height: calc(100vh - 0px);
+    padding: 100px 0 50px;
+    max-height: 1100px;
+    @include full-tablet {
+        //1024
+        padding: 100px 0;
+        height: 100vh;
+        max-height: initial;
+    }
+
+    @include small-tablet {
+        //575
+        min-height: 500px;
+        .cs_hero_title {
+            br {
+                display: none;
+            }
+        }
+    }
+}
+.cs_gallery_slider_nav_2_wrap {
+    width: 100%;
+    position: absolute;
+    bottom: 35px;
+    @include medium-tablet {
+        //767
+        bottom: 25px;
+    }
+    .cs_price_per {
+        color: rgba(255, 255, 255, 0.7);
+        position: relative;
+        bottom: 4px;
+    }
+    .cs_price {
+        margin-top: 5px;
+    }
+}
+.cs_gallery_slider_nav_2 {
+    width: 480px;
+    margin-left: auto;
+    @include small-desktop {
+        //1199
+        width: 350px;
+    }
+    @include full-tablet {
+        //1024
+        width: 250px;
+    }
+    @include medium-tablet {
+        //767
+        margin-right: auto;
+    }
+    .slick-slide {
+        padding-left: 5px;
+        padding-right: 5px;
+        &.slick-current {
+            .cs_gallery_slider_thumb_mini_2 {
+                &::before {
+                    border-width: 2px;
+                    border-color: var(--cl_accent);
+                }
+            }
+        }
+    }
+    .slick-list {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+}
+.cs_gallery_slider_thumb_mini_2 {
+    height: 120px;
+    cursor: pointer;
+    position: relative;
+    @include small-desktop {
+        //1199
+        height: 80px;
+    }
+    @include full-tablet {
+        //1024
+        height: 60px;
+    }
+    &::before {
+        content: '';
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        border-radius: inherit;
+        transition: all 0.4s ease;
+    }
+}
+.cs_gallery_slider_nav_2_in {
+    display: flex;
+    align-items: center;
+    @include medium-tablet {
+        //767
+        flex-direction: column;
+        text-align: center;
+        justify-content: center;
+        gap: 25px;
+    }
+}
+.cs_gallery_slider_thumb_2 {
+    position: relative;
+    &:after {
+        background: linear-gradient(0, rgba(0, 0, 0, 0.6), transparent);
+        bottom: -2px;
+        content: '';
+        height: 30%;
+        position: absolute;
+        width: 100%;
+        @include medium-tablet {
+            //767
+            height: 50%;
+        }
+    }
+}
+.cs_left_arrow_gallery_2,
+.cs_right_arrow_gallery_2 {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+    z-index: 5;
+    color: var(--cl_accent);
+    &:hover {
+        color: #fff;
+    }
+}
+.cs_left_arrow_gallery_2 {
+    left: 5%;
+}
+.cs_right_arrow_gallery_2 {
+    right: 5%;
+}
+@include full-tablet {
+    // 1024
+    .cs_mobile_hide {
+        display: none !important;
+    }
+}
+@include min-full-tablet {
+    // 992
+    .cs_mobile_show {
+        display: none !important;
+    }
+}
+@include medium-tablet {
+    //767
+    .cs_mobile_hide_md {
+        display: none !important;
+    }
+}
+@include min-medium-tablet {
+    //768
+    .cs_mobile_show_md {
+        display: none !important;
+    }
+}
+/*--------------------------------------------------------------
+  19. Custom Slider
+----------------------------------------------------------------*/
+.cs_custom_slide_item {
+    width: 100%;
+    height: 520px;
+    border-radius: 5px;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    @media only screen and (min-width: 1025px) and (max-width: 1199px) {
+        height: 470px;
+    }
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+        height: 350px;
+    }
+    @include medium-tablet {
+        //767
+        height: 300px;
+    }
+}
+.cs_custom_slide_arrow_left,
+.cs_custom_slide_arrow_right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-505);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+        color: var(--cl_btn-arrow-hover);
+    }
+    @include full-tablet {
+        //1024
+        position: initial;
+    }
+}
+.cs_custom_slide_arrow_left {
+    left: calc((100vw - 1300px) / 2 / 2);
+    margin-left: -28px;
+    @include full-tablet {
+        left: calc((100vw - 1140px) / 2 / 2);
+    }
+    @include small-desktop {
+        //1199
+        left: calc((100vw - 860px) / 2 / 2);
+    }
+}
+.cs_custom_slide_arrow_right {
+    right: calc((100vw - 1300px) / 2 / 2);
+    margin-right: -28px;
+    @include medium-desktop {
+        right: calc((100vw - 1100px) / 2 / 2);
+    }
+    @include full-tablet {
+        right: calc((100vw - 1140px) / 2 / 2);
+    }
+    @include small-desktop {
+        //1199
+        right: calc((100vw - 860px) / 2 / 2);
+    }
+}
+.cs_custom_slide_arrows {
+    color: var(--cl_btn-arrow);
+    @include full-tablet {
+        //1024
+        display: flex;
+        justify-content: center;
+        gap: 15px;
+        padding-top: 60px;
+    }
+    @include medium-tablet {
+        //767
+        padding-top: 35px;
+    }
+}