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/layout/header/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// LAYOUT - Minicart
// ==============================================

//
//  Configuration
//  _____________________________________________

$minicart-width:                100%;
$minicart-picture-height:       120px;
$minicart-min-height:           150px;
$minicart-padding:              10px;
$minicart-items-full-width:     true;
$minicart-items-delimiter:      1px solid $c-grey;
$minicart-debug-mode:           false;

//
//  Minicart menu
//  _____________________________________________

.sticky .minicart-wrapper {
    .counter.qty {
        top: 15px;
    }
}

.minicart-wrapper {
    margin-right: -10px;

    &.desktop {
        display: none;
    }

    @include breakpoint(xl) {
        margin-right: -20px;

        &.desktop {
            display: flex;
        }

        &.mobile {
            display: none;
        }
    }

    // Cart button
    > .action {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        padding: 10px 20px;
        color: $c-blue-dark;

        &.active {
            color: $c-blue;

            &:before,
            &:after {
                opacity: 1;
                transform: translateX(-50%) translateY(-10px);
            }
        }

        // Cart icon mobile
        &::before {
            @extend %icon-icomoon;
            content: "\e90d";
            font-size: 2.8rem;
            margin-right: 8px;
        }


        @include breakpoint(only-xl) {
            right: -5px;
            width: 40px;
            text-indent: -9999px;

            &::before {
                font-size: 1.8rem;
                text-indent: 0;
            }

            > .text::before {
                display: none;
            }
        }

        @include breakpoint(xl) {

            // Icon triangle
            &::before,
            &::after {
                display: inline-block;
                position: absolute;
                z-index: 2;
                content: "";
                left: 50%;
                top: 100%;
                transform: translateX(-50%) translateY(-25px);
                width: 0;
                height: 0;
                opacity: 0;
                border-style: solid;
                border-width: 0 10px 10px 10px;
                transition: transform .3s linear;
                margin-right: 0; // reset ::before icon mobile
            }

            &:before {
                border-color: transparent transparent $c-grey transparent;
            }

            &:after {
                border-color: transparent transparent $c-white transparent;
                margin-top: 1px;
            }
        }

        > .text {
            font-size: 1.3rem;
            font-weight: $fw-roboto-medium;
            display: flex;
            align-items: center;

            &::before {
                @extend %icon-icomoon;
                content: "\e90d";
                font-size: 2.8rem;
                margin-right: 8px;
            }
        }

    }

    .counter {
        // Counter
        &.qty {
            display: flex;
            height: 20px;
            width: 20px;
            position: absolute;
            top: 22px;
            left: 35px;
            align-items: center;
            justify-content: center;
            padding: 4px;
            color: $c-white;
            font-weight: bold;
            font-size: 1.1rem;
            border-radius: 50%;
            background-color: $c-pink;
            transition: background-color .2s;

            // Hide qty if cart is empty
            &.empty {
                display: none;
            }

            @include breakpoint(only-xl) {
                right: -6px;
                text-indent: 0;
            }
        }

        .counter-label {
            @extend .visually-hidden;
        }
    }
}

//
//  Minicart popin
//  _____________________________________________

// Override Ui dialog widget flex container
.minicart-wrapper .ui-dialog > *[data-role="dropdownDialog"] {
    display: block;
}

.block-minicart {

    @include breakpoint(only-xs) {
    }


    // Empty cart
    .minicart-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: $minicart-min-height;
        margin-bottom: $minicart-padding;
    }
}

//
//  Minicart header
//  _____________________________________________

.minicart-header {

    // Title
    .block-title {
        margin-bottom: 16px;
        color: $c-pink;
        text-align: left;

        .text {
            color: $c-blue-dark;
            margin-right: 10px;
        }
    }
}

//
//  Minicart content
//  _____________________________________________

.minicart-content {

    // Sub title
    .subtitle {
        @extend .visually-hidden;
    }

    // Table layout
    table {
        table-layout: fixed;

        &,
        thead,
        tbody,
        tr {
            width: 100%;
        }

        tr,
        th,
        td {
            border: none;
            vertical-align: middle;
            text-align: center;
        }

        th {
            background: none;
            color: $c-blue;
            font-size: 1.4rem;
        }

        td.item {
            text-align: left;
        }

        .col {

            &.item {
                width: 40%;
                position: relative;
                padding-left: 15%;
            }

            &.status {
                width: 20%;
            }
            &.price {
                width: 10%;
            }
            &.qty {
                width: 100px;
            }
            &.subtotal {
                width: 10%;
            }
            &.actions {
                width: 60px;
            }
        }
    }


    // Items
    .minicart-items-wrapper {
        height: auto !important;
        overflow: auto;
        max-height: 425px;

        @if $minicart-items-full-width {
            //margin: 0 (-$minicart-padding);
        }

        // Products list
        .minicart-items {
            border: $minicart-items-delimiter;
            li {
                + li {
                    border-top: $minicart-items-delimiter;
                }
            }
        }
    }

    // Item
    .product-item {

        .product-item-details {
            display: flex;
            align-items: center;
            min-height: $minicart-picture-height;
        }


        // Title
        .product-item-name {
            font-size: 1.6rem;
            font-weight: $fw-roboto-medium;
            margin-bottom: 10px;
        }

        // Status
        .status-title,
        .state-new,
        .state-used,
        .state-refurbished,
        .state-exchange {
            margin: 0 auto;
            width: 130px;
        }

        // Stock
        .stock {
            &::after {
                content:"-";
                margin: 0 5px;
            }
        }

        // Options
        .product.options {
            @extend %collapsible-inline;

            // reset collapsible margin
            &> [data-role="content"] {
                margin-top: 0;
            }

            &:not(.list) {
                margin-top: 10px;
            }

            .list {
                @include clearer;
                font-size: 1.4rem;

                .label,
                .values {
                    float: left;
                    margin-top: 6px;
                }

                .label {
                    clear: left;
                    font-weight: bold;
                    margin-right: 6px;

                    &::after {
                        content: " :";
                    }
                }
            }
        }

        // Price
        .product-item-pricing {

            .price-including-tax {
                display: none;
            }
        }

        // Actions wrapper
        .product-item-actions {

            // Actions
            .actions {
                text-align: center;

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

        // Quantity
        .details-qty {

            > label {
                margin-right: 10px;
            }

            > input {
                max-width: 70px;
                margin-right: 10px;
                padding-top: 6px;
                padding-bottom: 6px;
            }
        }
    }

    // Visual
    .product-item-photo {
        display: block;
        width: $minicart-picture-height;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .product-image-wrapper {
        padding-bottom: 0 !important;
    }
}

//
//  Minicart footer
//  _____________________________________________

.minicart-footer {
    margin-bottom: $minicart-padding;
    max-width: 1060px;

    // Total
    .subtotal {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 20px 0;
        font-size: 1.8rem;

        .label {
            color: $c-blue;
            font-size: 1.4rem;
        }

        .amount {
            margin-left: 10px;
            color: $c-pink;
            font-weight: $fw-roboto-bold;
            font-size: 1.6rem;
        }

        .price-including-tax {
            display: none;
        }
    }

    // Footer actions
    .actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        > .primary {
            margin-right: 10px;

            .action {
                text-decoration: underline;
                margin-right: 20px;
            }
        }

        > .secondary .action {
            @extend .btn--pink;
        }

        .stripe-payments-express-minicart {
            margin-bottom: 5px;
            margin-top: 0;
        }
    }
}

// Debug mode
@if $minicart-debug-mode {
    .ui-widget-content { opacity: 1 !important; }
    .ui-dialog { display: block !important; }
    .block-minicart { visibility: visible !important; }
}