sass-site/source/assets/sass/components/_alerts.scss
2023-03-08 18:59:44 +00:00

67 lines
1.2 KiB
SCSS

@use 'sass:color';
@use '../functions';
@use '../config/color/brand';
@use '../visual-design/typography';
.sl-c-alert {
background: var(--alert-bg, var(--sl-color--highlight));
color: var(--sl-color--white);
font-size: var(--sl-font-size--small);
padding-bottom: var(--alert-padding-block, var(--sl-gutter--minus));
padding-top: var(--alert-padding-block, var(--sl-gutter--minus));
text-align: var(--alert-align, center);
p,
ul,
dl {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
p,
li,
dd {
max-width: none;
}
a {
border-bottom-color: rgba(
brand.$sl-color--white,
var(--opacity-border, 0.5)
);
color: var(--sl-color--white);
font-weight: typography.$sl-font-weight--bold;
&:hover,
&:focus {
--color-link-bg: rgba(0, 0, 0, 6.25%);
--opacity-border: 0.75;
}
&:active {
--opacity-border: 1;
}
}
}
.sl-c-alert--info {
--alert-bg: var(--sl-color--midnight-blue);
}
.sl-c-alert--special {
--alert-align: left;
--alert-bg: black;
--alert-padding-block: var(--sl-gutter--triple);
}
.sl-c-alert-title {
margin-top: 0;
}