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.

483 lines (476 loc) 13.7 kB
.e-toast .e-toast-close-icon::before { content: "\e96c"; font-family: "e-icons"; } .e-toast .e-toast-success-icon::before { content: "\ea84"; font-family: "e-icons"; } .e-toast .e-toast-error-icon::before { content: "\e7e9"; font-family: "e-icons"; } .e-toast .e-toast-info-icon::before { content: "\e607"; font-family: "e-icons"; } .e-toast .e-toast-warning-icon::before { content: "\e92f"; font-family: "e-icons"; } /* stylelint-disable property-no-vendor-prefix */ .e-toast-container { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .e-toast-container.e-toast-top-left { left: 10px; top: 10px; } .e-toast-container.e-toast-bottom-left { bottom: 10px; left: 10px; } .e-toast-container.e-toast-top-right { right: 10px; top: 10px; } .e-toast-container.e-toast-bottom-right { bottom: 10px; right: 10px; } .e-toast-container.e-toast-bottom-center { bottom: 10px; pointer-events: none; right: 0; width: 100%; } .e-toast-container.e-toast-bottom-center .e-toast { margin: 0 auto 10px; pointer-events: auto; } .e-toast-container.e-toast-top-center { pointer-events: none; right: 0; top: 10px; width: 100%; } .e-toast-container.e-toast-top-center .e-toast { margin: 0 auto 10px; pointer-events: auto; } .e-toast-container.e-toast-full-width { left: 0; right: 0; width: 100%; } .e-toast-container.e-toast-full-width .e-toast { margin: 0 auto 10px; width: 96%; } .e-toast-container.e-rtl .e-toast .e-toast-actions { text-align: left; } .e-toast-container.e-rtl .e-toast .e-toast-actions > * { margin-left: initial; margin-right: 10px; } .e-toast-container.e-rtl .e-toast .e-toast-close-icon { margin-left: initial; margin-right: auto; } .e-toast-container.e-rtl .e-toast .e-toast-icon { margin-left: 14px; margin-right: initial; } .e-toast-container.e-rtl .e-toast .e-toast-progress { left: auto; right: 0; } .e-toast-container .e-toast { border-radius: 4px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; margin: 0 0 10px; overflow: hidden; padding: 15px; position: relative; } .e-toast-container .e-toast .e-toast-icon, .e-toast-container .e-toast .e-toast-message { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .e-toast-container .e-toast > * { word-break: break-word; word-wrap: break-word; } .e-toast-container .e-toast .e-toast-message { -ms-flex-item-align: center; align-self: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; width: inherit; } .e-toast-container .e-toast .e-toast-message .e-toast-title, .e-toast-container .e-toast .e-toast-message .e-toast-content { overflow: hidden; text-overflow: ellipsis; } .e-toast-container .e-toast .e-toast-message .e-toast-title:first-child, .e-toast-container .e-toast .e-toast-message .e-toast-content:first-child { padding: 0; } .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child, .e-toast-container .e-toast .e-toast-message .e-toast-content:last-child { padding-bottom: 0; } .e-toast-container .e-toast .e-toast-message .e-toast-title > *, .e-toast-container .e-toast .e-toast-message .e-toast-content > * { overflow: hidden; text-overflow: ellipsis; } .e-toast-container .e-toast .e-toast-message .e-toast-title { font-size: 14px; font-weight: bold; letter-spacing: 0.5px; } .e-toast-container .e-toast .e-toast-message .e-toast-content { padding: 10px 0 5px 0; word-break: break-word; word-wrap: break-word; } .e-toast-container .e-toast .e-toast-message .e-toast-content + .e-toast-actions { padding-top: 0; } .e-toast-container .e-toast .e-toast-message .e-toast-actions { margin: 1px; padding: 5px 0 0 0; text-align: right; } .e-toast-container .e-toast .e-toast-message .e-toast-actions > * { margin-left: 10px; } .e-toast-container .e-toast .e-toast-close-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 12px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; width: 24px; } .e-toast-container .e-toast .e-toast-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 14px; width: 24px; } .e-toast-container .e-toast .e-toast-progress { bottom: 0; height: 4px; left: 0; position: absolute; } .e-content-placeholder.e-toast.e-placeholder-toast { background-size: 400px 100px; min-height: 100px; } .e-blazor-toast-hidden { visibility: hidden; } .e-toast-container .e-toast .e-toast-close-icon.blazor-toast-close-icon { background-color: transparent; border-color: transparent; border-radius: 50%; bottom: 6px; height: 20px; position: relative; width: 22px; } .e-toast-container .e-toast { background-color: #fff; border: 1px solid #ccc; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); color: #333; } .e-toast-container .e-toast .e-toast-close-icon { color: #ccc; } .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon, .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:focus, .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:active { background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; outline: 0; } .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:focus, .e-toast-container .e-toast .e-toast-close-icon.e-blazor-toast-close-icon:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } .e-toast-container .e-toast .e-toast-close-icon.e-icons:hover, .e-toast-container .e-toast .e-toast-close-icon.e-icons:focus { background-color: transparent; color: rgba(0, 0, 0, 0.8); } .e-toast-container .e-toast.e-toast-success { background-color: #dff0d8; color: #3c763d; border-color: #d6e9c6; } .e-toast-container .e-toast.e-toast-success .e-toast-message .e-toast-title { color: #3c763d; } .e-toast-container .e-toast.e-toast-success .e-toast-message .e-toast-content { color: #3c763d; } .e-toast-container .e-toast.e-toast-success .e-toast-icon { color: #3c763d; } .e-toast-container .e-toast.e-toast-success .e-toast-close-icon { color: #3c763d; } .e-toast-container .e-toast.e-toast-success:hover { background-color: #d3f0c7; -webkit-box-shadow: 0 3px 6px 0; box-shadow: 0 3px 6px 0; color: #3c763d; border-color: #d6e9c6; } .e-toast-container .e-toast.e-toast-info { background-color: #d9edf7; color: #31708f; border-color: #bce8f1; } .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-title { color: #31708f; } .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content { color: #31708f; } .e-toast-container .e-toast.e-toast-info .e-toast-icon { color: #31708f; } .e-toast-container .e-toast.e-toast-info .e-toast-close-icon { color: #31708f; } .e-toast-container .e-toast.e-toast-info:hover { background-color: #bee2f4; -webkit-box-shadow: 0 3px 6px 0; box-shadow: 0 3px 6px 0; color: #31708f; border-color: #bce8f1; } .e-toast-container .e-toast.e-toast-warning { background-color: #fcf8e3; color: #8a6d3b; border-color: #faebcc; } .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-title { color: #8a6d3b; } .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-content { color: #8a6d3b; } .e-toast-container .e-toast.e-toast-warning .e-toast-icon { color: #8a6d3b; } .e-toast-container .e-toast.e-toast-warning .e-toast-close-icon { color: #8a6d3b; } .e-toast-container .e-toast.e-toast-warning:hover { background-color: #f6efcc; -webkit-box-shadow: 0 3px 6px 0; box-shadow: 0 3px 6px 0; color: #8a6d3b; border-color: #faebcc; } .e-toast-container .e-toast.e-toast-danger { background-color: #f2dede; color: #a94442; } .e-toast-container .e-toast.e-toast-danger .e-toast-message .e-toast-title { color: #a94442; } .e-toast-container .e-toast.e-toast-danger .e-toast-message .e-toast-content { color: #a94442; } .e-toast-container .e-toast.e-toast-danger .e-toast-icon { color: #a94442; } .e-toast-container .e-toast.e-toast-danger .e-toast-close-icon { color: #a94442; } .e-toast-container .e-toast.e-toast-danger:hover { background-color: #f1cfcf; -webkit-box-shadow: 0 3px 6px 0; box-shadow: 0 3px 6px 0; color: #a94442; border-color: #ebccd1; } .e-toast-container .e-toast:hover { background-color: #f5f5f5; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26); } .e-toast-container .e-toast .e-toast-icon { color: #333; } .e-toast-container .e-toast .e-toast-message .e-toast-title { color: #333; } .e-toast-container .e-toast .e-toast-message .e-toast-content { color: #333; } .e-toast-container .e-toast .e-toast-progress { background-color: #317ab9; } .e-bigger .e-toast-container.e-toast-top-left, .e-toast-container.e-bigger.e-toast-top-left { left: 10px; top: 10px; } .e-bigger .e-toast-container.e-toast-bottom-left, .e-toast-container.e-bigger.e-toast-bottom-left { bottom: 10px; left: 10px; } .e-bigger .e-toast-container.e-toast-top-right, .e-toast-container.e-bigger.e-toast-top-right { right: 10px; top: 10px; } .e-bigger .e-toast-container.e-toast-bottom-right, .e-toast-container.e-bigger.e-toast-bottom-right { bottom: 10px; right: 10px; } .e-bigger .e-toast-container.e-toast-bottom-center, .e-toast-container.e-bigger.e-toast-bottom-center { bottom: 10px; } .e-bigger .e-toast-container.e-toast-bottom-center .e-toast, .e-toast-container.e-bigger.e-toast-bottom-center .e-toast { margin: 0 auto 10px; } .e-bigger .e-toast-container.e-toast-top-center, .e-toast-container.e-bigger.e-toast-top-center { top: 10px; } .e-bigger .e-toast-container.e-toast-top-center .e-toast, .e-toast-container.e-bigger.e-toast-top-center .e-toast { margin: 0 auto 10px; } .e-bigger .e-toast-container.e-toast-full-width, .e-toast-container.e-bigger.e-toast-full-width { left: 0; right: 0; } .e-bigger .e-toast-container.e-toast-full-width .e-toast, .e-toast-container.e-bigger.e-toast-full-width .e-toast { margin: 0 auto 10px; } .e-bigger .e-toast-container.e-rtl .e-toast .e-toast-message .e-toast-actions, .e-toast-container.e-bigger.e-rtl .e-toast .e-toast-message .e-toast-actions { text-align: left; } .e-bigger .e-toast-container.e-rtl .e-toast .e-toast-message .e-toast-actions > *, .e-toast-container.e-bigger.e-rtl .e-toast .e-toast-message .e-toast-actions > * { margin-left: initial; margin-right: 10px; } .e-bigger .e-toast-container.e-rtl .e-toast .e-toast-close-icon, .e-toast-container.e-bigger.e-rtl .e-toast .e-toast-close-icon { margin-left: initial; margin-right: auto; } .e-bigger .e-toast-container.e-rtl .e-toast .e-toast-icon, .e-toast-container.e-bigger.e-rtl .e-toast .e-toast-icon { margin-left: 14px; margin-right: initial; } .e-bigger .e-toast-container.e-rtl .e-toast .e-toast-progress, .e-toast-container.e-bigger.e-rtl .e-toast .e-toast-progress { left: auto; right: 0; } .e-bigger .e-toast-container .e-toast, .e-toast-container.e-bigger .e-toast { border-radius: 4px; font-size: 14px; margin: 0 0 10px; min-height: 48px; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-content, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-content { padding: 10px 0 5px 0; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-content:first-child, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-content:first-child { padding: 0; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-content:last-child, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-content:last-child { padding-bottom: 0; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-content + .e-toast-actions, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-content + .e-toast-actions { padding: 0; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-actions, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-actions { padding: 5px 0 0 0; text-align: right; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-actions > *, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-actions > * { margin-left: 10px; } .e-bigger .e-toast-container .e-toast .e-toast-close-icon, .e-toast-container.e-bigger .e-toast .e-toast-close-icon { font-size: 12px; height: 24px; width: 24px; } .e-bigger .e-toast-container .e-toast .e-toast-icon, .e-toast-container.e-bigger .e-toast .e-toast-icon { font-size: 12px; height: 24px; margin-right: 14px; width: 24px; } .e-bigger .e-toast-container .e-toast .e-toast-progress, .e-toast-container.e-bigger .e-toast .e-toast-progress { height: 4px; } .e-bigger .e-content-placeholder.e-toast.e-placeholder-toast, .e-bigger.e-content-placeholder.e-toast.e-placeholder-toast { background-size: 400px 100px; min-height: 100px; }