diff options
Diffstat (limited to 'src/objects/_heading.scss')
-rw-r--r-- | src/objects/_heading.scss | 44 |
1 files changed, 24 insertions, 20 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index a0ce052..393fe14 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -1,4 +1,5 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | ||
2 | @use '../vars'; | 3 | @use '../vars'; |
3 | @use '../mixins/typography'; | 4 | @use '../mixins/typography'; |
4 | 5 | ||
@@ -6,61 +7,64 @@ | |||
6 | @include iro.props-store(( | 7 | @include iro.props-store(( |
7 | --dims: ( | 8 | --dims: ( |
8 | --in-page-margin: ( | 9 | --in-page-margin: ( |
9 | --top: iro.props-get(--dims --spacing --y --lg, $global: true), | 10 | --top: fn.dim(--spacing --y --lg, $global: true), |
10 | --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true), | 11 | --top-sibling: fn.dim(--spacing --y --md, $global: true), |
11 | --bottom: iro.props-get(--dims --spacing --y --sm, $global: true), | 12 | --bottom: fn.dim(--spacing --y --sm, $global: true), |
12 | ), | 13 | ), |
13 | ), | 14 | ), |
15 | ), 'dims'); | ||
16 | |||
17 | @include iro.props-store(( | ||
14 | --colors: ( | 18 | --colors: ( |
15 | --light: iro.props-get(--colors --fg-hi, $global: true), | 19 | --light: fn.color(--fg-hi, $global: true), |
16 | --strong: iro.props-get(--colors --fg-lo, $global: true), | 20 | --strong: fn.color(--fg-lo, $global: true), |
17 | ), | 21 | ), |
18 | )); | 22 | ), 'colors'); |
19 | 23 | ||
20 | @include iro.bem-object(iro.props-namespace()) { | 24 | @include iro.bem-object(iro.props-namespace()) { |
21 | @include typography.set-font(vars.$font--headline); | 25 | @include typography.set-font(vars.$font--headline); |
22 | 26 | ||
23 | display: block; | 27 | display: block; |
24 | margin-top: iro.props-get(--dims --in-page-margin --top); | 28 | margin-top: fn.dim(--in-page-margin --top); |
25 | margin-bottom: 0; | 29 | margin-bottom: 0; |
26 | 30 | ||
27 | & + & { | 31 | & + & { |
28 | margin-top: iro.props-get(--dims --in-page-margin --top-sibling); | 32 | margin-top: fn.dim(--in-page-margin --top-sibling); |
29 | } | 33 | } |
30 | 34 | ||
31 | @include iro.bem-modifier('xxl') { | 35 | @include iro.bem-modifier('xxl') { |
32 | color: iro.props-get(--colors --strong); | 36 | color: fn.color(--strong); |
33 | font-size: iro.props-get(--dims --font-size --xxxl, $global: true); | 37 | font-size: fn.dim(--font-size --xxxl, $global: true); |
34 | } | 38 | } |
35 | 39 | ||
36 | @include iro.bem-modifier('xl') { | 40 | @include iro.bem-modifier('xl') { |
37 | color: iro.props-get(--colors --strong); | 41 | color: fn.color(--strong); |
38 | font-size: iro.props-get(--dims --font-size --xxl, $global: true); | 42 | font-size: fn.dim(--font-size --xxl, $global: true); |
39 | } | 43 | } |
40 | 44 | ||
41 | @include iro.bem-modifier('lg') { | 45 | @include iro.bem-modifier('lg') { |
42 | color: iro.props-get(--colors --strong); | 46 | color: fn.color(--strong); |
43 | font-size: iro.props-get(--dims --font-size --xl, $global: true); | 47 | font-size: fn.dim(--font-size --xl, $global: true); |
44 | } | 48 | } |
45 | 49 | ||
46 | @include iro.bem-modifier('md') { | 50 | @include iro.bem-modifier('md') { |
47 | color: iro.props-get(--colors --strong); | 51 | color: fn.color(--strong); |
48 | font-size: iro.props-get(--dims --font-size --lg, $global: true); | 52 | font-size: fn.dim(--font-size --lg, $global: true); |
49 | } | 53 | } |
50 | 54 | ||
51 | @include iro.bem-modifier('sm') { | 55 | @include iro.bem-modifier('sm') { |
52 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); | 56 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); |
53 | 57 | ||
54 | color: iro.props-get(--colors --strong); | 58 | color: fn.color(--strong); |
55 | font-size: iro.props-get(--dims --font-size --md, $global: true); | 59 | font-size: fn.dim(--font-size --md, $global: true); |
56 | font-weight: 500; | 60 | font-weight: 500; |
57 | } | 61 | } |
58 | 62 | ||
59 | @include iro.bem-modifier('xs') { | 63 | @include iro.bem-modifier('xs') { |
60 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); | 64 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); |
61 | 65 | ||
62 | color: iro.props-get(--colors --light); | 66 | color: fn.color(--light); |
63 | font-size: iro.props-get(--dims --font-size --xs, $global: true); | 67 | font-size: fn.dim(--font-size --xs, $global: true); |
64 | font-weight: 500; | 68 | font-weight: 500; |
65 | text-transform: uppercase; | 69 | text-transform: uppercase; |
66 | } | 70 | } |