summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss279
1 files changed, 124 insertions, 155 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8adc0f7..a3c8187 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,119 +1,115 @@
1@use "sass:list"; 1@use 'sass:list';
2@use "sass:map"; 2@use 'sass:map';
3@use "sass:meta"; 3@use 'sass:meta';
4@use "sass:string"; 4@use 'sass:string';
5@use "pkg:iro-sass/bem"; 5@use 'pkg:iro-sass/src/bem';
6@use "pkg:iro-sass/props"; 6@use 'pkg:iro-sass/src/props';
7@use "../props" as *; 7@use '../props' as *;
8 8
9@forward "button.vars"; 9@forward 'button.vars';
10@use "button.vars" as vars; 10@use 'button.vars' as vars;
11 11
12@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...); 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...); 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
15 border-color: props.get($theme, list.join($key, --disabled --border-color)...); 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16 16
17 &::after { 17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow: 0 0 0 19 box-shadow:
20 calc( 20 0
21 props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width) 21 0
22 ) 22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
23 props.get($theme, list.join($key, --key-focus --outline-color)...); 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
24 } 25 }
25 26
26 &:link, 27 &:link,
27 &:visited, 28 &:visited,
28 &:enabled { 29 &:enabled {
29 color: props.get($theme, list.join($key, --label-color)...); 30 color: props.get($theme, list.join($key, --label-color)...);
30 background-color: props.get($theme, list.join($key, --bg-color)...); 31 background-color: props.get($theme, list.join($key, --bg-color)...);
31 border-color: props.get($theme, list.join($key, --border-color)...); 32 border-color: props.get($theme, list.join($key, --border-color)...);
32 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) 33 box-shadow:
33 props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...); 34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
34 39
35 &:hover, 40 &:hover,
36 &:focus-visible { 41 &:focus-visible {
37 color: props.get($theme, list.join($key, --hover --label-color)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
38 background-color: props.get($theme, list.join($key, --hover --bg-color)...); 43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
39 border-color: props.get($theme, list.join($key, --hover --border-color)...); 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
40 } 45 }
41 46
42 &:active { 47 &:active {
43 color: props.get($theme, list.join($key, --active --label-color)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
44 background-color: props.get($theme, list.join($key, --active --bg-color)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
45 border-color: props.get($theme, list.join($key, --active --border-color)...); 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
46 box-shadow: none; 51 box-shadow: none;
47 } 52 }
48 } 53 }
49 54
50 @include bem.modifier("badge") { 55 @include bem.modifier('badge') {
51 color: props.get($theme, list.join($key, --badge --label-color)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
52 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
53 border-color: props.get($theme, list.join($key, --badge --border-color)...); 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
54 box-shadow: none; 59 box-shadow: none;
55 60
56 &:link, 61 &:link,
57 &:visited, 62 &:visited,
58 &:enabled { 63 &:enabled {
59 color: props.get($theme, list.join($key, --badge --label-color)...); 64 color: props.get($theme, list.join($key, --badge --label-color)...);
60 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
61 border-color: props.get($theme, list.join($key, --badge --border-color)...); 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
62 box-shadow: none; 67 box-shadow: none;
63 68
64 &:hover, 69 &:hover,
65 &:focus-visible { 70 &:focus-visible {
66 color: props.get($theme, list.join($key, --badge --hover --label-color)...); 71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
67 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); 72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
68 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); 73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
69 } 74 }
70 75
71 &:active { 76 &:active {
72 color: props.get($theme, list.join($key, --badge --active --label-color)...); 77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
73 background-color: props.get( 78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
74 $theme, 79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
75 list.join($key, --badge --active --bg-color)...
76 );
77 border-color: props.get(
78 $theme,
79 list.join($key, --badge --active --border-color)...
80 );
81 } 80 }
82 } 81 }
83 } 82 }
84 83
85 @include bem.modifier("quiet") { 84 @include bem.modifier('quiet') {
86 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
87 background-color: transparent; 86 background-color: transparent;
88 border-color: transparent; 87 border-color: transparent;
89 88
90 &:link, 89 &:link,
91 &:visited, 90 &:visited,
92 &:enabled { 91 &:enabled {
93 color: props.get($theme, list.join($key, --quiet --label-color)...); 92 color: props.get($theme, list.join($key, --quiet --label-color)...);
94 background-color: transparent; 93 background-color: transparent;
95 border-color: transparent; 94 border-color: transparent;
96 box-shadow: none; 95 box-shadow: none;
97 96
98 &:hover, 97 &:hover,
99 &:focus-visible { 98 &:focus-visible {
100 color: props.get($theme, list.join($key, --quiet --hover --label-color)...); 99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
101 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); 100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
102 border-color: transparent; 101 border-color: transparent;
103 } 102 }
104 103
105 &:active { 104 &:active {
106 color: props.get($theme, list.join($key, --quiet --active --label-color)...); 105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
107 background-color: props.get( 106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
108 $theme, 107 border-color: transparent;
109 list.join($key, --quiet --active --bg-color)...
110 );
111 border-color: transparent;
112 } 108 }
113 } 109 }
114 } 110 }
115 111
116 @include bem.is("highlighted") { 112 @include bem.is('highlighted') {
117 &:link, 113 &:link,
118 &:visited, 114 &:visited,
119 &:enabled { 115 &:enabled {
@@ -125,27 +121,32 @@
125 121
126 box-shadow: 122 box-shadow:
127 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), 123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
128 props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) 124 props.get(vars.$shadow-x)
129 props.get(vars.$shadow-grow) 125 props.get(vars.$shadow-y)
130 props.get($theme, list.join($key, --highlighted --shadow-color)...); 126 props.get(vars.$shadow-blur)
127 props.get(vars.$shadow-grow)
128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
131 129
132 &:focus-visible { 130 &:focus-visible {
133 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) 131 box-shadow:
134 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) 132 props.get(vars.$shadow-x)
133 props.get(vars.$shadow-y)
134 props.get(vars.$shadow-blur)
135 props.get(vars.$shadow-grow)
135 props.get($theme, list.join($key, --shadow-color)...); 136 props.get($theme, list.join($key, --shadow-color)...);
136 } 137 }
137 } 138 }
138 } 139 }
139 140
140 @include bem.is("selected") { 141 @include bem.is('selected') {
141 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
142 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
143 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
144 145
145 @include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") { 146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
146 color: props.get($theme, list.join($key, --selected --label-color)...); 147 color: props.get($theme, list.join($key, --selected --label-color)...);
147 background-color: props.get($theme, list.join($key, --selected --bg-color)...); 148 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
148 border-color: props.get($theme, list.join($key, --selected --border-color)...); 149 border-color: props.get($theme, list.join($key, --selected --border-color)...);
149 } 150 }
150 151
151 &:link, 152 &:link,
@@ -153,67 +154,47 @@
153 &:enabled { 154 &:enabled {
154 &:hover, 155 &:hover,
155 &:focus-visible { 156 &:focus-visible {
156 color: props.get($theme, list.join($key, --selected --hover --label-color)...); 157 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
157 background-color: props.get( 158 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
158 $theme, 159 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
159 list.join($key, --selected --hover --bg-color)...
160 );
161 border-color: props.get(
162 $theme,
163 list.join($key, --selected --hover --border-color)...
164 );
165 } 160 }
166 161
167 &:active { 162 &:active {
168 color: props.get($theme, list.join($key, --selected --active --label-color)...); 163 color: props.get($theme, list.join($key, --selected --active --label-color)...);
169 background-color: props.get( 164 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
170 $theme, 165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
171 list.join($key, --selected --active --bg-color)...
172 );
173 border-color: props.get(
174 $theme,
175 list.join($key, --selected --active --border-color)...
176 );
177 } 166 }
178 } 167 }
179 } 168 }
180} 169}
181 170
182@mixin styles { 171@mixin styles {
183 @include materialize-at-root(meta.module-variables("vars")); 172 @include materialize-at-root(meta.module-variables('vars'));
184 173
185 @include bem.object("button") { 174 @include bem.object('button') {
186 position: relative; 175 position: relative;
187 display: inline-block; 176 display: inline-block;
188 padding-block: props.get(vars.$pad-b); 177 padding-block: props.get(vars.$pad-b);
189 padding-inline: props.get(vars.$pad-i); 178 padding-inline: props.get(vars.$pad-i);
190 text-overflow: ellipsis; 179 text-overflow: ellipsis;
191 font-size: props.get(vars.$font-size); 180 font-size: props.get(vars.$font-size);
192 line-height: props.get(vars.$line-height); 181 line-height: props.get(vars.$line-height);
193 text-align: center; 182 text-align: center;
194 white-space: nowrap; 183 white-space: nowrap;
195 text-decoration: none; 184 text-decoration: none;
196 border: props.get(vars.$border-width) solid transparent; 185 border: props.get(vars.$border-width) solid transparent;
197 border-radius: props.get(vars.$rounding); 186 border-radius: props.get(vars.$rounding);
198 transition: 187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s;
199 color 0.1s,
200 background-color 0.1s,
201 border-color 0.1s,
202 box-shadow 0.1s;
203 188
204 &::after { 189 &::after {
205 position: absolute; 190 position: absolute;
206 inset: calc( 191 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
207 -1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset) 192 z-index: 1;
208 ); 193 display: none;
209 z-index: 1;
210 display: none;
211 pointer-events: none; 194 pointer-events: none;
212 outline: transparent solid props.get(vars.$key-focus--border-width); 195 outline: transparent solid props.get(vars.$key-focus--border-width);
213 content: ""; 196 content: '';
214 border-radius: calc( 197 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
215 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
216 );
217 } 198 }
218 199
219 &:link, 200 &:link,
@@ -228,7 +209,7 @@
228 } 209 }
229 } 210 }
230 211
231 @include bem.elem("label") { 212 @include bem.elem('label') {
232 display: inline-block; 213 display: inline-block;
233 margin-inline: props.get(vars.$pad-i-label); 214 margin-inline: props.get(vars.$pad-i-label);
234 } 215 }
@@ -241,91 +222,79 @@
241 } 222 }
242 } 223 }
243 224
244 @include bem.modifier("pill") { 225 @include bem.modifier('pill') {
245 padding-inline: props.get(vars.$pad-i-pill); 226 padding-inline: props.get(vars.$pad-i-pill);
246 border-radius: 100em; 227 border-radius: 100em;
247 228
248 &::after { 229 &::after {
249 border-radius: 100em; 230 border-radius: 100em;
250 } 231 }
251 } 232 }
252 233
253 @include bem.modifier("icon") { 234 @include bem.modifier('icon') {
254 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 235 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
255 padding-inline: 0; 236 padding-inline: 0;
256 } 237 }
257 238
258 @include bem.modifier("wide") { 239 @include bem.modifier('wide') {
259 @include bem.elem("label") { 240 @include bem.elem('label') {
260 margin-inline: props.get(vars.$pad-i-wide); 241 margin-inline: props.get(vars.$pad-i-wide);
261 } 242 }
262 } 243 }
263 244
264 @include bem.modifier("justify") { 245 @include bem.modifier('justify') {
265 text-align: justify; 246 text-align: justify;
266 text-align-last: justify; 247 text-align-last: justify;
267 } 248 }
268 249
269 @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, 250 @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
270 $font-size in vars.$fixed-sizes
271 {
272 @include bem.modifier($mod) { 251 @include bem.modifier($mod) {
273 padding-block: props.get($pad-b); 252 padding-block: props.get($pad-b);
274 padding-inline: props.get($pad-i); 253 padding-inline: props.get($pad-i);
275 font-size: props.get($font-size); 254 font-size: props.get($font-size);
276 255
277 @include bem.elem("label") { 256 @include bem.elem('label') {
278 margin-inline: props.get($pad-i-label); 257 margin-inline: props.get($pad-i-label);
279 } 258 }
280 259
281 @include bem.modifier("pill") { 260 @include bem.modifier('pill') {
282 padding-inline: props.get($pad-i-pill); 261 padding-inline: props.get($pad-i-pill);
283 } 262 }
284 263
285 @include bem.modifier("icon") { 264 @include bem.modifier('icon') {
286 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 265 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
287 padding-inline: 0; 266 padding-inline: 0;
288 } 267 }
289 268
290 @include bem.modifier("wide") { 269 @include bem.modifier('wide') {
291 @include bem.elem("label") { 270 @include bem.elem('label') {
292 margin-inline: props.get($pad-i-wide); 271 margin-inline: props.get($pad-i-wide);
293 } 272 }
294 } 273 }
295 } 274 }
296 } 275 }
297 276
298 @include bem.modifier("align-block") { 277 @include bem.modifier('align-block') {
299 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); 278 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
300 279
301 @include bem.modifier("pill") { 280 @include bem.modifier('pill') {
302 margin-inline: calc( 281 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
303 -1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)
304 );
305 } 282 }
306 283
307 @include bem.modifier("icon") { 284 @include bem.modifier('icon') {
308 margin-inline: calc( 285 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
309 -1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em *
310 (props.get(vars.$line-height) - 1)
311 );
312 } 286 }
313 287
314 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 288 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
315 @include bem.modifier($mod) { 289 @include bem.modifier($mod) {
316 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); 290 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
317 291
318 @include bem.modifier("pill") { 292 @include bem.modifier('pill') {
319 margin-inline: calc( 293 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
320 -1 * props.get($pad-i-pill) - props.get(vars.$border-width)
321 );
322 } 294 }
323 295
324 @include bem.modifier("icon") { 296 @include bem.modifier('icon') {
325 margin-inline: calc( 297 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
326 -1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em *
327 (props.get(vars.$line-height) - 1)
328 );
329 } 298 }
330 } 299 }
331 } 300 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 18:34:27 +0000