Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/modules/ui/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// UI - Tabs
// ==============================================

// Configuration

$ui-tabs-background-color:  $c-blue;
$ui-tabs-border-color:      $c-blue-dark;
$ui-tabs-border-color-desktop: darken($c-white, 10%);

.product.data.items {
    position: relative;
    z-index: 1;
    display: block; // Remove display flex
    padding: 0;

    &:before,
    &:after {
        content: '';
        display: table;
    }

    &:after {
        clear: both;
    }

    > .item {
        &.content {
            display: block;
            float: right;
            width: 100%;
            padding: 55px 72px 55px 50px;
            margin-left: -100%;
            margin-top: 54px;

            @include breakpoint(only-md) {
                float: none;
                padding: 10px 15px 30px;
                margin: 0 0 5px;
            }

            @include breakpoint(md) {
                border: 1px solid $ui-tabs-border-color-desktop;
            }

            &:before,
            &:after {
                display: table;
                content: '';
            }

            &:after {
                clear: both;
            }

            &.active {
                display: block;
            }
        }

        &.title {
            float: left;
            width: auto;
            margin: 0 -1px 0 0;

            @include breakpoint(only-md) {
                float: none;
                width: 100%;
                margin: 0 0 5px;
            }

            > .switch {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                padding: 1px 10px 1px 0;
                height: 40px;
                line-height: 40px;
                color: $c-blue-dark;
                font-size: 1.6rem;
                font-weight: $fw-roboto-bold;
                border-bottom: 1px solid $ui-tabs-border-color;

                @include breakpoint(only-md) {
                    justify-content: space-between;
                    transition: color .3s linear;

                    &:after {
                        content:"\e90c";
                        display: block;
                        @include icon-icomoon;
                        transition: transform .3s linear;
                    }
                }

                @include breakpoint(md) {
                    justify-content: center;
                    height: 54px;
                    padding: 10px 35px;
                    font-weight: $fw-roboto-regular;
                    border-bottom: none;
                    font-size: 1.8rem;
                }
            }

            &.active {
                > .switch {
                    font-weight: bold;

                    @include breakpoint(only-md) {
                        color: $c-blue;
                        &:after {
                            transform: scale(-1);
                        }
                    }

                    @include breakpoint(md) {
                        background: $ui-tabs-background-color;
                        border-bottom: 1px solid $ui-tabs-background-color;
                        color: $c-white;
                        @include triangle(bottom);

                        &:after{
                            color: $c-blue;
                            left: 50%;
                            top: 100%;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
        }
    }
}

/* Grid support
-------------------------- */
@supports (display: grid) {

    .product.data.items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "title1 title2 title3 . . . . . ."
        "content content content content content content  content content content";

        @include breakpoint(only-md) {
            display: block;
        }

        > .item {

            &.content {
                grid-area: content;
                float: none;
                margin-left: 0;
                margin-top: -1px;
            }

            &.title {
                float: none;
                width: auto;
                margin: 0 -1px 0 0;

                &:first-child {
                    grid-area: title1;
                }

                &:nth-child(3) {
                    grid-area: title2;
                }

                &:nth-child(5) {
                    grid-area: title3;
                }

                > .switch {
                    padding: 1px 10px 1px 0;

                    @include breakpoint(md) {
                        text-align: center;
                    }
                }

                @include breakpoint(only-md) {
                    margin: 0 0 5px;
                }
            }
        }
    }
}