philomena/assets/css/elements/_heading.scss
2024-04-17 16:52:50 +02:00

40 lines
871 B
SCSS

@mixin heading($el) {
#{$el} {
font-size: var(--font-#{$el}-size);
font-weight: bold;
font-variant: small-caps;
padding: var(--padding-small) 0;
margin-top: 0;
border-bottom: 1px solid var(--primary-border-color);
}
}
@mixin heading-type($type) {
.heading--#{$type} {
border-bottom-color: var(--#{$type}-border-color);
}
.block--#{$type} {
h1, h2, h3, h4, h5, h6 {
border-bottom-color: var(--#{$type}-border-color);
}
}
}
@include heading(h1);
@include heading(h2);
@include heading(h3);
@include heading(h4);
@include heading(h5);
@include heading(h6);
/* To differentiate between h5 and h6, simply make h6 not bold */
h6 {
font-weight: normal;
}
@include heading-type(success);
@include heading-type(warning);
@include heading-type(danger);
@include heading-type(information);
@include heading-type(purple);