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