summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
committerVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
commit50f6acc739f24bfa2ca080d08e90d82f8fa83543 (patch)
tree404dbe97d34b7e4fc3293c8e6a8c92d9941ac51e /src/objects/_heading.scss
parentColors (diff)
downloadiro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.gz
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.bz2
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.zip
Revamped variable management
Diffstat (limited to 'src/objects/_heading.scss')
-rw-r--r--src/objects/_heading.scss118
1 files changed, 0 insertions, 118 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
deleted file mode 100644
index 7990a6b..0000000
--- a/src/objects/_heading.scss
+++ /dev/null
@@ -1,118 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4@use '../config';
5@use 'include-media/dist/include-media' as media;
6
7$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
8
9@include iro.props-namespace('heading') {
10 @include iro.props-store((
11 --dims: (
12 --offset: -.02em,
13 ),
14 --colors: (
15 --bg: fn.global-color(--base --50),
16 ),
17 ));
18
19 @include iro.bem-object(iro.props-namespace()) {
20 @include mx.set-font(--headline);
21
22 display: block;
23 margin-block-start: fn.global-dim(--heading --margin-bs);
24 transform: translateX(fn.dim(--offset));
25 letter-spacing: normal;
26 text-transform: none;
27
28 & + & {
29 margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
30 }
31
32 @include iro.bem-elem('highlight') {
33 background-image: linear-gradient(
34 to top,
35 transparent .05em,
36 fn.color(--bg) .05em,
37 fn.color(--bg) .5em,
38 transparent .5em
39 );
40 }
41
42 @include iro.bem-modifier('xxl') {
43 @include mx.heading-strong(--xxl);
44 }
45
46 @include iro.bem-modifier('xl') {
47 @include mx.heading-strong(--xl);
48 }
49
50 @include iro.bem-modifier('lg') {
51 @include mx.heading-medium(--lg);
52 }
53
54 @include iro.bem-modifier('md') {
55 @include mx.heading-medium(--md);
56 }
57
58 @include iro.bem-modifier('sm') {
59 @include mx.heading-faint(--sm);
60 }
61
62 @include iro.bem-modifier('xs') {
63 @include mx.heading-faint(--xs);
64 }
65
66 @include iro.bem-modifier('display') {
67 @include mx.set-font(--headline);
68
69 @include iro.bem-modifier('xxl') {
70 @include mx.heading-strong(--display --xxl);
71
72 @include media.media('<=md') {
73 @include mx.heading-strong(--display-sm --xxl);
74 }
75 }
76
77 @include iro.bem-modifier('xl') {
78 @include mx.heading-strong(--display --xl);
79
80 @include media.media('<=md') {
81 @include mx.heading-strong(--display-sm --xl);
82 }
83 }
84
85 @include iro.bem-modifier('lg') {
86 @include mx.heading-strong(--display --lg);
87
88 @include media.media('<=md') {
89 @include mx.heading-strong(--display-sm --lg);
90 }
91 }
92
93 @include iro.bem-modifier('md') {
94 @include mx.heading-strong(--display --md);
95
96 @include media.media('<=md') {
97 @include mx.heading-strong(--display-sm --md);
98 }
99 }
100
101 @include iro.bem-modifier('sm') {
102 @include mx.heading-medium(--display --sm);
103
104 @include media.media('<=md') {
105 @include mx.heading-medium(--display-sm --sm);
106 }
107 }
108
109 @include iro.bem-modifier('xs') {
110 @include mx.heading-faint(--display --xs);
111
112 @include media.media('<=md') {
113 @include mx.heading-faint(--display-sm --xs);
114 }
115 }
116 }
117 }
118}