// Alert variables ———- // $usa-custom-alerts: () !default; $usa-custom-alerts-bar: () !default;
$usa-alerts: (
success: $color-green-lightest, warning: $color-gold-lightest, error: $color-secondary-lightest, info: $color-primary-alt-lightest
);
$usa-alerts-bar: (
success: $color-green, warning: $color-gold, error: $color-secondary, info: $color-primary-alt
);
$alerts: map-merge($usa-alerts, $usa-custom-alerts); $alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
$h-padding: $spacing-medium; $bar-size: $spacing-small; $left-padding: $h-padding + $bar-size; $icon-size: 3rem;
.usa-alert {
background-color: $color-gray-lightest; background-position: $h-padding $h-padding; background-repeat: no-repeat; background-size: 5.2rem; // TODO abrituary number based on svg size maybe? padding-bottom: $h-padding * 0.7; padding-left: $left-padding; padding-right: $h-padding; padding-top: $h-padding; position: relative; &::before { background-color: darken($color-gray-lightest, 40%); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: $bar-size; } a { color: $color-primary-darker; &:focus, &:hover { color: $color-primary-darkest; } } ul { margin-bottom: 0; margin-top: $spacing-small; padding-left: $spacing-small; }
}
.usa-alert-slim {
background-position: $h-padding $spacing-small; padding-bottom: $spacing-small; padding-top: $spacing-small; .usa-alert-text:only-child { margin-bottom: $spacing-x-small; padding-top: $spacing-x-small; }
}
.usa-alert-icon {
display: table-cell; padding-right: $spacing-small;
}
.usa-alert-body {
display: table-cell; vertical-align: top;
}
.usa-alert-heading {
margin-top: 0; margin-bottom: 0;
}
.usa-alert-text {
font-family: $font-sans; margin-bottom: 0; margin-top: 0;
}
.usa-alert-text:only-child {
margin-bottom: $spacing-small; padding-top: $spacing-x-small;
}
@each $name, $bgcolor in $alerts {
.usa-alert-#{$name} { background-color: $bgcolor; background-image: url('#{$image-path}/alerts/#{$name}.png'); background-image: url('#{$image-path}/alerts/#{$name}.svg'); &::before { background-color: map-get($alerts-bar, $name); } .usa-alert-body { padding-left: $icon-size + $h-padding; } }
}
.usa-alert-no_icon {
background-image: none;
}
.usa-alert-paragraph {
width: $text-max-width;
}
// Deprecated .usa-alert {
margin-top: 1.5em; // TODO deprecate
}