Viewing File: /usr/local/cpanel/share/libraries/cjt2/src/styles/growls.less

/*
# share/libraries/cjt2/src/styles/growls.less        Copyright 2022 cPanel, L.L.C.
#                                                           All rights reserved.
# copyright@cpanel.net                                         http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/

@import (inline) "angular-growl-2/build/angular-growl.css";
@import "variables.less";

.hyphens {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.growl-container {
    opacity: 0.95;
}

/**
 * WHM-specific fixes - whm.less doesn't include the styleguide's .alert styles
 * yet so we rely on the main growl styles, which don't have RTL support. These
 * are some RTL versions of the imported original growl styles.
 */
body.whostmgr {
    .growl-item.icon > .growl-title,
    .growl-item.icon > .growl-message,
    .growl_action {
        html[dir="ltr"] & {
            margin-left: 40px;
        }

        html[dir="rtl"] & {
            margin-right: 40px;
        }
    }

    .growl-container > .growl-item {
        padding: 10px;

        html[dir="ltr"] & {
            padding-right: 35px;
        }

        html[dir="rtl"] & {
            padding-left: 35px;
        }
    }
}

/**
 * Our version of bootstrap-rtl is out of date, so this patches the .close button positioning for RTL:
 * https://github.com/morteza/bootstrap-rtl/commit/ece228c398705cc8fe5f4f45e47c62f1bd7b0b63
 */
html[dir="rtl"] .alert-dismissable .close {
    right: auto;
    left: -21px;
}

.growl-item.alert-danger {
    box-shadow: inset 41px 0 @danger-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

.growl-item.alert-success {
    box-shadow: inset 41px 0 @success-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

.growl-item.alert-warning {
    box-shadow: inset 41px 0 @warning-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

.growl-item.alert-info {
    box-shadow: inset 41px 0 @info-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

html[dir="rtl"] .growl-item.alert-danger {
    box-shadow: inset -41px 0 @danger-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

html[dir="rtl"] .growl-item.alert-success {
    box-shadow: inset -41px 0 @success-box-shadow,
        1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

html[dir="rtl"] .growl-item.alert-warning {
    box-shadow: inset -41px 0 @warning-box-shadow,
        1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

html[dir="rtl"] .growl-item.alert-info {
    box-shadow: inset -41px 0 @info-box-shadow, 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

.growl_icon {
    height: 100%;
}

.growl_action {
    text-align: left;
    padding: 8px 0 3px 0;
}

html[dir="rtl"] .growl_action {
    text-align: right;
}

.alert .growl_icon .glyphicon {
    display: inline-block;
    position: absolute;
    font-size: 20px;
    left: 10px;
    top: 20px;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

html[dir="rtl"] .alert .growl_icon .glyphicon {
    right: 10px;
    left: auto;
}

.alert {
    border-radius: 2px;
}

.alert-danger > .growl_icon > .glyphicon {
    color: @danger-bg;
}

.alert-success > .growl_icon > .glyphicon {
    color: @success-bg;
}

.alert-warning > .growl_icon > .glyphicon {
    color: @warning-bg;
}

.alert-info > .growl_icon > .glyphicon {
    color: @info-bg;
}

/* This is different from the style guide becuase of the opacity of the container */
.growl-message {
    color: darken(@alert-message-color, 10%);
    .hyphens;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/**
 * The styleguide's .alert styles already add padding to the parent container, so
 * we don't need to add margin to the children, as the growl stylesheet does.
 */
.growl-item.icon > .growl-title,
.growl-item.icon > .growl-message {
    margin: 0;
}

.growl-container > .alert-info.icon,
.growl-container > .alert-error.icon,
.growl-container > .alert-success.icon,
.growl-container > .alert-warning.icon {
    background-image: none;
}

.growl-container > .growl-item.ng-enter,
.growl-container > .growl-item.ng-leave {
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}