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