diff options
Diffstat (limited to 'src/scopes/_headings.scss')
| -rw-r--r-- | src/scopes/_headings.scss | 112 |
1 files changed, 56 insertions, 56 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 32559cd..f8a7854 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -4,64 +4,64 @@ | |||
| 4 | @use '../objects/heading.vars' as heading; | 4 | @use '../objects/heading.vars' as heading; |
| 5 | 5 | ||
| 6 | @mixin styles { | 6 | @mixin styles { |
| 7 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ | 7 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ |
| 8 | $-size-map: ( | 8 | $-size-map: ( |
| 9 | xs: h6, | 9 | xs: h6, |
| 10 | sm: h5, | 10 | sm: h5, |
| 11 | md: h4, | 11 | md: h4, |
| 12 | lg: h3, | 12 | lg: h3, |
| 13 | xl: h2, | 13 | xl: h2, |
| 14 | xxl: h1, | 14 | xxl: h1, |
| 15 | ); | 15 | ); |
| 16 | 16 | ||
| 17 | @include bem.scope('headings') { | 17 | @include bem.scope('headings') { |
| 18 | h1, | 18 | h1, |
| 19 | h2, | 19 | h2, |
| 20 | h3, | 20 | h3, |
| 21 | h4, | 21 | h4, |
| 22 | h5, | 22 | h5, |
| 23 | h6 { | 23 | h6 { |
| 24 | display: block; | 24 | display: block; |
| 25 | margin-block-start: props.get(heading.$margin-bs); | 25 | margin-block-start: props.get(heading.$margin-bs); |
| 26 | font-family: props.get(heading.$font-family); | 26 | font-family: props.get(heading.$font-family); |
| 27 | font-weight: props.get(heading.$font-weight); | 27 | font-weight: props.get(heading.$font-weight); |
| 28 | font-feature-settings: props.get(heading.$feature-settings); | 28 | font-feature-settings: props.get(heading.$feature-settings); |
| 29 | line-height: props.get(heading.$line-height); | 29 | line-height: props.get(heading.$line-height); |
| 30 | text-transform: none; | 30 | text-transform: none; |
| 31 | letter-spacing: normal; | 31 | letter-spacing: normal; |
| 32 | transform: translateX(props.get(heading.$offset)); | 32 | transform: translateX(props.get(heading.$offset)); |
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | @include bem.elem('highlight') { | 35 | @include bem.elem('highlight') { |
| 36 | background-image: linear-gradient(to top, | 36 | background-image: linear-gradient(to top, |
| 37 | transparent .15em, | 37 | transparent .15em, |
| 38 | props.get(heading.$bg-color) .15em, | 38 | props.get(heading.$bg-color) .15em, |
| 39 | props.get(heading.$bg-color) .6em, | 39 | props.get(heading.$bg-color) .6em, |
| 40 | transparent .6em); | 40 | transparent .6em); |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { | 43 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { |
| 44 | #{map.get($-size-map, $mod)} { | 44 | #{map.get($-size-map, $mod)} { |
| 45 | font-family: props.get($font-family); | 45 | font-family: props.get($font-family); |
| 46 | font-size: props.get($font-size); | 46 | font-size: props.get($font-size); |
| 47 | font-weight: props.get($font-weight); | 47 | font-weight: props.get($font-weight); |
| 48 | font-feature-settings: props.get($feature-settings); | 48 | font-feature-settings: props.get($feature-settings); |
| 49 | line-height: props.get($line-height); | 49 | line-height: props.get($line-height); |
| 50 | letter-spacing: props.get($letter-spacing); | 50 | letter-spacing: props.get($letter-spacing); |
| 51 | } | 51 | } |
| 52 | } | 52 | } |
| 53 | 53 | ||
| 54 | @include bem.modifier('display') { | 54 | @include bem.modifier('display') { |
| 55 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { | 55 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { |
| 56 | #{map.get($-size-map, $mod)} { | 56 | #{map.get($-size-map, $mod)} { |
| 57 | font-family: props.get($font-family); | 57 | font-family: props.get($font-family); |
| 58 | font-size: props.get($font-size); | 58 | font-size: props.get($font-size); |
| 59 | font-weight: props.get($font-weight); | 59 | font-weight: props.get($font-weight); |
| 60 | font-feature-settings: props.get($feature-settings); | 60 | font-feature-settings: props.get($feature-settings); |
| 61 | line-height: props.get($line-height); | 61 | line-height: props.get($line-height); |
| 62 | letter-spacing: props.get($letter-spacing); | 62 | letter-spacing: props.get($letter-spacing); |
| 63 | } | 63 | } |
| 64 | } | 64 | } |
| 65 | } | 65 | } |
| 66 | } | 66 | } |
| 67 | } | 67 | } |