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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// MESSAGES & NOTIFICATIONS
// ==============================================

// Configuration
$notification-top-position:         190px;
$notification-success-bg-color:     $c-success;
$notification-info-bg-color:        $c-info;
$notification-warning-bg-color:     $c-warning;
$notification-error-bg-color:       $c-error;

.notification {
    position: relative;
    padding: 25px 55px 25px 105px;
    line-height: 1.4;
    color: $c-blue-dark;
    background-color: $c-white;
    box-shadow: 0 1px 5px -2px rgba(100, 100, 100, 0.5);

    // Icon
    &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        @extend %icon-icomoon;
        font-size: 2.4rem;
        color: $c-white;
    }

    @include breakpoint(only-md) {
        padding: 15px 45px 15px 80px;

        &::before {
            width: 60px;
        }
    }

    a {
        color: $c-blue-dark;
    }

    &.notification--success {

        // Icon
        &::before {
            content: "\e936";
            background-color: $notification-success-bg-color;
        }
    }

    &.notification--information {

        // Icon
        &::before {
            content: "\e935";
            background-color: $notification-info-bg-color;
        }
    }

    &.notification--warning {

        // Icon
        &::before {
            content: "\e934";
            background-color: $notification-warning-bg-color;
        }
    }

    &.notification--error {

        // Icon
        &::before {
            content: "\e933";
            background-color: $notification-error-bg-color;
        }
    }
}

//
//  Magento natives notifications extends
//  _____________________________________________

.message {
    & + .message {
        margin-top: 10px;
    }

    &:nth-last-of-type(1){
        margin-bottom: 20px;
    }

    &.message-success {
        @extend .notification;
        @extend .notification--success;
    }

    &.notice,
    &.info,
    &.message-notice,
    &.message-progress,
    &.message-spinner,
    &.message-in-rating-edit {
        @extend .notification;
        @extend .notification--information;
    }

    &.message-warning {
        @extend .notification;
        @extend .notification--warning;
    }

    &.message-error,
    &.error {
        @extend .notification;
        @extend .notification--error;
    }

    &.demo {
        text-align: center;
        padding: 12px;
        font-size: 1.3rem;
        color: darken($notification-warning-bg-color, 50%);
        background-color: $notification-warning-bg-color;

        p {
            margin-bottom: 0;
        }
    }
}

//
//  Animated notifications
//  _____________________________________________

body:not(.cms-styleguide) {
    .message {
        &.message-success,
        &.message-warning,
        &.message-error {
            position: fixed;
            top: $notification-top-position;
            left: 50%;
            max-width: 560px;
            transform: translateX(-50%);
            z-index: 99;

            @include breakpoint(only-md) {
                top: 120px;
                width: calc(100vw - 40px);
                max-width: none;
            }

            // Close button
            .close {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                cursor: pointer;
            }

            // Entry animation
            &.slideDown {
                animation-duration: .3s;
                animation-name: slideDown;
            }

            // Out animation
            &.slideUp {
                animation-duration: .3s;
                animation-name: slideUp;
            }
        }
    }
}



//
//  Magento notifications wrapper
//  _____________________________________________

.cms-index-index {
    .column.main {
        > .messages {
             .messages {
                margin-top: 20px;
            }
        }
    }
}

.page-layout-1column {
    .column.main {
        > .messages {
            @extend .container;
        }
    }
}

.message {
    &.message-error,
    &.error {
        color: $c-error;
    }
}

.mage-error {
    color: $c-error;
}