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.

488 lines (479 loc) 14.4 kB
.e-toast .e-toast-close-icon::before { content: "\e7e7"; font-family: "e-icons"; } .e-toast .e-toast-success-icon::before { content: "\e7b0"; font-family: "e-icons"; } .e-toast .e-toast-error-icon::before { content: "\e7a2"; font-family: "e-icons"; } .e-toast .e-toast-info-icon::before { content: "\e797"; font-family: "e-icons"; } .e-toast .e-toast-warning-icon::before { content: "\e88b"; 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: 12px; margin-right: initial; } .e-toast-container.e-rtl .e-toast .e-toast-progress { left: auto; right: 0; } .e-toast-container .e-toast { border-radius: 6px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; margin: 0 0 10px; overflow: hidden; padding: 18px; 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: 700; letter-spacing: 0.5px; } .e-toast-container .e-toast .e-toast-message .e-toast-content { padding: 8px 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: 8px 0 0 8px; 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: 16px; height: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; width: 20px; } .e-toast-container .e-toast .e-toast-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; height: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 12px; width: 20px; } .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 #e5e7eb; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); color: #374151; } .e-toast-container .e-toast .e-toast-close-icon { color: #6b7280; } .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: #374151; } .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: #374151; } .e-toast-container .e-toast.e-toast-success { background-color: #dcfce7; color: #15803d; } .e-toast-container .e-toast.e-toast-success .e-toast-message .e-toast-title { color: #15803d; } .e-toast-container .e-toast.e-toast-success .e-toast-message .e-toast-content { color: #15803d; } .e-toast-container .e-toast.e-toast-success .e-toast-icon { color: #15803d; } .e-toast-container .e-toast.e-toast-success .e-toast-close-icon { color: #15803d; } .e-toast-container .e-toast.e-toast-success:hover { background-color: #dcfce7; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); color: #15803d; } .e-toast-container .e-toast.e-toast-info { background-color: #cffafe; color: #0e7490; } .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-title { color: #0e7490; } .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content { color: #0e7490; } .e-toast-container .e-toast.e-toast-info .e-toast-icon { color: #0e7490; } .e-toast-container .e-toast.e-toast-info .e-toast-close-icon { color: #0e7490; } .e-toast-container .e-toast.e-toast-info:hover { background-color: #cffafe; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); color: #0e7490; } .e-toast-container .e-toast.e-toast-warning { background-color: #ffedd5; color: #c2410c; } .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-title { color: #c2410c; } .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-content { color: #c2410c; } .e-toast-container .e-toast.e-toast-warning .e-toast-icon { color: #c2410c; } .e-toast-container .e-toast.e-toast-warning .e-toast-close-icon { color: #c2410c; } .e-toast-container .e-toast.e-toast-warning:hover { background-color: #ffedd5; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); color: #c2410c; } .e-toast-container .e-toast.e-toast-danger { background-color: #fee2e2; color: #dc2626; } .e-toast-container .e-toast.e-toast-danger .e-toast-message .e-toast-title { color: #dc2626; } .e-toast-container .e-toast.e-toast-danger .e-toast-message .e-toast-content { color: #dc2626; } .e-toast-container .e-toast.e-toast-danger .e-toast-icon { color: #dc2626; } .e-toast-container .e-toast.e-toast-danger .e-toast-close-icon { color: #dc2626; } .e-toast-container .e-toast.e-toast-danger:hover { background-color: #fee2e2; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); color: #dc2626; } .e-toast-container .e-toast:hover { background-color: #fff; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .e-toast-container .e-toast .e-toast-icon { color: #6b7280; } .e-toast-container .e-toast .e-toast-message .e-toast-title { color: #111827; } .e-toast-container .e-toast .e-toast-message .e-toast-content { color: #374151; } .e-toast-container .e-toast .e-toast-progress { background-color: #4f46e5; } .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: 16px; 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: 6px; 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: 12px 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-content + .e-toast-actions, .e-toast-container.e-bigger .e-toast .e-toast-message .e-toast-content + .e-toast-actions { padding: 12px 0 0 12px; } .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: 12px 0 0 12px; 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: 16px; 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: 18px; height: 24px; margin-right: 16px; 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; } .e-bigger .e-toast .e-toast { padding: 24px; } .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-title { font-size: 16px; }