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