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