parent
1cb67ddba8
commit
9ccfb0044d
@ -1 +1 @@
|
|||||||
$toast-icons-path: "../sugar/icons" !default;
|
$toast-icons-path: "./theme/sugar/icons" !default;
|
@ -1,78 +1,95 @@
|
|||||||
.v-toast {
|
.v-toast {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 1090;
|
z-index: 1090;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
animation-duration: 150ms;
|
animation-duration: 150ms;
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: 0.92;
|
opacity: 0.92;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
min-height: 3em;
|
min-height: 3em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
// Colors
|
// Directions
|
||||||
@each $color, $value in $toast-colors {
|
&__item--rtl {
|
||||||
&--#{$color} {
|
direction: rtl;
|
||||||
background-color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
color: #000
|
|
||||||
}
|
|
||||||
|
|
||||||
// Individual toast position
|
|
||||||
&.v-toast__item--top, &.v-toast__item--bottom {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.v-toast__item--top-right, &.v-toast__item--bottom-right {
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.v-toast__item--top-left, &.v-toast__item--bottom-left {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__item--ltr {
|
||||||
margin: 0;
|
direction: ltr;
|
||||||
padding: 0.5em 1em;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon {
|
// Colors
|
||||||
display: none;
|
@each $color, $value in $toast-colors {
|
||||||
|
|
||||||
|
&--#{$color} {
|
||||||
|
background-color: $value !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .v-toast__icon--#{$color} {
|
||||||
|
background-color: $value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Notice container positions
|
&--warning {
|
||||||
&.v-toast--top {
|
color: #000
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.v-toast--bottom {
|
// Individual toast position
|
||||||
flex-direction: column-reverse;
|
&.v-toast__item--top,
|
||||||
|
&.v-toast__item--bottom {
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.v-toast--custom-parent {
|
&.v-toast__item--top-right,
|
||||||
position: absolute;
|
&.v-toast__item--bottom-right {
|
||||||
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
&.v-toast__item--top-left,
|
||||||
padding: 0;
|
&.v-toast__item--bottom-left {
|
||||||
position: fixed !important;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notice container positions
|
||||||
|
&.v-toast--top {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.v-toast--bottom {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.v-toast--custom-parent {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 0;
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
}
|
@ -1,9 +1,14 @@
|
|||||||
$toast-colors: (
|
$toast-colors: (
|
||||||
) !default;
|
) !default;
|
||||||
$toast-colors: map-merge(("success": #28a745,
|
$toast-colors: map-merge(("success": #32CAD5,
|
||||||
"info": #17a2b8,
|
"success-light": #32CAD5CC,
|
||||||
"warning": #ffc107,
|
"info": #E8E8E8,
|
||||||
"error": #dc3545,
|
"info-light": #F7F7F7,
|
||||||
"default": #343a40),
|
"warning": #febc22,
|
||||||
|
"warning-light": #febc22,
|
||||||
|
"error": #EE3552,
|
||||||
|
"error-light": #EE3552CC,
|
||||||
|
"default": #000,
|
||||||
|
"default-light": #3E3E3E),
|
||||||
$toast-colors
|
$toast-colors
|
||||||
);
|
);
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 142 B |
Loading…
Reference in new issue