diff options
author | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 |
commit | 48cb00040763459fc46d4aa108bf72c12f48f422 (patch) | |
tree | 9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/_utils.scss | |
parent | Update (diff) | |
download | iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2 iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip |
WIP: Refactoring
Diffstat (limited to 'src/_utils.scss')
-rw-r--r-- | src/_utils.scss | 47 |
1 files changed, 20 insertions, 27 deletions
diff --git a/src/_utils.scss b/src/_utils.scss index d11a42c..e551136 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
@@ -1,13 +1,16 @@ | |||
1 | @use 'sass:map'; | ||
1 | @use 'iro-sass/src/index' as iro; | 2 | @use 'iro-sass/src/index' as iro; |
2 | @use 'functions' as fn; | 3 | @use 'functions' as fn; |
3 | @use 'include-media/dist/include-media' as media; | 4 | @use 'include-media/dist/include-media' as media; |
4 | 5 | ||
5 | $dirs: ( | 6 | $dirs: ( |
6 | '': '', | 7 | '': '', |
7 | 't': '-top', | 8 | 'bs': '-block-start', |
8 | 'r': '-right', | 9 | 'be': '-block-end', |
9 | 'b': '-bottom', | 10 | 'b': '-block', |
10 | 'l': '-left', | 11 | 'is': '-inline-start', |
12 | 'ie': '-inline-end', | ||
13 | 'i': '-inline', | ||
11 | ); | 14 | ); |
12 | 15 | ||
13 | @include iro.bem-utility('d-block') { | 16 | @include iro.bem-utility('d-block') { |
@@ -29,7 +32,7 @@ $dirs: ( | |||
29 | @include iro.bem-utility('d-none') { | 32 | @include iro.bem-utility('d-none') { |
30 | display: none; | 33 | display: none; |
31 | 34 | ||
32 | @each $breakpoint in map-keys(media.$breakpoints) { | 35 | @each $breakpoint in map.keys(media.$breakpoints) { |
33 | @include media.media('<=#{$breakpoint}') { | 36 | @include media.media('<=#{$breakpoint}') { |
34 | @include iro.bem-suffix('#{$breakpoint}-lo') { | 37 | @include iro.bem-suffix('#{$breakpoint}-lo') { |
35 | display: none; | 38 | display: none; |
@@ -62,12 +65,12 @@ $dirs: ( | |||
62 | } | 65 | } |
63 | } | 66 | } |
64 | 67 | ||
65 | @include iro.bem-utility('ta-left') { | 68 | @include iro.bem-utility('ta-start') { |
66 | text-align: left; | 69 | text-align: start; |
67 | } | 70 | } |
68 | 71 | ||
69 | @include iro.bem-utility('ta-right') { | 72 | @include iro.bem-utility('ta-end') { |
70 | text-align: right; | 73 | text-align: end; |
71 | } | 74 | } |
72 | 75 | ||
73 | @include iro.bem-utility('ta-center') { | 76 | @include iro.bem-utility('ta-center') { |
@@ -102,28 +105,23 @@ $dirs: ( | |||
102 | justify-content: flex-end; | 105 | justify-content: flex-end; |
103 | } | 106 | } |
104 | 107 | ||
105 | @include iro.bem-utility('c-strong') { | 108 | @include iro.bem-utility('c-heading') { |
106 | color: fn.color(--fg-lo); | 109 | color: fn.color(--heading); |
107 | } | 110 | } |
108 | 111 | ||
109 | @include iro.bem-utility('c-fg') { | 112 | @include iro.bem-utility('c-text') { |
110 | color: fn.color(--fg); | 113 | color: fn.color(--text); |
111 | } | 114 | } |
112 | 115 | ||
113 | @include iro.bem-utility('c-muted') { | 116 | @include iro.bem-utility('c-mute') { |
114 | color: fn.color(--fg-hi); | 117 | color: fn.color(--text-mute); |
115 | } | ||
116 | |||
117 | @include iro.bem-utility('c-muted-hi') { | ||
118 | color: fn.color(--fg-hi2); | ||
119 | } | 118 | } |
120 | 119 | ||
121 | @include iro.bem-utility('mt-neutralize') { | 120 | @include iro.bem-utility('mt-neutralize') { |
122 | &::before { | 121 | &::before { |
123 | content: ''; | 122 | content: ''; |
124 | display: block; | 123 | display: block; |
125 | margin-top: -100em; | 124 | margin-block: -100em 100em; |
126 | margin-bottom: 100em; | ||
127 | } | 125 | } |
128 | } | 126 | } |
129 | 127 | ||
@@ -170,11 +168,6 @@ $dirs: ( | |||
170 | top: 0; | 168 | top: 0; |
171 | } | 169 | } |
172 | 170 | ||
173 | @include iro.bem-utility('themed') { | ||
174 | background-color: fn.global-color(--bg); | ||
175 | color: fn.global-color(--fg); | ||
176 | } | ||
177 | |||
178 | @each $dir, $suffix in $dirs { | 171 | @each $dir, $suffix in $dirs { |
179 | @include iro.bem-utility('m#{$dir}-auto') { | 172 | @include iro.bem-utility('m#{$dir}-auto') { |
180 | margin#{$suffix}: auto; | 173 | margin#{$suffix}: auto; |
@@ -199,6 +192,6 @@ $dirs: ( | |||
199 | } | 192 | } |
200 | 193 | ||
201 | @include iro.bem-utility('b#{$dir}-1') { | 194 | @include iro.bem-utility('b#{$dir}-1') { |
202 | border#{$suffix}: 1px solid fn.global-color(--border --stable); | 195 | border#{$suffix}: 1px solid fn.global-color(--border); |
203 | } | 196 | } |
204 | } | 197 | } |