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