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 - Dialog
// ==============================================

//
//  Configuration
//  _____________________________________________

$dropdown-padding:              40px;
$dropdown-close-color:          $c-blue;
$dropdown-close-size:           1.8rem;

//
//  Dropddown Dialog
//  _____________________________________________

// Use to dropwdown dialog position
.page-header > .header {
    position: relative;
}

// Hide Dropdown Dialog Content Before Ui Dialog Loading
// Can't Display none cause this element is included inside UI Dialog Tag
.ui-dialog {
    > *[data-role="dropdownDialog"] {
        @extend .reset-visually-hidden;
    }
}

*[data-role="dropdownDialog"] {
    @extend .visually-hidden;
}

// Display Dropddown Dialog
.active .ui-dialog {
    max-height: calc(80vh);
    border-bottom: 1px solid $c-grey; // IE11 Fix
    opacity: 1;
    visibility: visible;
    transform: translateY(100%);

}

// Dropddown Dialog
.ui-dialog {
    display: flex !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translateY(calc(100% - 15px));
    padding: $dropdown-padding/2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: opacity .2s linear, transform .3s linear;
    background-color: $c-white;

    @include breakpoint(md) {
        padding: $dropdown-padding;
        box-shadow: 0 -1px 3px 0 rgba(0,0,0,0.11);
    }

    // Dropdown Close CTA
    .action.close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px;
        color: $dropdown-close-color;
        font-size: $dropdown-close-size;

        @include breakpoint(md) {
            top: 10px;
            right: 10px;
        }

        &:hover {
            cursor: pointer;
        }

        // Close icon
        &::before {
            @extend %icon-icomoon;
            content: "\e913";
        }

        > span {
            @extend .visually-hidden;
        }
    }

    > *[data-role="dropdownDialog"] {
        display: flex;
        max-width: 1150px;
        margin: 0 auto;
        width: 100%;
    }
}

// Ui Dropddown Dialog Content
.ui-dialog-content {
    width: 100%;
    overflow: auto;
}

// Ui Dropdown Dialog Inside Nav Section Mobile
@include breakpoint(only-md){
    .nav-sections {
        .active .ui-dialog {
            transform: translate(0, 0);
        }
        .ui-dialog {
            padding: 0 15px;
            top: 0;
            transform: translate(100%, 0);
            opacity: 1;
            transition: transform .3s linear;
            z-index: 5;

            > *[data-role="dropdownDialog"] {
                flex-direction: column;
            }
        }
    }
}