diff options
Diffstat (limited to 'src/_utils.scss')
-rw-r--r-- | src/_utils.scss | 102 |
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; |