philomena/assets/css/elements/_flash.scss
2023-11-23 22:20:02 +01:00

48 lines
907 B
SCSS

@mixin flash-type($type) {
.flash--#{$type} {
border: 1px solid var(--#{$type}-border-color);
background: var(--#{$type}-color);
.flash__message {
border-left: 1px solid var(--#{$type}-border-color);
}
& a {
color: var(--#{$type}-link-color);
&:hover {
color: var(--link-hover-color);
}
}
}
}
.flash {
display: grid;
grid-template-columns: auto 1fr;
margin: var(--padding-normal);
margin-bottom: 0;
border-radius: var(--border-radius-inner);
}
@include if-phone {
.flash {
margin: var(--padding-small);
margin-bottom: 0;
}
}
.flash__icon {
@extend .flex__column--centered;
padding: var(--padding-normal);
}
.flash__message {
padding: var(--padding-normal);
}
@include flash-type(success);
@include flash-type(warning);
@include flash-type(danger);
@include flash-type(information);
@include flash-type(purple);