atst/styles/components/_alerts.scss
2018-08-03 09:09:07 -04:00

77 lines
1.4 KiB
SCSS

/*
* Alerts
* @see https://designsystem.digital.gov/components/alerts/
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
*/
@mixin alert {
padding: $gap * 2;
border-left-width: $gap / 2;
border-left-style: solid;
@include panel-margin;
}
@mixin alert-level($level) {
$background-color: $color-aqua-lightest;
$border-color: $color-blue;
@if $level == 'success' {
$background-color: $color-green-lightest;
$border-color: $color-green;
} @else if $level == 'warning' {
$background-color: $color-gold-lightest;
$border-color: $color-gold;
} @else if $level == 'error' {
$background-color: $color-red-lightest;
$border-color: $color-red;
}
background-color: $background-color;
border-color: $border-color;
display: flex;
flex-direction: row;
align-items: flex-start;
.alert__icon {
@include icon-color($border-color);
flex-grow: 0;
flex-shrink: 0;
margin-right: $gap * 2;
margin-left: 0;
}
.alert__title {
@include h3;
margin-top: 0;
}
.alert__content {
.alert__message {
&:last-child {
> *:last-child {
margin-bottom: 0;
}
}
}
}
}
.alert {
@include alert;
@include alert-level('info');
&.alert--success {
@include alert-level('success');
}
&.alert--warning {
@include alert-level('warning');
}
&.alert--error {
@include alert-level('error');
}
}