Sid Gifari Advanced File Manager

✏️ Editing: tabs.scss

.pxl-tabs {
    .pxl-tab--title {
    	display: inline-flex;
        cursor: pointer;
        @include transition(all 250ms linear 0ms);
        position: relative;
    }
    .pxl-tab--content {
        display: none;
        width: 100%;
    }
    .elementor-section.elementor-section-stretched {
        width: auto !important;
        left: 0 !important;
    }
    .pxl-tabs--elementor > .elementor {
        margin: 0 -15px;
    }
    &.tab-effect-fade {
        .pxl-tab--content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100% !important;
            display: block !important;
            opacity: 0 !important;
            visibility: hidden;
            @include transition(all .25s cubic-bezier(.645,.045,.355,1));
            &.active {
                position: static;
                opacity: 1 !important;
                visibility: visible;
            }
        }
        .pxl-tabs--content {
            position: relative;
        }
    }
}

.pxl-tabs1 {
    &.style-1 {
        .pxl-item--shape1 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -2;
            background-color: #e4e5e9;
            @include transition(all 300ms linear 0ms);
            span {
                border-width: 30px;
                border-style: solid;
                border-color: transparent transparent transparent #e4e5e9;
                position: absolute;
                top: 0;
                right: -60px;
                @include transition(all 300ms linear 0ms);
            }
            &:before, &:after {
                content: '';
                border-width: 30px;
                border-style: solid;
                position: absolute;
                @include transition(all 300ms linear 0ms);
            }
            &:before {
                top: 0;
                left: -30px;
                border-color: #e4e5e9 #e4e5e9 transparent transparent;
            }
            &:after {
                bottom: 0;
                left: -30px;
                border-color: transparent transparent #e4e5e9;
            }
        }
        .pxl-item--shape2 {
            @include transition(all 300ms linear 0ms);
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            z-index: -1;
            background-color: #fff;
            span {
                border-width: 29px;
                border-style: solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0;
                right: -58px;
            }
            &:before, &:after {
                content: '';
                border-width: 29px;
                border-style: solid;
                position: absolute;
            }
            &:before {
                top: 0;
                left: -28px;
                border-color: #fff #fff transparent transparent;
            }
            &:after {
                bottom: 0;
                left: -28px;
                border-color: transparent transparent #fff;
            }
        }
        .pxl-tab--title {
            @extend .ft-theme-default;
            font-size: 18px;
            font-weight: 700;
            color: #01062e;
            padding: 0 20px;
            position: relative;
            line-height: 60px;
            z-index: 1;
            margin-bottom: 10px;
            margin-right: 15px;
            margin-left: 30px;
            @media #{$max-lg} {
                padding: 0 8px 0 20px;
            }
            @media #{$max-sm} {
                font-size: 16px;
                padding: 0 4px 0 12px;
                margin-right: 6px;
                margin-left: 26px;
            }
            &:hover, &.active {
                color: #fff;
                .pxl-item--shape1 {
                    background-color: $primary_color;
                    span {
                        border-color: transparent transparent transparent $primary_color;
                    }
                    &:before {
                        border-color: $primary_color $primary_color transparent transparent;
                    }
                    &:after {
                        border-color: transparent transparent $primary_color;
                    }
                }
                .pxl-item--shape2 {
                    opacity: 0;
                }
            }
        }
        .pxl-tabs--title {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .pxl-tabs--content {
            color: #585858;
        }
    }
    &.style-2 {
        .pxl-title--wrap {
            display: inline-flex;
            background-color: #fff;
            padding: 6px;
            border-radius: 50px;
            box-shadow: 0 0 18px rgba(#6d6d6d, 0.13);
        }
        .pxl-tabs--title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            margin-bottom: 50px;
            @media #{$max-sm} {
                justify-content: center;
            }
        }
        .pxl-tab--title {
            padding: 0 18px;
            display: inline-block;
            line-height: 38px;
            font-size: 16px;
            font-weight: 700;
            color: #01062e;
            position: relative;
            z-index: 1;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 38px;
                z-index: -1;
                @include background-horizontal($gradient_color_from, $gradient_color_to);
                @include transition(all 300ms linear 0ms);
                opacity: 0;
            }
            &.active {
                color: #fff;
                &:before {
                    opacity: 1;
                }
            }
        }
    }
}

.pxl-banner-tabs1 {
    .pxl-tabs--content {
        min-height: 585px;
        position: relative;
        z-index: 1;
        .pxl-tab--content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0;
            @include transition(all 300ms linear 0ms);
            &.active {
                opacity: 1;
            }
        }
        .pxl-content--image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 70px 0 70px 0;
            overflow: hidden;
        }
        .pxl-content--holder {
            position: absolute;
            top: 0;
            left: -54px;
            height: 100%;
            background-color: #15333d;
            z-index: -2;
            border-radius: 70px 0 0 0;
            width: 145px;
        }
        .pxl-content--highlight {
            font-size: 22px;
            line-height: 54px;
            white-space: nowrap;
            color: #fff;
            font-weight: 700;
            @extend .ft-theme-default;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 55px;
            left: 54px;
            transform: rotate(-90deg);
            transform-origin: bottom left;
            i {
                font-size: 36px;
                color: $primary_color;
                transform: rotate(90deg);
            }
        }
    }
    .pxl-tabs--title {
        position: absolute;
        right: 12px;
        top: 50%;
        @include transform(translate(0, -50%));
        z-index: 9;
        max-width: 225px;
        background-color: #fff;
        box-shadow: 0 0 43px rgba(#0c0c0c, 0.19);
        @media #{$max-sm} {
            max-width: 185px;
        }
        .pxl-tab--title {
            display: block;
            text-align: center;
        }
        .pxl-title--icon {
            line-height: 1;
            font-size: 27px;
            color: $primary_color;
            margin-bottom: 4px;
        }
        .pxl-title--text {
            margin-bottom: 9px;
            font-size: 20px;
            @include transition(all 300ms linear 0ms);
        }
        .pxl-title--subtitle {
            font-size: 15px;
            color: #0e0e0e;
            line-height: 1.3333333;
            @include transition(all 300ms linear 0ms);
        }
        .pxl-tab--title {
            padding: 26px 10px;
            z-index: 1;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #15333d;
                z-index: -1;
                @include transition(all 300ms linear 0ms);
                opacity: 0;
            }
            &.active {
                &:before {
                    opacity: 1;
                    left: -12px;
                    right: -12px;
                }
                .pxl-title--text, .pxl-title--subtitle {
                    color: #fff;
                }
            }
        }
    }
    .shape-img-left {
        position: absolute;
        top: 85px;
        left: -85px;
        z-index: -1;
    }
    .shape-img-right {
        position: absolute;
        bottom: -23px;
        right: -30px;
        z-index: -1;
    }
    .pxl-tabs--inner {
        position: relative;
        padding-right: 166px;
        padding-left: 54px;
        @media #{$max-lg} {
            padding-right: 80px;
        }
        @media #{$max-sm} {
            padding-right: 45px;
        }
    }
}

body.rtl {
    .pxl-tabs1.style-1 .pxl-item--shape1, .pxl-tabs1.style-1 .pxl-item--shape2 {
        transform: scaleX(-1);
    }
}

📁 File Manager Pro