MusicTopus/sass/toast.scss

86 lines
1.7 KiB
SCSS
Raw Normal View History

2022-02-15 11:03:20 +01:00
#toastr {
visibility: hidden;
min-width: 250px;
2022-02-15 16:45:14 +01:00
max-width: 360px;
2022-02-15 11:03:20 +01:00
position: fixed;
2022-02-15 16:45:14 +01:00
z-index: 31;
2022-02-15 11:03:20 +01:00
right: 30px;
top: 30px;
font-size: 17px;
2022-02-18 11:38:56 +01:00
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
background-color: var(--danger-color);
color: var(--default-color);
2022-02-18 11:38:56 +01:00
2022-02-15 11:03:20 +01:00
&.show {
visibility: visible;
animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;
}
2022-02-18 11:38:56 +01:00
button {
width: 20px;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: 0;
border: none;
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
user-select: none;
right: .5rem;
position: absolute;
top: .5rem;
background-color: rgba(10, 10, 10, 0.2);
&:hover {
background-color: rgba(10,10,10,.3);
}
&::before,
&::after {
background-color: var(--default-color);
2022-02-18 11:38:56 +01:00
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
&::before {
height: 2px;
width: 50%;
}
&::after {
height: 50%;
width: 2px;
}
}
2022-02-15 11:03:20 +01:00
}
@keyframes toastrFadein {
from {
top: 0;
opacity: 0;
}
to {
top: 30px;
opacity: 1;
}
}
@keyframes toastrFadeout {
from {
top: 30px;
opacity: 1;
}
to {
top: 0;
opacity: 0;
}
}