ctt-babylon 0.9.6 → 0.9.8

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

@@ -1,876 +0,0 @@
-@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;
-    }
-}