Sha256: d8ac904acacfe7ff372e8fa73872ceff7dd71612e357e8e27ef883495afe351a
Contents?: true
Size: 1.58 KB
Versions: 9
Compression:
Stored size: 1.58 KB
Contents
// Alert variables ---------- //
$usa-custom-alerts: () !default;
$usa-alerts: (
success: $color-green-lightest,
warning: $color-gold-lightest,
error: $color-secondary-lightest,
info: $color-primary-alt-lightest
);
$alerts: map-merge($usa-alerts, $usa-custom-alerts);
.usa-alert {
background-color: $color-gray-lightest;
background-position: 1rem 2rem;
background-repeat: no-repeat;
background-size: 4rem;
margin-top: 1.5em;
padding: 1em;
@include media($medium-screen) {
background-size: 5.2rem;
}
a {
color: $color-primary-darker;
&:focus,
&:hover {
color: $color-primary-darkest;
}
}
ul {
margin-bottom: 0;
margin-top: 1em;
padding-left: 1em;
}
}
.usa-alert-icon {
display: table-cell;
padding-right: 1rem;
}
.usa-alert-body {
display: table-cell;
padding-left: 3.5rem;
vertical-align: top;
@include media($medium-screen) {
padding-left: 5rem;
}
p:first-child {
margin-top: 0.8rem;
}
p:last-child {
margin-bottom: 0.8rem;
}
}
.usa-alert-heading {
margin-bottom: .3rem;
margin-top: 0;
@include media($medium-screen) {
margin-top: .3rem;
}
}
.usa-alert-text {
font-family: $font-sans;
margin-bottom: 0;
margin-top: 0;
}
@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');
}
}
.usa-alert-no_icon {
background-image: none;
}
.usa-alert-paragraph {
width: $text-max-width;
padding: 1em 3em 1em 1em;
}
Version data entries
9 entries across 6 versions & 2 rubygems