2018-07-17 21:40:25 +02:00
|
|
|
.flashes {
|
2018-10-06 00:46:08 +02:00
|
|
|
width: 100%;
|
2018-07-17 21:40:25 +02:00
|
|
|
top: 4rem; right: 0;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
z-index: 9;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flash {
|
2018-10-06 00:46:08 +02:00
|
|
|
padding: 0.5rem 1rem;
|
|
|
|
right: 2rem;
|
|
|
|
|
2018-07-17 21:40:25 +02:00
|
|
|
border: 2px solid;
|
|
|
|
border-radius: 3px;
|
|
|
|
font-size: 1rem;
|
|
|
|
line-height: 1.33;
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
&:not(.error):not(.info):not(.warning) {
|
|
|
|
background-color: mix($white, $teal, 90%);
|
|
|
|
border-color: $teal;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(.active) {
|
|
|
|
transform: translateY(-4rem);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
animation: slide-down 2s linear;
|
|
|
|
transform: translateY(-4rem);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.error {
|
|
|
|
background-color: mix($white, $red, 90%);
|
|
|
|
border-color: $red;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.info {
|
|
|
|
background-color: mix($white, $gray, 90%);
|
|
|
|
border-color: $gray;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.warning {
|
|
|
|
background-color: mix($white, $yellow, 90%);
|
|
|
|
border-color: $yellow;
|
|
|
|
}
|
|
|
|
}
|