@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
CSS
.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;
}