summaryrefslogtreecommitdiffstats
path: root/src/scopes/_headings.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
committerVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
commit41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/scopes/_headings.scss
parentFix button font size (diff)
downloadiro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
Switch to tab indentationHEADmaster
Diffstat (limited to 'src/scopes/_headings.scss')
-rw-r--r--src/scopes/_headings.scss112
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}