45 lines
834 B
SCSS
45 lines
834 B
SCSS
|
.notification {
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border: 1px solid $grey-blue;
|
||
|
|
|
||
|
|
&.is-pending {
|
||
|
|
background: $grey-blue;
|
||
|
|
color: findColorInvert(darken($grey-blue, 10%));
|
||
|
|
border-color: $grey-blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-running {
|
||
|
|
background: lighten($blue, 40%);
|
||
|
|
color: $blue;
|
||
|
|
border-color: $blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-error {
|
||
|
|
background: lighten($danger, 40%);
|
||
|
|
color: $danger;
|
||
|
|
border-color: $danger;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-cancelled {
|
||
|
|
background: lighten($orange, 40%);
|
||
|
|
color: $orange;
|
||
|
|
border-color: $orange;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $name, $pair in $colors {
|
||
|
|
$color: nth($pair, 1);
|
||
|
|
|
||
|
|
&.is-#{$name} {
|
||
|
|
background: lighten($color, 40%);
|
||
|
|
color: $color;
|
||
|
|
border-color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-light {
|
||
|
|
background: lighten($white-ter, 5%);
|
||
|
|
color: darken($grey-blue, 20%);
|
||
|
|
border-color: $grey-blue;
|
||
|
|
}
|
||
|
|
}
|