UNPKG

@syncfusion/ej2-notifications

Version:

A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.

541 lines (527 loc) 21.3 kB
/* Font Family */ /* Font Sizes */ /* Radius */ /* 1px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* 9px */ /* 10px */ /* 11px */ /* 12px */ /* 13px */ /* 14px */ /* 15px */ /* 16px */ /* 17px */ /* 18px */ /* 19px */ /* 20px */ /* 21px */ /* 22px */ /* 23px */ /* 24px */ /* 25px */ /* 26px */ /* 27px */ /* 28px */ /* 29px */ /* 30px */ /* 31px */ /* 32px */ /* 33px */ /* 34px */ /* 35px */ /* 36px */ /* 37px */ /* 38px */ /* 39px */ /* 40px */ /* 41px */ /* 42px */ /* 43px */ /* 44px */ /* 45px */ /* 46px */ /* 47px */ /* 48px */ /* 49px */ /* 50px */ /* 5em */ /* 65% */ /* border */ /* 0px */ /* 1px */ /* 1.5px */ /* 2px */ /* 3px */ /* 4px */ /* 5px */ /* 6px */ /* 7px */ /* 8px */ /* 9px */ /* 10px */ /* 11px */ /* 12px */ /* 13px */ /* 14px */ /* 15px */ /* 16px */ .e-message .e-msg-icon::before, .e-message .e-msg-close-icon::before { font-family: "e-icons"; } .e-message .e-msg-icon::before, .e-message.e-info .e-msg-icon::before { content: "\e800"; } .e-message .e-msg-close-icon::before { content: "\e7e7"; } .e-message.e-success .e-msg-icon::before { content: "\e72b"; } .e-message.e-error .e-msg-icon::before { content: "\e878"; } .e-message.e-warning .e-msg-icon::before { content: "\e88b"; } .e-message { border: 1px solid; border-radius: calc(var(--e-radius) * 0.375); -webkit-box-sizing: border-box; box-sizing: border-box; font-family: var(--e-font-family); font-weight: 400; font-style: normal; padding: 11px 7px; display: -webkit-box; display: -ms-flexbox; display: flex; } .e-message.e-hidden { display: none; } .e-message .e-msg-icon, .e-message .e-msg-close-icon { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 16px; } .e-message .e-msg-icon { font-size: 16px; height: 16px; margin: 3px 4px; } .e-message .e-msg-close-icon { border-width: 0; cursor: pointer; font-size: 16px; margin: 1px 2px 1px auto; padding: 2px; height: 20px; } .e-message .e-msg-content { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; line-height: 22px; padding: 0 4px; vertical-align: top; } .e-message.e-content-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .e-message.e-content-center .e-msg-content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .e-message.e-content-right .e-msg-close-icon, .e-message.e-content-center .e-msg-close-icon { margin: 3px 4px; } .e-message.e-rtl .e-msg-close-icon { margin: 1px auto 1px 2px; } .e-message { background: var(--color-sf-msg-bg-color); border-color: var(--color-sf-msg-border-color); color: var(--color-sf-msg-color); } .e-message .e-msg-icon { color: var(--color-sf-msg-icon-color); } .e-message .e-msg-close-icon { background: transparent; color: var(--color-sf-msg-close-icon-color); } .e-message .e-msg-close-icon:hover, .e-message .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-close-icon-color), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color), 0.12); border-radius: 999px; } .e-message.e-success { background-color: var(--color-sf-msg-success-bg-color); border-color: var(--color-sf-msg-success-border-color); color: var(--color-sf-msg-success-color); } .e-message.e-success .e-msg-icon { color: var(--color-sf-msg-success-icon-color); } .e-message.e-success .e-msg-close-icon { color: var(--color-sf-msg-success-close-icon-color); } .e-message.e-success .e-msg-close-icon:hover, .e-message.e-success .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-success-close-icon-color), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color), 0.12); } .e-message.e-warning { background-color: var(--color-sf-msg-warning-bg-color); border-color: var(--color-sf-msg-warning-border-color); color: var(--color-sf-msg-warning-color); } .e-message.e-warning .e-msg-icon { color: var(--color-sf-msg-warning-icon-color); } .e-message.e-warning .e-msg-close-icon { color: var(--color-sf-msg-warning-close-icon-color); } .e-message.e-warning .e-msg-close-icon:hover, .e-message.e-warning .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-warning-close-icon-color), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-close-icon-color), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-close-icon-color), 0.12); } .e-message.e-info { background-color: var(--color-sf-msg-info-bg-color); border-color: var(--color-sf-msg-info-border-color); color: var(--color-sf-msg-info-color); } .e-message.e-info .e-msg-icon { color: var(--color-sf-msg-info-icon-color); } .e-message.e-info .e-msg-close-icon { color: var(--color-sf-msg-info-close-icon-color); } .e-message.e-info .e-msg-close-icon:hover, .e-message.e-info .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-info-close-icon-color), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color), 0.12); } .e-message.e-error { background-color: var(--color-sf-msg-danger-bg-color); border-color: var(--color-sf-msg-danger-border-color); color: var(--color-sf-msg-danger-color); } .e-message.e-error .e-msg-icon { color: var(--color-sf-msg-danger-icon-color) !important; /* stylelint-disable-line declaration-no-important */ } .e-message.e-error .e-msg-close-icon { color: var(--color-sf-msg-danger-close-icon-color); } .e-message.e-error .e-msg-close-icon:hover, .e-message.e-error .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-danger-close-icon-color), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color), 0.12); } .e-message.e-outlined { background: var(--color-sf-msg-bg-color-alt1); border-color: var(--color-sf-msg-border-color-alt1); color: var(--color-sf-msg-color-alt1); } .e-message.e-outlined .e-msg-icon { color: var(--color-sf-msg-icon-color-alt1); } .e-message.e-outlined .e-msg-close-icon { color: var(--color-sf-msg-close-icon-color-alt21); } .e-message.e-outlined .e-msg-close-icon:hover, .e-message.e-outlined .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-close-icon-color-alt21), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color-alt21), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color-alt21), 0.12); } .e-message.e-outlined.e-success { border-color: var(--color-sf-msg-success-border-color-alt1); color: var(--color-sf-msg-success-color-alt1); } .e-message.e-outlined.e-success .e-msg-icon { color: var(--color-sf-msg-success-icon-color-alt1); } .e-message.e-outlined.e-success .e-msg-close-icon { color: var(--color-sf-msg-success-close-icon-color-alt1); } .e-message.e-outlined.e-success .e-msg-close-icon:hover, .e-message.e-outlined.e-success .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-success-close-icon-color-alt1), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color-alt1), 0.12); } .e-message.e-outlined.e-warning { border-color: var(--color-sf-msg-warning-border-color-alt1); color: var(--color-sf-msg-warning-color-alt1); } .e-message.e-outlined.e-warning .e-msg-icon { color: var(--color-sf-msg-warning-icon-color-alt1); } .e-message.e-outlined.e-warning .e-msg-close-icon { color: var(--color-sf-msg-warning-close-icon-color-alt1); } .e-message.e-outlined.e-warning .e-msg-close-icon:hover, .e-message.e-outlined.e-warning .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-warning-close-icon-color-alt1), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-close-icon-color-alt1), 0.12); } .e-message.e-outlined.e-info { border-color: var(--color-sf-msg-info-border-color-alt1); color: var(--color-sf-msg-info-color-alt1); } .e-message.e-outlined.e-info .e-msg-icon { color: var(--color-sf-msg-info-icon-color-alt1); } .e-message.e-outlined.e-info .e-msg-close-icon { color: var(--color-sf-msg-info-close-icon-color-alt1); } .e-message.e-outlined.e-info .e-msg-close-icon:hover, .e-message.e-outlined.e-info .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-info-close-icon-color-alt1), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color-alt1), 0.12); } .e-message.e-outlined.e-error { border-color: var(--color-sf-msg-danger-border-color-alt1); color: var(--color-sf-msg-danger-color-alt1); } .e-message.e-outlined.e-error .e-msg-icon { color: var(--color-sf-msg-danger-icon-color-alt1); } .e-message.e-outlined.e-error .e-msg-close-icon { color: var(--color-sf-msg-danger-close-icon-color-alt1); } .e-message.e-outlined.e-error .e-msg-close-icon:hover, .e-message.e-outlined.e-error .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-danger-close-icon-color-alt1), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color-alt1), 0.12); } .e-message.e-filled { background: var(--color-sf-msg-bg-color-alt2); border-color: var(--color-sf-msg-border-color-alt2); color: var(--color-sf-msg-color-alt2); } .e-message.e-filled .e-msg-icon { color: var(--color-sf-msg-icon-color-alt2); } .e-message.e-filled .e-msg-close-icon { color: var(--color-sf-msg-close-icon-color-alt2); } .e-message.e-filled .e-msg-close-icon:hover, .e-message.e-filled .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-close-icon-color-alt2), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-close-icon-color-alt2), 0.12); } .e-message.e-filled.e-success { background-color: var(--color-sf-msg-success-bg-color-alt2); border-color: var(--color-sf-msg-success-border-color-alt2); color: var(--color-sf-msg-success-color-alt2); } .e-message.e-filled.e-success .e-msg-icon { color: var(--color-sf-msg-success-icon-color-alt2); } .e-message.e-filled.e-success .e-msg-close-icon { color: var(--color-sf-msg-success-close-icon-color-alt2); } .e-message.e-filled.e-success .e-msg-close-icon:hover, .e-message.e-filled.e-success .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-success-close-icon-color-alt2), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-success-close-icon-color-alt2), 0.12); } .e-message.e-filled.e-warning { background-color: var(--color-sf-msg-warning-bg-color-alt2); border-color: var(--color-sf-msg-warning-border-color-alt2); color: var(--color-sf-msg-warning-color-alt2); } .e-message.e-filled.e-warning .e-msg-icon { color: var(--color-sf-msg-warning-icon-color-alt2); } .e-message.e-filled.e-warning .e-msg-close-icon { color: var(--color-sf-msg-warning-icon-color-alt2); } .e-message.e-filled.e-warning .e-msg-close-icon:hover, .e-message.e-filled.e-warning .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-warning-icon-color-alt2), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-icon-color-alt2), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-warning-icon-color-alt2), 0.12); } .e-message.e-filled.e-info { background-color: var(--color-sf-msg-info-bg-color-alt2); border-color: var(--color-sf-msg-info-border-color-alt2); color: var(--color-sf-msg-info-color-alt2); } .e-message.e-filled.e-info .e-msg-icon { color: var(--color-sf-msg-info-icon-color-alt2); } .e-message.e-filled.e-info .e-msg-close-icon { color: var(--color-sf-msg-info-close-icon-color-alt2); } .e-message.e-filled.e-info .e-msg-close-icon:hover, .e-message.e-filled.e-info .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-info-close-icon-color-alt2), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-info-close-icon-color-alt2), 0.12); } .e-message.e-filled.e-error { background-color: var(--color-sf-msg-danger-bg-color-alt2); border-color: var(--color-sf-msg-danger-border-color-alt2); color: var(--color-sf-msg-danger-color-alt2); } .e-message.e-filled.e-error .e-msg-icon { color: var(--color-sf-msg-danger-icon-color-alt2) !important; /* stylelint-disable-line declaration-no-important */ } .e-message.e-filled.e-error .e-msg-close-icon { color: var(--color-sf-msg-danger-close-icon-color-alt2); } .e-message.e-filled.e-error .e-msg-close-icon:hover, .e-message.e-filled.e-error .e-msg-close-icon:focus { background-color: rgba(var(--color-sf-msg-danger-close-icon-color-alt2), 0.12); -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 2px rgba(var(--color-sf-msg-danger-close-icon-color-alt2), 0.12); } .e-bigger .e-message, .e-message.e-bigger { padding: 16px 9px; } .e-bigger .e-message .e-msg-icon, .e-bigger .e-message .e-msg-close-icon, .e-message.e-bigger .e-msg-icon, .e-message.e-bigger .e-msg-close-icon { line-height: 18px; } .e-bigger .e-message .e-msg-icon, .e-message.e-bigger .e-msg-icon { font-size: 18px; height: 18px; margin: 3px 6px; } .e-bigger .e-message .e-msg-close-icon, .e-message.e-bigger .e-msg-close-icon { font-size: 18px; margin: 0 3px 0 auto; padding: 3px; height: 24px; } .e-bigger .e-message .e-msg-content, .e-message.e-bigger .e-msg-content { line-height: 24px; font-size: 16px; padding: 0 6px; } .e-bigger .e-message.e-content-right .e-msg-close-icon, .e-bigger .e-message.e-content-center .e-msg-close-icon, .e-message.e-bigger.e-content-right .e-msg-close-icon, .e-message.e-bigger.e-content-center .e-msg-close-icon { margin: 3px 6px; } .e-bigger .e-message.e-rtl .e-msg-close-icon, .e-message.e-bigger.e-rtl .e-msg-close-icon { margin: 0 auto 0 3px; } .e-bigger .e-message .e-msg-close-icon:hover, .e-bigger .e-message .e-msg-close-icon:focus, .e-message.e-bigger .e-msg-close-icon:hover, .e-message.e-bigger .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color), 0.12); } .e-bigger .e-message.e-success .e-msg-close-icon:hover, .e-bigger .e-message.e-success .e-msg-close-icon:focus, .e-message.e-bigger.e-success .e-msg-close-icon:hover, .e-message.e-bigger.e-success .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color), 0.12); } .e-bigger .e-message.e-warning .e-msg-close-icon:hover, .e-bigger .e-message.e-warning .e-msg-close-icon:focus, .e-message.e-bigger.e-warning .e-msg-close-icon:hover, .e-message.e-bigger.e-warning .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-close-icon-color), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-close-icon-color), 0.12); } .e-bigger .e-message.e-info .e-msg-close-icon:hover, .e-bigger .e-message.e-info .e-msg-close-icon:focus, .e-message.e-bigger.e-info .e-msg-close-icon:hover, .e-message.e-bigger.e-info .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color), 0.12); } .e-bigger .e-message.e-error .e-msg-close-icon:hover, .e-bigger .e-message.e-error .e-msg-close-icon:focus, .e-message.e-bigger.e-error .e-msg-close-icon:hover, .e-message.e-bigger.e-error .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color), 0.12); } .e-bigger .e-message.e-outlined .e-msg-close-icon:hover, .e-bigger .e-message.e-outlined .e-msg-close-icon:focus, .e-message.e-bigger.e-outlined .e-msg-close-icon:hover, .e-message.e-bigger.e-outlined .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color-alt21), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color-alt21), 0.12); } .e-bigger .e-message.e-outlined.e-success .e-msg-close-icon:hover, .e-bigger .e-message.e-outlined.e-success .e-msg-close-icon:focus, .e-message.e-bigger.e-outlined.e-success .e-msg-close-icon:hover, .e-message.e-bigger.e-outlined.e-success .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color-alt1), 0.12); } .e-bigger .e-message.e-outlined.e-warning .e-msg-close-icon:hover, .e-bigger .e-message.e-outlined.e-warning .e-msg-close-icon:focus, .e-message.e-bigger.e-outlined.e-warning .e-msg-close-icon:hover, .e-message.e-bigger.e-outlined.e-warning .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-close-icon-color-alt1), 0.12); } .e-bigger .e-message.e-outlined.e-info .e-msg-close-icon:hover, .e-bigger .e-message.e-outlined.e-info .e-msg-close-icon:focus, .e-message.e-bigger.e-outlined.e-info .e-msg-close-icon:hover, .e-message.e-bigger.e-outlined.e-info .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color-alt1), 0.12); } .e-bigger .e-message.e-outlined.e-error .e-msg-close-icon:hover, .e-bigger .e-message.e-outlined.e-error .e-msg-close-icon:focus, .e-message.e-bigger.e-outlined.e-error .e-msg-close-icon:hover, .e-message.e-bigger.e-outlined.e-error .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color-alt1), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color-alt1), 0.12); } .e-bigger .e-message.e-filled .e-msg-close-icon:hover, .e-bigger .e-message.e-filled .e-msg-close-icon:focus, .e-message.e-bigger.e-filled .e-msg-close-icon:hover, .e-message.e-bigger.e-filled .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-close-icon-color-alt2), 0.12); } .e-bigger .e-message.e-filled.e-success .e-msg-close-icon:hover, .e-bigger .e-message.e-filled.e-success .e-msg-close-icon:focus, .e-message.e-bigger.e-filled.e-success .e-msg-close-icon:hover, .e-message.e-bigger.e-filled.e-success .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-success-close-icon-color-alt2), 0.12); } .e-bigger .e-message.e-filled.e-warning .e-msg-close-icon:hover, .e-bigger .e-message.e-filled.e-warning .e-msg-close-icon:focus, .e-message.e-bigger.e-filled.e-warning .e-msg-close-icon:hover, .e-message.e-bigger.e-filled.e-warning .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-icon-color-alt2), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-warning-icon-color-alt2), 0.12); } .e-bigger .e-message.e-filled.e-info .e-msg-close-icon:hover, .e-bigger .e-message.e-filled.e-info .e-msg-close-icon:focus, .e-message.e-bigger.e-filled.e-info .e-msg-close-icon:hover, .e-message.e-bigger.e-filled.e-info .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-info-close-icon-color-alt2), 0.12); } .e-bigger .e-message.e-filled.e-error .e-msg-close-icon:hover, .e-bigger .e-message.e-filled.e-error .e-msg-close-icon:focus, .e-message.e-bigger.e-filled.e-error .e-msg-close-icon:hover, .e-message.e-bigger.e-filled.e-error .e-msg-close-icon:focus { -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color-alt2), 0.12); box-shadow: 0 0 0 4px rgba(var(--color-sf-msg-danger-close-icon-color-alt2), 0.12); }