• File: _slider.scss
  • Full Path: /home/monpetu/www/leoreno.fr/wp-content/themes/buildexo/assets/scss/components/_slider.scss
  • Date Modified: 10/29/2024 2:43 PM
  • File size: 3.6 KB
  • MIME-type: text/plain
  • Charset: utf-8
.tx-slider-two {
    .tparrows.tp-leftarrow:before {
        font-family: 'Font Awesome 5 Pro';
        font-weight: 300;
        content: "\f177";
        @include transform(translateY(-15px) rotate(90deg));
        @include transition(.3s);
    }
    .tparrows.tp-rightarrow:before {
        font-family: 'Font Awesome 5 Pro';
        font-weight: 300;
        content: "\f178";
        @include transition(.3s);
        @include transform(translateY(15px) rotate(90deg));
    }
    .tparrows {
        width: 35px;
        height: 35px;
        background-color: #fff;
        @include border-radius(50%);
        display: flex;
        align-items: center;
        justify-content: center;
        @include transition(.3s);
        &:hover {
            background-color: var(--color-primary-2);
        }
        &.tp-leftarrow {
            &:hover::before {
                color: var(--color-white);
                @include transform(translateY(-18px) rotate(90deg));
            }
        }
        &.tp-rightarrow {
            &:hover::before {
                color: var(--color-white);
                @include transform(translateY(18px) rotate(90deg));
            }
        }
        &::before {
            font-size: 34px;
            color: var(--color-primary-2);
        }
        @include respond(lg) {
            display: none;
        }
    }
}

.tx-slider-three {
    #slider-2-slide-7-layer-15,
    #slider-2-slide-9-layer-15 {
        position: absolute;
        margin-left: -52px;
        @include respond(lg) {
            margin-left: -40px;
        }
        @include respond(md) {
            margin-left: -15px;
        }
    }
    .fas.fa-search::before {
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
        content: "\f002";
    }
    span .far::before {
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        content: "\f324"; 
    }
    
    .tparrows {
        position: relative;
        background-color: transparent;
        @include respond(lg) {
            display: none;
        }
        &::after {
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            content: "\f060";
            font-size: 13px;
        }
        &::before,
        &::after {
            position: absolute;
            width: 68px;
            height: 78px;
            background-color: #fff;
            color: var(--color-white);
            z-index: -1;
            left: -25px;
            top: -34px;
            clip-path: polygon(0 0px, calc(100% - 10px) 0px, 100% 100%, 10px 100%);
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            font-size: 13px;
        }
        &::after {
            top: 0;
            background-color: var(--color-primary);
            left: -28px;
            top: -25px;
            content: "\f061";
        }
        &.tp-rightarrow {
            &::before,
            &::after {
                clip-path: polygon(10px 0%, 100% 0, calc(100% - 10px) 100%, 0% 100%);
            }
            &::before {
                left: -31px;
            }
        }
        &:hover {
            &::before {
                background-color: var(--color-primary);
            }
            &::after {
                background-color: #008080;
            }
        }
    }
}