mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
103 lines
3.2 KiB
Sass
103 lines
3.2 KiB
Sass
$title-color: var(--text-strong, #{$text-strong}) !default
|
|
$title-family: false !default
|
|
$title-size: var(--size-3, #{$size-3}) !default
|
|
$title-weight: var(--weight-semibold, #{$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: var(--text, #{$text}) !default
|
|
$subtitle-family: false !default
|
|
$subtitle-size: var(--size-5, #{$size-5}) !default
|
|
$subtitle-weight: var(--weight-normal, #{$weight-normal}) !default
|
|
$subtitle-line-height: 1.25 !default
|
|
$subtitle-strong-color: var(--text-strong, #{$text-strong}) !default
|
|
$subtitle-strong-weight: var(--weight-semibold, #{$weight-semibold}) !default
|
|
$subtitle-negative-margin: -1.25rem !default
|
|
|
|
.title,
|
|
.subtitle
|
|
--title-sub-size: #{$title-sub-size}
|
|
--title-sup-size: #{$title-sup-size}
|
|
@extend %block
|
|
word-break: break-word
|
|
em,
|
|
span
|
|
font-weight: inherit
|
|
sub
|
|
font-size: var(--title-sub-size)
|
|
sup
|
|
font-size: var(--title-sup-size)
|
|
.tag
|
|
vertical-align: middle
|
|
|
|
.title
|
|
// Approach A
|
|
// CSS Variable takes precedence, if theme is included
|
|
// --title-color: var(--text-strong, #{$title-color})
|
|
// color: var(--title-color)
|
|
|
|
// Approach B
|
|
// Sass Variable takes precedence
|
|
// Problem: --title-color is always set, so the fallback is never used
|
|
// --title-color: #{$title-color}
|
|
// color: var(--title-color, var(--text-strong))
|
|
|
|
// Approach C
|
|
// Sass variable references a CSS variable with fallback
|
|
// $title-color: var(--text-strong, #{$text-strong})
|
|
--title-color: #{$title-color}
|
|
color: var(--title-color)
|
|
|
|
--title-size: #{$title-size}
|
|
--title-weight: #{$title-weight}
|
|
--title-line-height: #{$title-line-height}
|
|
--title-strong-color: #{$title-strong-color}
|
|
--title-strong-weight: #{$title-strong-weight}
|
|
font-size: var(--title-size)
|
|
font-weight: var(--title-weight)
|
|
line-height: var(--title-line-height)
|
|
@if $title-family
|
|
--title-family: #{$title-family}
|
|
font-family: var(--title-family)
|
|
strong
|
|
color: var(--title-strong-color)
|
|
font-weight: var(--title-strong-weight)
|
|
& + .highlight
|
|
margin-top: -0.75rem
|
|
&:not(.is-spaced) + .subtitle
|
|
margin-top: var(--subtitle-negative-margin)
|
|
// Sizes
|
|
@each $size in $sizes
|
|
$i: index($sizes, $size)
|
|
&.is-#{$i}
|
|
font-size: $size
|
|
|
|
.subtitle
|
|
--subtitle-negative-margin: #{$subtitle-negative-margin}
|
|
--subtitle-color: #{$subtitle-color}
|
|
--subtitle-size: #{$subtitle-size}
|
|
--subtitle-weight: #{$subtitle-weight}
|
|
--subtitle-line-height: #{$subtitle-line-height}
|
|
--subtitle-strong-color: #{$subtitle-strong-color}
|
|
--subtitle-strong-weight: #{$subtitle-strong-weight}
|
|
color: var(--subtitle-color)
|
|
font-size: var(--subtitle-size)
|
|
font-weight: var(--subtitle-weight)
|
|
line-height: var(--subtitle-line-height)
|
|
@if $subtitle-family
|
|
--subtitle-family: #{$subtitle-family}
|
|
font-family: var(--subtitle-family)
|
|
strong
|
|
color: var(--subtitle-strong-color)
|
|
font-weight: var(--subtitle-strong-weight)
|
|
&:not(.is-spaced) + .title
|
|
margin-top: var(--subtitle-negative-margin)
|
|
// Sizes
|
|
@each $size in $sizes
|
|
$i: index($sizes, $size)
|
|
&.is-#{$i}
|
|
font-size: $size
|