summaryrefslogtreecommitdiffstats
path: root/src/_utils.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_utils.scss')
-rw-r--r--src/_utils.scss102
1 files changed, 51 insertions, 51 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index a96666d..132e8bf 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use 'include-media/dist/include-media' as media; 4@use 'include-media/dist/include-media' as media;
5 5
@@ -32,216 +32,216 @@ $-sizes: (
32) !default; 32) !default;
33 33
34@mixin styles { 34@mixin styles {
35 @include iro.bem-utility('d-block') { 35 @include bem.utility('d-block') {
36 display: block; 36 display: block;
37 } 37 }
38 38
39 @include iro.bem-utility('d-inline-block') { 39 @include bem.utility('d-inline-block') {
40 display: inline-block; 40 display: inline-block;
41 } 41 }
42 42
43 @include iro.bem-utility('d-contents') { 43 @include bem.utility('d-contents') {
44 display: contents; 44 display: contents;
45 } 45 }
46 46
47 @include iro.bem-utility('td-none') { 47 @include bem.utility('td-none') {
48 text-decoration: none; 48 text-decoration: none;
49 } 49 }
50 50
51 @include iro.bem-utility('d-none') { 51 @include bem.utility('d-none') {
52 display: none; 52 display: none;
53 53
54 @each $breakpoint in map.keys(media.$breakpoints) { 54 @each $breakpoint in map.keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') { 55 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-lo') { 56 @include bem.suffix('#{$breakpoint}-lo') {
57 display: none; 57 display: none;
58 } 58 }
59 } 59 }
60 60
61 @include media.media('>#{$breakpoint}') { 61 @include media.media('>#{$breakpoint}') {
62 @include iro.bem-suffix('#{$breakpoint}-hi') { 62 @include bem.suffix('#{$breakpoint}-hi') {
63 display: none; 63 display: none;
64 } 64 }
65 } 65 }
66 } 66 }
67 67
68 @include iro.bem-at-theme('js') { 68 @include bem.at-theme('js') {
69 @include iro.bem-suffix('js') { 69 @include bem.suffix('js') {
70 display: none; 70 display: none;
71 } 71 }
72 } 72 }
73 73
74 @include iro.bem-at-theme('no-js') { 74 @include bem.at-theme('no-js') {
75 @include iro.bem-suffix('no-js') { 75 @include bem.suffix('no-js') {
76 display: none; 76 display: none;
77 } 77 }
78 } 78 }
79 79
80 @include iro.bem-suffix('empty') { 80 @include bem.suffix('empty') {
81 &:empty { 81 &:empty {
82 display: none; 82 display: none;
83 } 83 }
84 } 84 }
85 } 85 }
86 86
87 @include iro.bem-utility('ta-start') { 87 @include bem.utility('ta-start') {
88 text-align: start; 88 text-align: start;
89 } 89 }
90 90
91 @include iro.bem-utility('ta-end') { 91 @include bem.utility('ta-end') {
92 text-align: end; 92 text-align: end;
93 } 93 }
94 94
95 @include iro.bem-utility('ta-center') { 95 @include bem.utility('ta-center') {
96 text-align: center; 96 text-align: center;
97 } 97 }
98 98
99 @include iro.bem-utility('fw-normal') { 99 @include bem.utility('fw-normal') {
100 font-weight: normal; 100 font-weight: normal;
101 } 101 }
102 102
103 @include iro.bem-utility('ai-center') { 103 @include bem.utility('ai-center') {
104 align-items: center; 104 align-items: center;
105 } 105 }
106 106
107 @include iro.bem-utility('ai-start') { 107 @include bem.utility('ai-start') {
108 align-items: flex-start; 108 align-items: flex-start;
109 } 109 }
110 110
111 @include iro.bem-utility('ai-end') { 111 @include bem.utility('ai-end') {
112 align-items: flex-end; 112 align-items: flex-end;
113 } 113 }
114 114
115 @include iro.bem-utility('jc-center') { 115 @include bem.utility('jc-center') {
116 justify-content: center; 116 justify-content: center;
117 } 117 }
118 118
119 @include iro.bem-utility('jc-start') { 119 @include bem.utility('jc-start') {
120 justify-content: flex-start; 120 justify-content: flex-start;
121 } 121 }
122 122
123 @include iro.bem-utility('jc-end') { 123 @include bem.utility('jc-end') {
124 justify-content: flex-end; 124 justify-content: flex-end;
125 } 125 }
126 126
127 @include iro.bem-utility('tt-upper') { 127 @include bem.utility('tt-upper') {
128 text-transform: uppercase; 128 text-transform: uppercase;
129 } 129 }
130 130
131 @include iro.bem-utility('tt-lower') { 131 @include bem.utility('tt-lower') {
132 text-transform: lowercase; 132 text-transform: lowercase;
133 } 133 }
134 134
135 @include iro.bem-utility('c-heading') { 135 @include bem.utility('c-heading') {
136 color: props.get(vars.$theme, --heading); 136 color: props.get(vars.$theme, --heading);
137 } 137 }
138 138
139 @include iro.bem-utility('c-text') { 139 @include bem.utility('c-text') {
140 color: props.get(vars.$theme, --text); 140 color: props.get(vars.$theme, --text);
141 } 141 }
142 142
143 @include iro.bem-utility('c-mute') { 143 @include bem.utility('c-mute') {
144 color: props.get(vars.$theme, --text-mute); 144 color: props.get(vars.$theme, --text-mute);
145 } 145 }
146 146
147 @include iro.bem-utility('c-mute-more') { 147 @include bem.utility('c-mute-more') {
148 color: props.get(vars.$theme, --text-mute-more); 148 color: props.get(vars.$theme, --text-mute-more);
149 } 149 }
150 150
151 @each $dir, $prop in (is: inline-size, bs: block-size) { 151 @each $dir, $prop in (is: inline-size, bs: block-size) {
152 @include iro.bem-utility('#{$dir}-100') { 152 @include bem.utility('#{$dir}-100') {
153 #{$prop}: 100%; 153 #{$prop}: 100%;
154 } 154 }
155 155
156 @include iro.bem-utility('#{$dir}-75') { 156 @include bem.utility('#{$dir}-75') {
157 #{$prop}: 75%; 157 #{$prop}: 75%;
158 } 158 }
159 159
160 @include iro.bem-utility('#{$dir}-50') { 160 @include bem.utility('#{$dir}-50') {
161 #{$prop}: 50%; 161 #{$prop}: 50%;
162 } 162 }
163 163
164 @include iro.bem-utility('#{$dir}-25') { 164 @include bem.utility('#{$dir}-25') {
165 #{$prop}: 25%; 165 #{$prop}: 25%;
166 } 166 }
167 167
168 @include iro.bem-utility('#{$dir}-1px') { 168 @include bem.utility('#{$dir}-1px') {
169 #{$prop}: 1px; 169 #{$prop}: 1px;
170 } 170 }
171 171
172 @include iro.bem-utility('#{$dir}-0') { 172 @include bem.utility('#{$dir}-0') {
173 #{$prop}: 0; 173 #{$prop}: 0;
174 } 174 }
175 } 175 }
176 176
177 @include iro.bem-utility('elp') { 177 @include bem.utility('elp') {
178 overflow: hidden; 178 overflow: hidden;
179 text-overflow: ellipsis; 179 text-overflow: ellipsis;
180 white-space: nowrap; 180 white-space: nowrap;
181 } 181 }
182 182
183 @include iro.bem-utility('p-static') { 183 @include bem.utility('p-static') {
184 position: static; 184 position: static;
185 } 185 }
186 186
187 @include iro.bem-utility('p-relative') { 187 @include bem.utility('p-relative') {
188 position: relative; 188 position: relative;
189 } 189 }
190 190
191 @include iro.bem-utility('p-fixed') { 191 @include bem.utility('p-fixed') {
192 position: fixed; 192 position: fixed;
193 } 193 }
194 194
195 @include iro.bem-utility('p-sticky-bs') { 195 @include bem.utility('p-sticky-bs') {
196 position: sticky; 196 position: sticky;
197 inset-block-start: 0; 197 inset-block-start: 0;
198 } 198 }
199 199
200 @each $dir, $suffix in $-dirs { 200 @each $dir, $suffix in $-dirs {
201 @include iro.bem-utility('m#{$dir}-auto') { 201 @include bem.utility('m#{$dir}-auto') {
202 margin#{$suffix}: auto; 202 margin#{$suffix}: auto;
203 } 203 }
204 204
205 @include iro.bem-utility('p#{$dir}-auto') { 205 @include bem.utility('p#{$dir}-auto') {
206 padding#{$suffix}: auto; 206 padding#{$suffix}: auto;
207 } 207 }
208 208
209 @each $mod, $size in $-sizes { 209 @each $mod, $size in $-sizes {
210 @include iro.bem-utility('m#{$dir}-#{$mod}') { 210 @include bem.utility('m#{$dir}-#{$mod}') {
211 margin#{$suffix}: props.get($size); 211 margin#{$suffix}: props.get($size);
212 } 212 }
213 213
214 @include iro.bem-utility('p#{$dir}-#{$mod}') { 214 @include bem.utility('p#{$dir}-#{$mod}') {
215 padding#{$suffix}: props.get($size); 215 padding#{$suffix}: props.get($size);
216 } 216 }
217 } 217 }
218 218
219 @include iro.bem-utility('b#{$dir}-0') { 219 @include bem.utility('b#{$dir}-0') {
220 border#{$suffix}: 0; 220 border#{$suffix}: 0;
221 221
222 @include iro.bem-suffix('light') { 222 @include bem.suffix('light') {
223 @media (prefers-color-scheme: light) { 223 @media (prefers-color-scheme: light) {
224 border#{$suffix}: 0; 224 border#{$suffix}: 0;
225 } 225 }
226 } 226 }
227 227
228 @include iro.bem-suffix('dark') { 228 @include bem.suffix('dark') {
229 @media (prefers-color-scheme: dark) { 229 @media (prefers-color-scheme: dark) {
230 border#{$suffix}: 0; 230 border#{$suffix}: 0;
231 } 231 }
232 } 232 }
233 } 233 }
234 234
235 @include iro.bem-utility('b#{$dir}-1') { 235 @include bem.utility('b#{$dir}-1') {
236 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 236 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
237 237
238 @include iro.bem-suffix('light') { 238 @include bem.suffix('light') {
239 @media (prefers-color-scheme: light) { 239 @media (prefers-color-scheme: light) {
240 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 240 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
241 } 241 }
242 } 242 }
243 243
244 @include iro.bem-suffix('dark') { 244 @include bem.suffix('dark') {
245 @media (prefers-color-scheme: dark) { 245 @media (prefers-color-scheme: dark) {
246 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 246 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
247 } 247 }
@@ -249,7 +249,7 @@ $-sizes: (
249 } 249 }
250 } 250 }
251 251
252 @include iro.bem-utility('mbs-neutralize') { 252 @include bem.utility('mbs-neutralize') {
253 &::before { 253 &::before {
254 display: block; 254 display: block;
255 margin-block: -100em 100em; 255 margin-block: -100em 100em;