sass-site/source/assets/sass/components/_alerts.scss

66 lines
1.2 KiB
SCSS
Raw Normal View History

2023-01-12 20:54:24 +01:00
@use 'sass:color';
@use '../functions';
@use '../config/color/brand';
2023-01-12 20:54:24 +01:00
@use '../visual-design/typography';
2023-01-12 19:19:42 +01:00
2023-01-06 22:40:29 +01:00
.sl-c-alert {
background: var(--sl-background--alert, var(--sl-color--highlight));
color: var(--sl-color--white);
font-size: var(--sl-font-size--small);
padding-bottom: var(--sl-padding-block--alert, var(--sl-gutter--minus));
padding-top: var(--sl-padding-block--alert, var(--sl-gutter--minus));
text-align: var(--sl-align--alert, center);
2023-01-06 22:40:29 +01:00
p,
ul,
dl {
2023-01-09 20:10:02 +01:00
&:first-child {
margin-top: 0;
}
2023-01-06 22:40:29 +01:00
2023-01-09 20:10:02 +01:00
&:last-child {
margin-bottom: 0;
}
2023-01-06 22:40:29 +01:00
}
p,
li,
2023-01-09 20:10:02 +01:00
dd {
max-width: none;
}
2023-01-06 22:40:29 +01:00
a {
--sl-color--link: var(--sl-color--white);
--sl-background--link-state: rgba(0, 0, 0, 6.25%);
2023-06-21 00:08:26 +02:00
--sl-border-color--link: #{rgba(
brand.$sl-color--white,
var(--opacity-border, 0.5)
)};
2023-01-31 07:13:57 +01:00
font-weight: typography.$sl-font-weight--bold;
2023-01-06 22:40:29 +01:00
&:hover,
&:focus {
--opacity-border: 0.75;
2023-01-06 22:40:29 +01:00
}
2023-01-09 20:10:02 +01:00
&:active {
--opacity-border: 1;
2023-01-09 20:10:02 +01:00
}
2023-01-06 22:40:29 +01:00
}
2023-01-31 07:13:57 +01:00
}
2023-01-06 22:40:29 +01:00
2023-01-31 07:13:57 +01:00
.sl-c-alert--info {
--sl-background--alert: var(--sl-color--midnight-blue);
2023-01-31 07:13:57 +01:00
}
.sl-c-alert--special {
--sl-align--alert: left;
--sl-background--alert: black;
--sl-padding-block--alert: var(--sl-gutter--triple);
2023-01-06 22:40:29 +01:00
}
.sl-c-alert-title {
margin-top: 0;
}