/* * 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; } @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; } } } } .alert { @include alert; @include alert-level("info"); &.alert--success { @include alert-level("success"); .alert__actions { .icon-link { @include icon-link-color($color-green, $color-white); } } } &.alert--warning { @include alert-level("warning"); .alert__actions { .icon-link { @include icon-link-color($color-gold-dark, $color-white); } } } &.alert--error { @include alert-level("error"); .alert__actions { .icon-link { @include icon-link-color($color-red, $color-white); } } } }