138 lines
2.2 KiB
SCSS
138 lines
2.2 KiB
SCSS
.toast-container {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
z-index: 999999;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
position: relative;
|
|
box-shadow: 0px 1px 4px #555;
|
|
pointer-events: all;
|
|
padding: 1.8rem;
|
|
cursor: pointer;
|
|
min-height: 6rem;
|
|
margin-top: 10px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 400px;
|
|
color: $off_white;
|
|
font-size: 1.2rem;
|
|
opacity: 0;
|
|
border: none;
|
|
border-radius: 3px;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: all 0.2s ease;
|
|
&:hover {
|
|
transition: all 0.2s ease;
|
|
color: $white;
|
|
box-shadow: 0px 2px 6px #555;
|
|
}
|
|
&.active {
|
|
transition: all 0.25s ease;
|
|
opacity: 1;
|
|
}
|
|
&.poof {
|
|
transition: all 0.25s ease;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
&.yellow,
|
|
&.blue,
|
|
&.gray,
|
|
&.orange {
|
|
.toast-title,
|
|
.toast-message {
|
|
color: $dark_gray;
|
|
}
|
|
}
|
|
&.green,
|
|
&.dark-blue,
|
|
&.dark-gray,
|
|
&.dark-red,
|
|
&.dark-orange,
|
|
&.red {
|
|
.toast-title,
|
|
.toast-message {
|
|
color: $off_white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toast-title {
|
|
margin: 0 0 0.6rem;
|
|
pointer-events: none;
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toast-message {
|
|
pointer-events: none;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.toast-loader {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
overflow: hidden;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.toast-loader-left,
|
|
.toast-loader-right,
|
|
.toast-loader-spinner {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.toast-loader-left {
|
|
left: 0;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
animation: show-hide 7s steps(1, end);
|
|
border-radius: 100% 0 0 100%/ 50% 0 0 50%;
|
|
}
|
|
|
|
.toast-loader-right {
|
|
right: 0;
|
|
z-index: 1;
|
|
background: #666 !important;
|
|
opacity: 0;
|
|
animation: show-hide 7s steps(1, end) reverse;
|
|
border-radius: 0 100% 100% 0/ 0 50% 50% 0;
|
|
}
|
|
|
|
.toast-loader-spinner {
|
|
left: 0;
|
|
z-index: 2;
|
|
background: #666 !important;
|
|
animation: spin 7s linear;
|
|
transform-origin: center right;
|
|
border-radius: 100% 0 0 100%/ 50% 0 0 50%;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes show-hide {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|