src/css/blocks/splider.css - master - engineunity_sub/doxml_work_site

src/css/blocks/splider.css
214 строк5 KB
PauloChaser
move content from branch dev to master
12 фев 2025, 18:06
12 фев 2025, 18:06a2e2735

/*slider главный экран*/
.splider {
    margin-top: 80px;
    margin-bottom: 80px;
    /*background: white;*/
    overflow: hidden;
}

.splider__row.splider__row {
    overflow: unset;
    /*max-width: calc(1240px + 200px);*/
    width: 100%;
    /*padding: 0 100px;*/
    margin: 0 auto;
}

.splider__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.splide__track {
    /*margin-left: calc(0px - (100vw - 1240px / 2)) !important;*/
    /*margin-right: calc(0px - (100vw - 1240px / 2)) !important;*/
    /*padding-left: calc(0px + (100vw - 1240px / 2)) !important;*/
    /*padding-right: calc(0px + (100vw - 1240px / 2)) !important;*/
    background-color: white;
}

.splide__arrows {
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*align-items: center;*/
    /*grid-gap: 16px;*/
    width: 100%;
}

.splide__arrow.splide__arrow {
    width: 60px;
    height: 60px;
    position: absolute;
    opacity: 0.4;
    aspect-ratio: 1;
    background-color: var(--gray-2);
}

.splide__arrow--next.splide__arrow--next {
    right: 0;
    transform: translateX(50%);
}

.splide__arrow--prev.splide__arrow--prev {
    left: 0;
    transform: translateX(-50%);
}

.splide__arrow--prev.splide__arrow--prev,
.splide__arrow--next.splide__arrow--next {
    /*left: unset;*/
    /*right: unset;*/
    transition: 0.3s ease;
}

.splide__arrow--prev::before,
.splide__arrow--next::before {
    /*content: '';*/
    position: absolute;

    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.splide__arrow--prev::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z"/></svg>');
}

.splide__arrow--next::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
}

.splide li {
    border: 1px solid var(--gray-2);
    border-radius: 12px;
    padding: 12px;
    max-width: 80%;
}

.splide li:hover {
    border-color: var(--blue);
}

.splide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width: 991px) {
    .splider {
        padding-left: 0;
        padding-right: 0;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .splider__row.splider__row {
        overflow: unset;
        /*max-width: calc(1240px + 80px);*/
        width: 100%;
        /*padding: 0 40px;*/
        margin: 0 auto;
    }

    .splider__heading {
        padding-left: 20px;
        padding-right: 20px;
    }

    .splide li {
        border-radius: 2px;
        max-width: none;
    }

    .splide__track {
        /*margin-left: calc(0px - (100vw - 1140px / 2)) !important;*/
        /*margin-right: calc(0px - (100vw - 1140px / 2)) !important;*/
        /*padding-left: calc(0px + (100vw - 1140px / 2)) !important;*/
        /*padding-right: calc(0px + (100vw - 1140px / 2)) !important;*/
    }

    .splide__arrow.splide__arrow {
        width: 60px;
        height: 500px;
        position: absolute;
        opacity: 0.1;
        aspect-ratio: 1;
        background-color: var(--gray-2);
        border-radius: 0;
    }

    .splide__arrow--next.splide__arrow--next {
        right: 0;
        transform: translate(0, 0);
        bottom: 0;
        top: unset;
    }

    .splide__arrow--prev.splide__arrow--prev {
        left: 0;
        transform: translate(0, 0);
        bottom: 0;
        top: unset;
    }

}

@media screen and (max-width: 950px) {
    .splider {
        margin-top: 60px;
        margin-bottom: 30px;
    }

    .splider__row.splider__row {
        overflow: unset;
        max-width: none;
        width: 100%;
        /*padding: 0 40px;*/
        margin: 0 auto;
    }

    .splide__track {
        /*margin-left: -20px !important;*/
        /*margin-right: -20px !important;*/
        /*padding-left: 20px !important;*/
        /*padding-right: 20px !important;*/
    }
}

@media screen and (max-width: 768px) {
    .splider__row.splider__row {
        padding: 0;
    }

    .splide__track {
        /*margin-left: -20px !important;*/
        /*margin-right: -20px !important;*/
        /*padding-left: 20px !important;*/
        /*padding-right: 20px !important;*/
    }

    .splider__title {
        margin-left: 20px;
    }

    .splide li {
        max-width: unset;
        border-radius: unset;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .splide__arrow.splide__arrow {
        height: 300px;
    }

}

/*END - slider главный экран*/