diff options
Diffstat (limited to 'src/scopes/_headings.scss')
| -rw-r--r-- | src/scopes/_headings.scss | 90 |
1 files changed, 51 insertions, 39 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 23623fd..a6a7bbb 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
| @@ -1,8 +1,8 @@ | |||
| 1 | @use 'sass:map'; | 1 | @use "sass:map"; |
| 2 | @use 'sass:string'; | 2 | @use "sass:string"; |
| 3 | @use 'pkg:iro-sass/src/bem'; | 3 | @use "pkg:iro-sass/bem"; |
| 4 | @use 'pkg:iro-sass/src/props'; | 4 | @use "pkg:iro-sass/props"; |
| 5 | @use '../objects/heading.vars' as heading; | 5 | @use "../objects/heading.vars" as heading; |
| 6 | 6 | ||
| 7 | @mixin styles { | 7 | @mixin styles { |
| 8 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ | 8 | /* stylelint-disable-next-line scss/dollar-variable-pattern */ |
| @@ -15,56 +15,62 @@ | |||
| 15 | xxl: h1, | 15 | xxl: h1, |
| 16 | ); | 16 | ); |
| 17 | 17 | ||
| 18 | @include bem.scope('headings') { | 18 | @include bem.scope("headings") { |
| 19 | h1, | 19 | h1, |
| 20 | h2, | 20 | h2, |
| 21 | h3, | 21 | h3, |
| 22 | h4, | 22 | h4, |
| 23 | h5, | 23 | h5, |
| 24 | h6 { | 24 | h6 { |
| 25 | display: block; | 25 | display: block; |
| 26 | margin-block-start: props.get(heading.$margin-bs); | 26 | margin-block-start: props.get(heading.$margin-bs); |
| 27 | font-family: props.get(heading.$font-family); | 27 | font-family: props.get(heading.$font-family); |
| 28 | font-weight: props.get(heading.$font-weight); | 28 | font-weight: props.get(heading.$font-weight); |
| 29 | font-feature-settings: props.get(heading.$feature-settings); | 29 | font-feature-settings: props.get(heading.$feature-settings); |
| 30 | line-height: props.get(heading.$line-height); | 30 | line-height: props.get(heading.$line-height); |
| 31 | text-transform: props.get(heading.$text-transform); | 31 | text-transform: props.get(heading.$text-transform); |
| 32 | letter-spacing: normal; | 32 | letter-spacing: normal; |
| 33 | transform: translateX(props.get(heading.$offset)); | 33 | transform: translateX(props.get(heading.$offset)); |
| 34 | } | 34 | } |
| 35 | 35 | ||
| 36 | @include bem.elem('highlight') { | 36 | @include bem.elem("highlight") { |
| 37 | background-image: linear-gradient(to top, | 37 | background-image: linear-gradient( |
| 38 | transparent .15em, | 38 | to top, |
| 39 | props.get(heading.$bg-color) .15em, | 39 | transparent 0.15em, |
| 40 | props.get(heading.$bg-color) .6em, | 40 | props.get(heading.$bg-color) 0.15em, |
| 41 | transparent .6em); | 41 | props.get(heading.$bg-color) 0.6em, |
| 42 | transparent 0.6em | ||
| 43 | ); | ||
| 42 | } | 44 | } |
| 43 | 45 | ||
| 44 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { | 46 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, |
| 47 | $feature-settings, $text-transform, $text-color in heading.$sizes | ||
| 48 | { | ||
| 45 | #{map.get($-size-map, $mod)} { | 49 | #{map.get($-size-map, $mod)} { |
| 46 | font-family: props.get($font-family); | 50 | font-family: props.get($font-family); |
| 47 | font-size: props.get($font-size); | 51 | font-size: props.get($font-size); |
| 48 | font-weight: props.get($font-weight); | 52 | font-weight: props.get($font-weight); |
| 49 | font-feature-settings: props.get($feature-settings); | 53 | font-feature-settings: props.get($feature-settings); |
| 50 | line-height: props.get($line-height); | 54 | line-height: props.get($line-height); |
| 51 | color: props.get($text-color); | 55 | color: props.get($text-color); |
| 52 | text-transform: props.get($text-transform); | 56 | text-transform: props.get($text-transform); |
| 53 | letter-spacing: props.get($letter-spacing); | 57 | letter-spacing: props.get($letter-spacing); |
| 54 | } | 58 | } |
| 55 | } | 59 | } |
| 56 | 60 | ||
| 57 | @include bem.modifier('display') { | 61 | @include bem.modifier("display") { |
| 58 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { | 62 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, |
| 63 | $feature-settings, $text-transform, $text-color in heading.$display--sizes | ||
| 64 | { | ||
| 59 | #{map.get($-size-map, $mod)} { | 65 | #{map.get($-size-map, $mod)} { |
| 60 | font-family: props.get($font-family); | 66 | font-family: props.get($font-family); |
| 61 | font-size: props.get($font-size); | 67 | font-size: props.get($font-size); |
| 62 | font-weight: props.get($font-weight); | 68 | font-weight: props.get($font-weight); |
| 63 | font-feature-settings: props.get($feature-settings); | 69 | font-feature-settings: props.get($feature-settings); |
| 64 | line-height: props.get($line-height); | 70 | line-height: props.get($line-height); |
| 65 | color: props.get($text-color); | 71 | color: props.get($text-color); |
| 66 | text-transform: props.get($text-transform); | 72 | text-transform: props.get($text-transform); |
| 67 | letter-spacing: props.get($letter-spacing); | 73 | letter-spacing: props.get($letter-spacing); |
| 68 | } | 74 | } |
| 69 | } | 75 | } |
| 70 | } | 76 | } |
| @@ -79,10 +85,16 @@ | |||
| 79 | } | 85 | } |
| 80 | } | 86 | } |
| 81 | 87 | ||
| 82 | @include bem.modifier('display') { | 88 | @include bem.modifier("display") { |
| 83 | @each $mod, $value in heading.$sizes { | 89 | @each $mod, $value in heading.$sizes { |
| 84 | #{map.get($-size-map, $mod)} { | 90 | #{map.get($-size-map, $mod)} { |
| 85 | color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color); | 91 | color: props.get( |
| 92 | heading.$static-themes, | ||
| 93 | $theme, | ||
| 94 | --display, | ||
| 95 | --#{$mod}, | ||
| 96 | --text-color | ||
| 97 | ); | ||
| 86 | } | 98 | } |
| 87 | } | 99 | } |
| 88 | } | 100 | } |