// Alert variables ———- //
$alert-icons: (
info: "info", emergency: "error",
);
@mixin site-alert-icon-margin {
background-position-x: units($theme-site-margins-mobile-width); @include at-media($theme-site-margins-breakpoint) { background-position-x: units($theme-site-margins-width); }
}
.usa-site-alert {
position: relative; background-color: color("base-lightest"); .usa-alert { @include grid-container($theme-site-alert-max-width); @include site-alert-icon-margin; &::before { display: none; } > .usa-list, .usa-alert__body > .usa-list { padding-left: 2ch; } } .usa-alert__body { display: block; @include at-media("tablet") { position: relative; } }
}
@each $name, $icon in $alert-icons {
.usa-site-alert--#{$name} { $bgcolor: if($name != "emergency", "#{$name}-lighter", $name); @include set-text-and-bg($bgcolor); .usa-alert { @include alert-status-styles($name, $icon); } }
}
.usa-site-alert–no-icon {
.usa-alert { background-image: none; .usa-alert__body { padding-left: 0; } }
}
.usa-site-alert–slim {
.usa-alert { @include alert-slim-styles; @include site-alert-icon-margin; }
}
.usa-site-alert–no-heading {
.usa-alert { background-position-y: calc( #{units($theme-alert-padding-x)} - #{units(0.5)} ); }
}