35 lines
789 B
SCSS
35 lines
789 B
SCSS
.alert {
|
|
position: relative;
|
|
padding: .75rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
border: 0 solid transparent;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
// Headings for larger alerts
|
|
.alert-heading {
|
|
// Specified to prevent conflicts of changing headings-color
|
|
color: inherit;
|
|
}
|
|
|
|
// Provide class for links that match alerts
|
|
.alert-link {
|
|
font-weight: 400;
|
|
}
|
|
|
|
@each $color-name, $unused in global.$colors {
|
|
.alert-#{$color-name} {
|
|
--color-base: var(--#{$color-name});
|
|
color: var(--#{$color-name}-shade);
|
|
border-color: var(--color-base);
|
|
background-color: var(--#{$color-name}-tint);
|
|
|
|
.alert-link, a {
|
|
color: var(--#{$color-name}-shade);
|
|
}
|
|
}
|
|
.alert-#{$color-name} p {
|
|
color: var(--color-base);
|
|
}
|
|
}
|