// Alert variables ———- //
$alert-icons: (
success: "check_circle", warning: "warning", error: "error", info: "info", emergency: "error",
);
$alert-padding-left: units($theme-alert-padding-x) +
units($theme-alert-bar-width);
.usa-alert {
@include typeset($theme-alert-font-family); @include border-box-sizing; background-color: color("base-lightest"); background-position: $alert-padding-left units($theme-alert-padding-x - 1); background-repeat: no-repeat; background-size: units($theme-alert-icon-size); padding-bottom: units(2); padding-left: $alert-padding-left; padding-right: units($theme-alert-padding-x); padding-top: units($theme-alert-padding-x); position: relative; * + & { margin-top: units(2); } // TODO: why is this not simply a border? &::before { background-color: color("base-light"); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: units($theme-alert-bar-width); } > .usa-list, .usa-alert__body > .usa-list { padding-left: 0; &:last-child { margin-bottom: 0; } }
}
.usa-alert__icon {
display: table-cell; padding-right: units($theme-alert-bar-width);
}
.usa-alert__body {
display: table-cell; vertical-align: top;
}
.usa-alert__heading {
@include typeset($theme-alert-font-family, "lg", 1); margin-top: 0; margin-bottom: units(1);
}
.usa-alert__text {
@include u-margin-y(0); a { @include typeset-link; }
}
.usa-alert__text:only-child {
margin-bottom: units($theme-alert-bar-width); padding-top: units(0.5);
}
@each $name, $icon in $alert-icons {
.usa-alert--#{$name} { @include alert-status-styles($name, $icon); }
}
.usa-alert–slim {
@include alert-slim-styles;
}
.usa-alert–no-heading {
background-position: $alert-padding-left calc(#{units($theme-alert-padding-x)} - #{units(0.5)});
}
.usa-alert–validation {
background-size: units(3); background-position: $alert-padding-left calc(#{units($theme-alert-padding-x)} - #{units(2px)}); .usa-alert__body { padding-left: units(5); } .usa-checklist { margin-top: units(2); }
}