95 lines
1.6 KiB
Sass
Executable File
95 lines
1.6 KiB
Sass
Executable File
$_theme: () !default
|
|
|
|
@use "sass:selector"
|
|
@use "sass:map"
|
|
|
|
@keyframes toast-fade-out
|
|
0%
|
|
opacity: 1
|
|
80%
|
|
opacity: 1
|
|
100%
|
|
opacity: 0
|
|
display: none
|
|
|
|
#toast-container
|
|
position: fixed
|
|
right: 1em
|
|
bottom: 1em
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.toast-container
|
|
$container: &
|
|
position: relative
|
|
align-self: end
|
|
|
|
&:not(.nofade)
|
|
animation: toast-fade-out 5s forwards
|
|
|
|
input[type="checkbox"]
|
|
display: none
|
|
|
|
input[type="checkbox"]:checked + .toast
|
|
display: none
|
|
|
|
.toast
|
|
font-size: 22px
|
|
border: 1px solid #938b04
|
|
background-color: #4d4503
|
|
display: flex
|
|
flex-direction: row
|
|
padding: 0.25em
|
|
margin: 0.25em
|
|
max-width: fit-content
|
|
|
|
*
|
|
padding: 0 0.25em
|
|
|
|
&.green
|
|
border-color: #189304
|
|
background-color: #104404
|
|
|
|
&.red
|
|
border-color: #930f04
|
|
background-color: #440604
|
|
|
|
.icon
|
|
width: 22px
|
|
height: 22px
|
|
background-size: 22px 22px
|
|
background-repeat: no-repeat
|
|
|
|
&.loading
|
|
background-image: url(/static/images/loading.gif)
|
|
|
|
&.check
|
|
background-image: url(/static/images/check.svg)
|
|
|
|
&.x
|
|
background-image: url(/static/images/x.svg)
|
|
|
|
.close-overlay
|
|
display: none
|
|
|
|
// Don't ask me how this works...
|
|
@at-root
|
|
.toast
|
|
#{$container}:hover &
|
|
filter: brightness(0.5)
|
|
|
|
.close-overlay
|
|
#{$container}:hover &
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
display: block
|
|
width: 100%
|
|
height: 100%
|
|
z-index: 1
|
|
background-image: url(/static/images/x.svg)
|
|
background-size: 11px 11px
|
|
background-repeat: no-repeat
|
|
background-position: 50% 50%
|
|
cursor: pointer
|