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 - Progress bar
// ==============================================

//
//  Configuration
//  _____________________________________________

$checkout-progress-bar-max-width:           550px;
$checkout-progress-bar-margin:              0 auto 50px;

$checkout-progress-bar-icon-size-mobile:    2rem;
$checkout-progress-bar-icon-size:           3rem;

$checkout-progress-bar-circle-size-mobile:  40px;
$checkout-progress-bar-circle-size:         56px;
$checkout-progress-bar-circle-border:       1px solid #D8D8D8;
$checkout-progress-bar-circle-bg:           #D8D8D8;
$checkout-progress-bar-circle-active-bg:    $c-blue;

$checkout-progress-bar-line-width:          2px;
$checkout-progress-bar-line-color:          $c-blue;

$checkout-progress-bar-text-color:          #D8D8D8;
$checkout-progress-bar-text-active-color:   $c-blue;

.opc-progress-bar {
    display: flex;
    justify-content: space-around;
    position: relative;
    max-width: $checkout-progress-bar-max-width;
    margin: $checkout-progress-bar-margin;

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

    // Step
    li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        text-transform: uppercase;

        // Link
        & > span {
            display: inline-block;
            padding: 20px 10px;
            font-size: 1.3rem;
            font-weight: $fw-roboto-bold;
            color: $checkout-progress-bar-text-color;
            text-align: center;

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

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

        // Icon
        &::before {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: $checkout-progress-bar-circle-size-mobile;
            height: $checkout-progress-bar-circle-size-mobile;
            @extend %icon-icomoon;
            font-size: $checkout-progress-bar-icon-size-mobile;
            border-radius: 100%;
            border: $checkout-progress-bar-circle-border;
            color: $c-white;

            background-color: $checkout-progress-bar-circle-bg;
            z-index: 1;

            @include breakpoint(md) {
                font-size: $checkout-progress-bar-icon-size;
                width: $checkout-progress-bar-circle-size;
                height: $checkout-progress-bar-circle-size;
            }
        }

        // Shipping icon
        &:nth-child(1)::before {
            content: "\e92b";
        }

        // Payments icon
        &:nth-child(2)::before {
            content: "\e905";
        }

        // Confirmation icon
        &:nth-child(3)::before {
            content: "\e937";
            font-size: 2rem;
        }

        // Line
        &:not(:first-child) {
            position: relative;

            span {
                &::before {
                    content:"";
                    position: absolute;
                    top: $checkout-progress-bar-circle-size-mobile / 2;
                    width: 35%;
                    right: 83%;
                    border-bottom: $checkout-progress-bar-line-width solid $checkout-progress-bar-line-color;

                    @include breakpoint(md) {
                        top: $checkout-progress-bar-circle-size / 2;
                        width: 50%;
                        right: 75%;
                    }
                }
            }
        }

        // Active step
        &._active {

            // Step icon
            &::before {
                color: $c-white;
                border-color: $checkout-progress-bar-circle-active-bg;
                background-color: $checkout-progress-bar-circle-active-bg;
            }

            // Link
            span {
                color: $checkout-progress-bar-text-active-color;
            }
        }

        // Completed step
        &._complete {
            span {
                cursor: pointer;
            }
        }
    }
}