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