61 lines
1.2 KiB
SCSS
61 lines
1.2 KiB
SCSS
.notification {
|
|
padding: $spacing-m $spacing-m $spacing-m $spacing-s;
|
|
|
|
.title {
|
|
font-weight: $weight-bold;
|
|
}
|
|
|
|
&.has-border {
|
|
border: 1px solid currentColor;
|
|
border-left-width: 10px;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
$color-lightning: max((100% - lightness($color)) - 2%, 0%);
|
|
$color-luminance: colorLuminance($color);
|
|
$darken-percentage: $color-luminance * 70%;
|
|
$desaturate-percentage: $color-luminance * 30%;
|
|
&.is-#{$name} {
|
|
background-color: lighten($color, $color-lightning);
|
|
border-color: $color;
|
|
color: desaturate(
|
|
darken($color, $darken-percentage),
|
|
$desaturate-percentage
|
|
);
|
|
.delete {
|
|
color: $color;
|
|
}
|
|
.title {
|
|
color: $color-invert;
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-warning {
|
|
.title,
|
|
.delete {
|
|
color: $yellow-darkest;
|
|
}
|
|
border-color: $orange;
|
|
color: $yellow-darkest;
|
|
}
|
|
|
|
& > .delete {
|
|
&:before,
|
|
&:after {
|
|
content: none;
|
|
}
|
|
position: absolute;
|
|
background-color: transparent;
|
|
border: none;
|
|
color: currentColor;
|
|
right: 0.5rem;
|
|
top: 0.5rem;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
}
|