2022-11-23 17:44:02 +00:00
|
|
|
@import "../utilities/mixins";
|
|
|
|
|
|
|
|
$title-color: $text-strong !default;
|
|
|
|
$title-family: false !default;
|
|
|
|
$title-size: $size-3 !default;
|
|
|
|
$title-weight: $weight-semibold !default;
|
|
|
|
$title-line-height: 1.125 !default;
|
|
|
|
$title-strong-color: inherit !default;
|
|
|
|
$title-strong-weight: inherit !default;
|
|
|
|
$title-sub-size: 0.75em !default;
|
|
|
|
$title-sup-size: 0.75em !default;
|
|
|
|
|
|
|
|
$subtitle-color: $text !default;
|
|
|
|
$subtitle-family: false !default;
|
|
|
|
$subtitle-size: $size-5 !default;
|
|
|
|
$subtitle-weight: $weight-normal !default;
|
|
|
|
$subtitle-line-height: 1.25 !default;
|
|
|
|
$subtitle-strong-color: $text-strong !default;
|
|
|
|
$subtitle-strong-weight: $weight-semibold !default;
|
|
|
|
$subtitle-negative-margin: -1.25rem !default;
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
.#{$class-prefix}title,
|
|
|
|
.#{$class-prefix}subtitle {
|
2022-11-23 17:44:02 +00:00
|
|
|
@extend %block;
|
|
|
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
|
|
|
em,
|
|
|
|
span {
|
|
|
|
font-weight: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
sub {
|
|
|
|
font-size: $title-sub-size;
|
|
|
|
}
|
|
|
|
|
|
|
|
sup {
|
|
|
|
font-size: $title-sup-size;
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
.#{$class-prefix}tag {
|
2022-11-23 17:44:02 +00:00
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
.#{$class-prefix}title {
|
2022-11-23 17:44:02 +00:00
|
|
|
color: $title-color;
|
|
|
|
|
|
|
|
@if $title-family {
|
|
|
|
font-family: $title-family;
|
|
|
|
}
|
|
|
|
|
|
|
|
font-size: $title-size;
|
|
|
|
font-weight: $title-weight;
|
|
|
|
line-height: $title-line-height;
|
|
|
|
|
|
|
|
strong {
|
|
|
|
color: $title-strong-color;
|
|
|
|
font-weight: $title-strong-weight;
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
&:not(.is-spaced) + .#{$class-prefix}subtitle {
|
2022-11-23 17:44:02 +00:00
|
|
|
margin-top: $subtitle-negative-margin;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sizes
|
|
|
|
@each $size in $sizes {
|
|
|
|
$i: index($sizes, $size);
|
|
|
|
|
|
|
|
&.is-#{$i} {
|
|
|
|
font-size: $size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
.#{$class-prefix}subtitle {
|
2022-11-23 17:44:02 +00:00
|
|
|
color: $subtitle-color;
|
|
|
|
|
|
|
|
@if $subtitle-family {
|
|
|
|
font-family: $subtitle-family;
|
|
|
|
}
|
|
|
|
|
|
|
|
font-size: $subtitle-size;
|
|
|
|
font-weight: $subtitle-weight;
|
|
|
|
line-height: $subtitle-line-height;
|
|
|
|
|
|
|
|
strong {
|
|
|
|
color: $subtitle-strong-color;
|
|
|
|
font-weight: $subtitle-strong-weight;
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
&:not(.is-spaced) + .#{$class-prefix}title {
|
2022-11-23 17:44:02 +00:00
|
|
|
margin-top: $subtitle-negative-margin;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sizes
|
|
|
|
@each $size in $sizes {
|
|
|
|
$i: index($sizes, $size);
|
|
|
|
|
|
|
|
&.is-#{$i} {
|
|
|
|
font-size: $size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|