101 lines
1.9 KiB
SCSS
101 lines
1.9 KiB
SCSS
/*
|
|
* Alerts
|
|
* @see https://designsystem.digital.gov/components/alerts/
|
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
|
|
*/
|
|
|
|
.usa-alert-heading {
|
|
line-height: 2.4rem;
|
|
margin-bottom: $gap;
|
|
}
|
|
|
|
.usa-alert {
|
|
padding-bottom: 2.4rem;
|
|
max-width: $max-panel-width;
|
|
}
|
|
|
|
@mixin alert {
|
|
padding: $gap * 2;
|
|
border-left-width: $gap / 2;
|
|
border-left-style: solid;
|
|
|
|
@include panel-margin;
|
|
|
|
@include media($medium-screen) {
|
|
padding: $gap * 4;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
|
|
.usa-button {
|
|
background-color: $color-gold;
|
|
box-shadow: inset 0 0 0 2px $color-gold;
|
|
|
|
&:hover {
|
|
background-color: $color-gold-dark;
|
|
box-shadow: inset 0 0 0 2px $color-gold-dark;
|
|
}
|
|
}
|
|
} @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;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.alert__content {
|
|
flex: 1;
|
|
|
|
.alert__message {
|
|
&:last-child {
|
|
> *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert__actions {
|
|
.icon-link {
|
|
@include icon-link-color($color-primary, $color-white);
|
|
|
|
&:first-child {
|
|
margin-left: -$gap;
|
|
}
|
|
}
|
|
}
|
|
}
|