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/checkout/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// CHECKOUT - Cart
// ==============================================

//
//  Configuration
//  _____________________________________________

$checkout-summary-width:                28%;
$checkout-summary-margin:               30px;
$checkout-summary-padding:              20px 3%;
$checkout-summary-bg-color:             #FAFAFA;
$checkout-mobile-product-visual-width:  20vw;

//
//  Global cart page
//  _____________________________________________

.checkout-cart-index {

    .page-main {
        @include breakpoint(lg) {
            padding-top: 30px;
        }
    }

    .page-title-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .page-title {
        @extend .title-1;
        margin-bottom: 0;
    }

    .cart-header-items-count {
        font-size: 2rem;
        margin-left: 10px;

        @include breakpoint(md) {
            font-size: 2.8rem;
        }
    }

    .page-footer {
        @include breakpoint(only-md) {
            padding-bottom: 80px;
        }
    }
}

//
//  Layout
//  _____________________________________________

@include breakpoint(only-md) {
    .form-cart,
    .cart-summary {
        margin-bottom: 20px;
    }
}

@include breakpoint(md) {
    .cart-summary {
        float: right;
        width: 35%;
        margin-left: $checkout-summary-margin;
        position: relative;

        &::before {
            content:"";
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background-color: $c-white;
        }

        // Set position relative to display over before element
        .checkout-methods-items,
        .savecart-cart-action {
            position: relative;
        }
    }

    .form-cart {
        float: left;
    }

    .form-cart,
    .cart-discount {
        width: calc(100% - 35% - #{$checkout-summary-margin});
    }

    .cart-discount {
        clear: left;
        @include clearer;
    }
}

@include breakpoint(lg) {
    .cart-summary {
        width: $checkout-summary-width;
    }

    .form-cart,
    .cart-discount {
        width: calc(100% - #{$checkout-summary-width} - #{$checkout-summary-margin});
    }
}

//
//  Cart
//  _____________________________________________

.cart-container {

    @include breakpoint(only-md) {
        display: flex;
        flex-direction: column;

        //Reorder children element
        .cart-summary {
            order: 1;
        }
        .form-cart {
            order: 2;
        }
        #gift-options-cart {
            order: 3;
        }
    }

    @include breakpoint(md) {
        margin-top: 20px;
        position: relative;
        padding-bottom: 60px;
        @include clearer;
    }

    // Summary
    .cart-summary {
        padding: 20px 15px;
        background-color: $checkout-summary-bg-color;
        color: $c-blue-dark;

        @include breakpoint(xl) {
            padding: $checkout-summary-padding;
        }

        > .summary.title {
            @extend .title-2;
            display: block;
            padding-bottom: 10px;
            text-align: center;
            border-bottom: 1px solid $c-grey;
            font-size: 1.8rem;

            @include breakpoint(sm) {
                font-size: 2.2rem;
            }

            @include breakpoint(md) {
                font-size: 1.8rem;
            }

            @include breakpoint(lg) {
                font-size: 2.2rem;
            }
        }

        > .shipping {
            .fieldset {
                // Reset Common field css
                .note + .field {
                    margin-top: 0;
                }

                &.rate {
                    .item-title {
                        font-size: 1.4rem;
                        font-weight: $fw-roboto-medium;

                        @include breakpoint(md) {
                            font-size: 1.6rem;
                        }
                    }

                    .item-options {
                        .label {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 0;

                            .price {
                                font-size: 1.8rem;
                                font-weight: $fw-roboto-bold;
                            }

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

            // Subtotal
            .totals.sub {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: $fw-roboto-bold;
                line-height: 1.6;

                .mark {
                    &::after {
                        content: ":";
                        margin: 0 5px;
                    }
                }

                .amount {
                    font-size: 1.8rem;
                }
            }

            .saved-amount {
                font-size: 1.2rem;
                color: $c-blue;
            }

            // Discount code
            .discount-code {
                margin-bottom: 10px;

                .payment-option-title {
                    @extend .link-1;
                    font-weight: $fw-roboto-bold;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    font-size: 1.4rem;
                }

                .payment-option-inner label {
                    display: none;
                }

                .actions-toolbar {
                    text-align: center;
                }
            }
        }

        // Shipping form
        #shipping-zip-form {
            display: flex;
            align-items: flex-start;
            border-top: 1px solid $c-grey;
            padding-top: $gutter;

            // Icon
            &::before {
                margin-right: 15px;
                margin-top: 20px;
                @extend %icon-icomoon;
                content:"\e93e";
                font-size: 2.5rem;
                color: $c-blue;
            }

            // Estimate content
            .fieldset.estimate {
                display: flex;
                flex-direction: column;
                flex: 1 1 0;

                br {
                    display: none;
                }

                // Field note excluded
                div.field {
                    & + .field {
                        margin-bottom: 0;
                        margin-top: 0;
                    }

                    &[name$=".postcode"] .input-text{
                        width: 90px;
                    }

                    .label {
                        margin-bottom: 5px;
                        margin-top: 0px;
                    }
                }

                .field.note {
                    display: none;
                }

                input {
                    padding: 7px 10px;
                    background-color: transparent;
                }

                select {
                    padding: 6px 40px 7px 10px;
                    background-color: transparent;
                    margin-bottom: 10px;
                    max-width: 200px;
                }

                .message {
                    margin-top: 10px;

                    &.warning {
                        font-size: 1.2rem;
                        color: $c-error;
                    }
                }
            }

            legend, br {
                @extend .visually-hidden;
            }
        }

        // Shipping methods form
        #co-shipping-method-form {
            padding: $gutter 0;
            border-bottom: 1px solid $c-grey;

            .source-info {
                @extend .visually-hidden;
            }

            .item-options,
            .item-options + .item-title {
                margin-top: $gutter/2;
            }

            .item-options .message {
                font-size: 1.2rem;
                padding-right: 25px;
            }
        }


        // Shipping methods list
        > .checkout.methods {
            @include breakpoint(only-md) {
                position: fixed;
                bottom: 40px;
                left: 0;
                right: 0;
                z-index: 2;
            }

            .action {
                &.checkout {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 5px 30px;
                    min-height: 40px;

                    @include breakpoint(only-md) {
                        width: 100%;
                        border-radius: 0;
                    }

                    @include breakpoint(md) {
                        margin: 0 auto;
                        padding: 10px 30px;
                    }

                    @include breakpoint(xl) {
                        font-size: 1.9rem;
                    }
                }

                &.multicheckout {
                    text-align: center;
                    @extend .link-1;
                }
            }

            // Stripe cta
            .StripeElement {

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


        // Shipping totals
        .totals.shipping.excl {

            .label {
                font-weight: $fw-roboto-medium;
            }
        }

        // Totals

        > .cart-totals {

            @include breakpoint(md) {
                margin-bottom: $gutter/2;
            }

            // Reorder children
            table.totals tbody {
                display: flex;
                flex-direction: column;

                .totals {

                    &.shipping {
                        order: 1;
                    }

                    & {
                        order: 2;
                    }

                    &.grand {
                        order: 3;
                    }
                }
            }

            table.data.totals tr th,
            table.data.totals tr td,
            table.data.table-totals tr th,
            table.data.table-totals tr td {
                border-color: $c-grey;
                font-size: 1.4rem;
                padding: 12px 0;

                @include breakpoint(md) {
                    font-size: 1.6rem;
                    padding: 20px 0;
                }
            }

            .grand.totals {
                @include breakpoint(md) {
                    font-size: 1.8rem;
                }

                .price {
                    font-size: 1.8rem;

                    @include breakpoint(md) {
                        font-size: 2.2rem;
                    }
                }
            }

            .price {
                font-weight: $fw-roboto-bold;
                font-size: 1.6rem;

                @include breakpoint(md) {
                    font-size: 1.8rem;
                }
            }
        }
    }

    // Discount
    .cart-discount + div {
        margin-top: 40px;
    }

    .block.discount {
        @extend %collapsible-inline;
    }

    // Cart main action
    #update_cart_action {
        @extend .visually-hidden;
    }

    .savecart-cart-action {
        @extend %reset-cta;
        @extend .link-1;
        display: block;
        font-weight: $fw-roboto-bold;
        padding-top: $gutter/2;
        padding-bottom: $gutter/2;
        text-align: center;
        width: 100%;

        // Sticky position
        @include breakpoint(only-md) {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            background-color: $c-white;
        }
    }
}

//
//  Table orders
//  _____________________________________________

.cart {
    width: 100%;
    margin-bottom: $gutter;

    tr,
    td {
        border: none;
    }

    tr.item-info {
        border: 1px solid $c-grey;
    }

    th,
    td {
        &:not(.item) {
            text-align: center;
        }

        @include breakpoint(lg) {
            &.item {
                display: flex;
                max-width: 420px;
            }
        }
    }

    // Table header
    > thead {
        @include breakpoint(only-lg) {
            display: none;
        }

        > tr {
            > th {
                padding: 15px 5px;
                font-weight: $fw-roboto-medium;
                font-size: 1.4rem;
                text-align: left;
                white-space: nowrap;
                background: none;
                border: none;
                color: $c-blue-dark;

                @include breakpoint(xl) {
                    padding: 15px 10px;
                }

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

                &.item {
                    justify-content: center;

                    @include breakpoint(md) {
                        padding-left: 20%;
                    }
                }
            }
        }
    }

    // Table content
    > tbody {
        background-color: $c-white;

        > tr {
            &.item-info {
                > td {
                    vertical-align: middle;
                    padding: 25px 5px;
                    font-size: 1.4rem;

                    @include breakpoint(xl) {
                        padding: 25px 10px;
                    }

                    // Product
                    &.item {
                        display: flex;
                        min-height: 140px;

                        // Visual
                        .product-item-photo {
                            width: 28%;
                            min-width: 80px;
                            margin-right: 15px;
                        }

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

                            @include breakpoint(md) {
                                font-size: 1.6rem;
                                font-weight: $fw-roboto-medium;
                            }
                        }

                        .item-options {
                            @include clearer;

                            dt,
                            dd {
                                float: left;
                                margin-top: 6px;
                            }

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

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

                        .product-item-details {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: center;
                            max-width: 300px;
                            line-height: 1.4;

                            @include breakpoint(md) {
                                .status-title {
                                    min-width: 115px;
                                }
                            }

                            .warranty {
                                color: $c-blue-dark;
                                font-weight: $fw-roboto-bold;
                                font-size: 1.2rem;
                            }
                        }
                    }

                    // Price
                    &.price {
                        .price-before-remise,
                        .price-after-remise {
                            display: block;
                        }

                        .price-before-remise {
                            margin-bottom: 20px;
                            text-decoration: line-through;
                        }

                        .price-after-remise {
                            color: lighten($c-black, 80%);
                            font-weight: bold;
                        }
                    }
                    .cart-price {
                        color: $c-blue;
                        font-size: 1.8rem;
                        font-weight: $fw-roboto-bold;
                    }

                    // Availability
                    &.availability {
                        white-space: nowrap;
                    }

                    // Quantity
                    &.qty {
                        .control.qty,
                        label {
                            margin: 0;
                        }

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

                    // Items actions (edit / remove)
                    &.actions {
                        @include breakpoint(lg) {
                            padding: 0 10px 10px;
                        }

                        .actions-toolbar {
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-end;
                            align-items: center;
                            margin-top: 0;

                            .action {
                                width: auto;
                                margin-bottom: 0;
                                padding: 15px;

                                @include breakpoint(lg) {
                                    padding: 10px;
                                    position: relative;
                                    top: 5px;
                                }

                                // Icon
                                &::before {
                                    font-size: 1.6rem;
                                }

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

                        .action-edit {
                            display: none;
                        }
                    }

                    // Common style
                    .price-including-tax {
                        display: none;
                    }
                }
            }
        }
    }

    // Mobile version
    @include breakpoint(only-lg) {

        .cart {
            > tbody {
                > tr {
                    &.item-info {
                        display: flex;
                        flex-wrap: wrap;
                        position: relative;
                        padding: 10px 10px 10px calc(#{$checkout-mobile-product-visual-width} + 20px);
                        min-height: calc(#{$checkout-mobile-product-visual-width} + 20px);
                    }

                    > td {
                        padding: 0;

                        &.item {
                            display: flex;
                            flex: 0 0 100%;
                            min-height: 0;
                            margin-bottom: 10px;
                            padding-right: 30px;

                            // Visual
                            .product-item-photo {
                                position: absolute;
                                top: 10px;
                                left: 0;
                                width: $checkout-mobile-product-visual-width;
                                min-width: auto;
                                margin-right: 0;
                            }

                            // Title
                            .product-item-name {
                                line-height: 1.3;
                            }
                        }

                        &.price,
                        &.availability {
                            display: none;
                        }

                        // Quantity
                        &.qty {
                            input {
                                margin-top: 0;
                            }
                        }

                        &.subtotal {
                            padding: 10px 0 10px 5px;
                            font-weight: bold;

                            @include breakpoint(only-md) {
                                flex-grow: 1;
                                flex-basis: 0;
                                text-align: right;
                            }

                            @include breakpoint(md) {
                                padding: 10px 10px 0 20px;
                            }
                        }

                        &.actions {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                    }
                }
            }
        }
    }

    &.main.actions {
        display: flex;
        justify-content: flex-end;

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

        // Hide continue and clear carth action buttons
        .continue,
        .clear {
            display: none;
        }

        .action {
            & + .action {
                margin-left: 16px;
            }
        }
    }
}

//
//  Add to cart modal
//
.add-to-cart-modal-container {
    .item-added-container {
        max-width: 645px;
        margin: 0 auto 10px;
        text-align: center;

        @include breakpoint(md){
            display: flex;
            align-items: center;
            text-align: left;
        }

        .title {
            color: $c-blue-dark;
            font-size: 1.4rem;
            margin-bottom: 5px;

            @include breakpoint(md) {
                font-weight: $fw-roboto-bold;
                font-size: 2.8rem;
            }
        }

        .label {
            font-size: 1.4rem;
            font-weight: $fw-roboto-bold;

            @include breakpoint(md) {
                font-size: 2rem;
            }
        }

        .product-image-container {
            display: none;
            width: 120px;
            margin-right: 40px;

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

    .actions {
        text-align: center;

        @include breakpoint(only-md) {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        button {
            margin: 0 15px 10px;

            @include breakpoint(only-md) {
                max-width: 240px;
                width: 100%;

                &:first-child {  order: 2; }
                &:last-child { order: 1; }
            }
        }
    }

    .block.crosssell {
        margin-top: 10px;

        @include breakpoint(md) {
            margin-top: 20px;
        }

        .products-grid {
            margin-bottom: 0;
            padding: 20px 0 30px;
        }
    }

    .block-title {
        font-size: 1.2rem;
        margin-bottom: 0;

        @include breakpoint(md) {
            font-size: 1.8rem;
        }
    }

    .items {
        display: flex;
        justify-content: center;

        @include breakpoint(only-md) {
            opacity: 0;

            &.slick-slider {
                opacity: 1;

                .slick-list {
                    padding-right: 70px;
                }
            }
        }
    }

    .item {
        width: calc(100%/4);
        padding: 0 13px;
    }

    .product-item-info {
        flex-direction: column;

        .product-item-photo {
            padding: 12px;
        }

        .details__name {
            flex-grow: 1;
            flex-basis: 0;
            padding: 0 20px 20px;
        }
    }
}

//
//  Save cart modal
//
.modal-slide,
.modal-popup {
    &.save-card-modal .modal-inner-wrap {
        max-width: 500px;
    }
}

//
// Modal customer account login
//

.block-authentication {
    display: flex;
    flex-direction: column;

    @include breakpoint(md) {
        flex-direction: row;

        .block {
            width: 50%;
            padding: 0 20px;

            & > div {
                width: 100%;
                max-width: 380px;
            }
        }
    }

    .block {
        + .block {
            margin-top: 30px;

            @include breakpoint(md) {
                margin-top: 0;
            }
        }

        &.block-new-customer {
            @include breakpoint(md) {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                border-left: 1px solid $input-border-color;
            }
        }

        &.block-customer-login {
            .actions-toolbar {
                 @include breakpoint(only-md) {
                     margin-top: 5px;
                 }
            }
        }
    }

    .block-title {
        @include breakpoint(md) {
            text-align: left;
            margin-bottom: 30px;
        }

        > strong {
            display: block;
            @extend .title-1;
            line-height: 1;
            margin-bottom: 0;
        }

        > span {
            @extend .subtitle-2;
        }
    }

    // Actions
    .actions-toolbar {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 20px;

        div.secondary {
            @include breakpoint(only-md) {
                margin-bottom: 10px;
            }

            @include breakpoint(md) {
                margin-left: auto;
            }

            .action {
                @extend .link-1;
                font-size: 1.2rem;
            }
        }
    }

    .action-register {
        @extend .btn;
        @extend .btn--pink;
    }
}