cloudcommerce 0.0.128 → 0.0.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/.eslintrc.cjs +4 -0
  2. package/CHANGELOG.md +14 -0
  3. package/package.json +8 -8
  4. package/packages/api/package.json +1 -1
  5. package/packages/apps/correios/package.json +1 -1
  6. package/packages/apps/custom-shipping/package.json +1 -1
  7. package/packages/apps/discounts/package.json +1 -1
  8. package/packages/apps/emails/package.json +1 -1
  9. package/packages/apps/frenet/package.json +1 -1
  10. package/packages/apps/infinitepay/lib/ip-create-transaction.js +7 -5
  11. package/packages/apps/infinitepay/lib/ip-create-transaction.js.map +1 -1
  12. package/packages/apps/infinitepay/package.json +2 -2
  13. package/packages/apps/infinitepay/src/ip-create-transaction.ts +8 -5
  14. package/packages/apps/mercadopago/package.json +1 -1
  15. package/packages/apps/pagarme/package.json +1 -1
  16. package/packages/apps/pix/package.json +1 -1
  17. package/packages/apps/tiny-erp/package.json +1 -1
  18. package/packages/cli/package.json +1 -1
  19. package/packages/config/package.json +2 -2
  20. package/packages/emails/package.json +1 -1
  21. package/packages/events/package.json +1 -1
  22. package/packages/firebase/package.json +1 -1
  23. package/packages/i18n/package.json +1 -1
  24. package/packages/modules/package.json +1 -1
  25. package/packages/passport/package.json +1 -1
  26. package/packages/ssr/package.json +3 -3
  27. package/packages/storefront/.eslintrc-auto-import.json +1242 -0
  28. package/packages/storefront/.eslintrc.cjs +11 -0
  29. package/packages/storefront/astro.config.mjs +44 -1
  30. package/packages/storefront/auto-imports.d.ts +1242 -0
  31. package/packages/storefront/components.d.ts +21 -0
  32. package/packages/storefront/{storefront.cms.cjs → config/storefront.cms.cjs} +0 -0
  33. package/packages/storefront/{storefront.cms.mjs → config/storefront.cms.mjs} +0 -0
  34. package/packages/storefront/dist/client/{HeaderButtons.bc4a5c97.js → HeaderButtons.5867fe1c.js} +1 -1
  35. package/packages/storefront/dist/client/assets/_...slug_.88f9146d.css +1 -0
  36. package/packages/storefront/dist/client/chunks/HeaderButtons.cc68ecde.js +1 -0
  37. package/packages/storefront/dist/client/chunks/{LoginForm.7e9c481c.js → LoginForm.5bdbb363.js} +2 -2
  38. package/packages/storefront/dist/client/sw.js +1 -1
  39. package/packages/storefront/dist/server/chunks/{image-pool.f66f99fb.mjs → image-pool.abfa6f7b.mjs} +3 -0
  40. package/packages/storefront/dist/server/entry.mjs +44 -9
  41. package/packages/storefront/package.json +10 -6
  42. package/packages/storefront/src/lib/assets/base.css +16 -33
  43. package/packages/storefront/src/lib/assets/forms.css +209 -0
  44. package/packages/storefront/src/lib/assets/preflight.css +2 -2
  45. package/packages/storefront/src/lib/components/LoginDrawer.vue +13 -5
  46. package/packages/storefront/src/lib/components/atoms/ALink.vue +26 -0
  47. package/packages/storefront/src/lib/layouts/BaseBody.astro +1 -0
  48. package/packages/storefront/storefront.config.mjs +1 -1
  49. package/packages/storefront/tailwind.config.cjs +9 -1
  50. package/packages/storefront/uno.config.cjs +15 -6
  51. package/packages/types/package.json +1 -1
  52. package/packages/storefront/dist/client/assets/_...slug_.acb18581.css +0 -1
  53. package/packages/storefront/dist/client/chunks/HeaderButtons.861af799.js +0 -1
  54. package/packages/storefront/src/lib/assets/dark.css +0 -92
  55. package/packages/storefront/src/lib/assets/pico.css +0 -2080
  56. package/packages/storefront/src/lib/assets/typography.css +0 -15
@@ -1,2080 +0,0 @@
1
- @charset "UTF-8";
2
- /*!
3
- * Pico.css v1.5.5 (https://picocss.com)
4
- * Copyright 2019-2022 - Licensed under MIT
5
- */
6
- /**
7
- * Theme: default
8
- */
9
- :root {
10
- --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
11
- "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
12
- "Segoe UI Symbol", "Noto Color Emoji";
13
- --line-height: 1.5;
14
- --font-weight: 400;
15
- --font-size: 16px;
16
- --border-radius: 0.25rem;
17
- --border-width: 1px;
18
- --outline-width: 3px;
19
- --spacing: 1rem;
20
- --typography-spacing-vertical: 1.5rem;
21
- --block-spacing-vertical: calc(var(--spacing) * 2);
22
- --block-spacing-horizontal: var(--spacing);
23
- --grid-spacing-vertical: 0;
24
- --grid-spacing-horizontal: var(--spacing);
25
- --form-element-spacing-vertical: 0.75rem;
26
- --form-element-spacing-horizontal: 1rem;
27
- --nav-element-spacing-vertical: 1rem;
28
- --nav-element-spacing-horizontal: 0.65rem;
29
- --nav-link-spacing-vertical: 0.5rem;
30
- --nav-link-spacing-horizontal: 0.65rem;
31
- --form-label-font-weight: var(--font-weight);
32
- --transition: 0.15s ease-in-out;
33
- --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
34
- --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
35
- --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
36
- --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
37
- --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
38
- --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
39
- --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
40
- }
41
- @media (min-width: 640px) {
42
- :root {
43
- --font-size: 16.5px;
44
- }
45
- }
46
- @media (min-width: 768px) {
47
- :root {
48
- --font-size: 17px;
49
- }
50
- }
51
- @media (min-width: 1024px) {
52
- :root {
53
- --font-size: 17.65px;
54
- }
55
- }
56
- @media (min-width: 1280px) {
57
- :root {
58
- --font-size: 18.5px;
59
- }
60
- }
61
-
62
- @media (min-width: 640px) {
63
- .section {
64
- --block-spacing-vertical: calc(var(--spacing) * 2.5);
65
- }
66
- }
67
- @media (min-width: 768px) {
68
- .section {
69
- --block-spacing-vertical: calc(var(--spacing) * 3);
70
- }
71
- }
72
- @media (min-width: 1024px) {
73
- .section {
74
- --block-spacing-vertical: calc(var(--spacing) * 3.5);
75
- }
76
- }
77
- @media (min-width: 1280px) {
78
- .section {
79
- --block-spacing-vertical: calc(var(--spacing) * 4);
80
- }
81
- }
82
-
83
- @media (min-width: 640px) {
84
- .card {
85
- --block-spacing-horizontal: calc(var(--spacing) * 1.25);
86
- }
87
- }
88
- @media (min-width: 768px) {
89
- .card {
90
- --block-spacing-horizontal: calc(var(--spacing) * 1.5);
91
- }
92
- }
93
- @media (min-width: 1024px) {
94
- .card {
95
- --block-spacing-horizontal: calc(var(--spacing) * 1.75);
96
- }
97
- }
98
- @media (min-width: 1280px) {
99
- .card {
100
- --block-spacing-horizontal: calc(var(--spacing) * 2);
101
- }
102
- }
103
-
104
- dialog > .card {
105
- --block-spacing-vertical: calc(var(--spacing) * 2);
106
- --block-spacing-horizontal: var(--spacing);
107
- }
108
- @media (min-width: 640px) {
109
- dialog > .card {
110
- --block-spacing-vertical: calc(var(--spacing) * 2.5);
111
- --block-spacing-horizontal: calc(var(--spacing) * 1.25);
112
- }
113
- }
114
- @media (min-width: 768px) {
115
- dialog > .card {
116
- --block-spacing-vertical: calc(var(--spacing) * 3);
117
- --block-spacing-horizontal: calc(var(--spacing) * 1.5);
118
- }
119
- }
120
-
121
- a {
122
- --text-decoration: none;
123
- }
124
- a.secondary, a.contrast {
125
- --text-decoration: underline;
126
- }
127
-
128
- small {
129
- --font-size: 0.875em;
130
- }
131
-
132
- .prose h1,
133
- .prose h2,
134
- .prose h3,
135
- .prose h4,
136
- .prose h5,
137
- .prose h6 {
138
- --font-weight: 700;
139
- }
140
-
141
- .prose h1 {
142
- --font-size: 2rem;
143
- --typography-spacing-vertical: 3rem;
144
- }
145
-
146
- .prose h2 {
147
- --font-size: 1.75rem;
148
- --typography-spacing-vertical: 2.625rem;
149
- }
150
-
151
- .prose h3 {
152
- --font-size: 1.5rem;
153
- --typography-spacing-vertical: 2.25rem;
154
- }
155
-
156
- .prose h4 {
157
- --font-size: 1.25rem;
158
- --typography-spacing-vertical: 1.874rem;
159
- }
160
-
161
- .prose h5 {
162
- --font-size: 1.125rem;
163
- --typography-spacing-vertical: 1.6875rem;
164
- }
165
-
166
- [type=checkbox],
167
- [type=radio] {
168
- --border-width: 2px;
169
- }
170
-
171
- [type=checkbox][role=switch] {
172
- --border-width: 3px;
173
- }
174
-
175
- thead th,
176
- thead td,
177
- tfoot th,
178
- tfoot td {
179
- --border-width: 3px;
180
- }
181
-
182
- :not(thead, tfoot) > * > td {
183
- --font-size: 0.875em;
184
- }
185
-
186
- pre,
187
- code,
188
- kbd,
189
- samp {
190
- --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
191
- "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
192
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
193
- }
194
-
195
- kbd {
196
- --font-weight: bolder;
197
- }
198
-
199
- :root:not([data-theme=dark]) {
200
- --background-color: #fff;
201
- --color: hsl(205deg, 20%, 32%);
202
- --h1-color: hsl(205deg, 30%, 15%);
203
- --h2-color: #24333e;
204
- --h3-color: hsl(205deg, 25%, 23%);
205
- --h4-color: #374956;
206
- --h5-color: hsl(205deg, 20%, 32%);
207
- --h6-color: #4d606d;
208
- --muted-color: hsl(205deg, 10%, 50%);
209
- --muted-border-color: hsl(205deg, 20%, 94%);
210
- --contrast: hsl(205deg, 30%, 15%);
211
- --contrast-hover: #000;
212
- --contrast-focus: rgba(89, 107, 120, 0.125);
213
- --contrast-inverse: #fff;
214
- --mark-background-color: #fff2ca;
215
- --mark-color: #543a26;
216
- --ins-color: #388e3c;
217
- --del-color: #c62828;
218
- --blockquote-border-color: var(--muted-border-color);
219
- --blockquote-footer-color: var(--muted-color);
220
- --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
221
- --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
222
- --form-element-background-color: transparent;
223
- --form-element-border-color: hsl(205deg, 14%, 68%);
224
- --form-element-color: var(--color);
225
- --form-element-placeholder-color: var(--muted-color);
226
- --form-element-active-background-color: transparent;
227
- --form-element-active-border-color: var(--primary);
228
- --form-element-focus-color: var(--primary-focus);
229
- --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
230
- --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
231
- --form-element-disabled-opacity: 0.5;
232
- --form-element-invalid-border-color: #c62828;
233
- --form-element-invalid-active-border-color: #d32f2f;
234
- --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
235
- --form-element-valid-border-color: #388e3c;
236
- --form-element-valid-active-border-color: #43a047;
237
- --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
238
- --switch-background-color: hsl(205deg, 16%, 77%);
239
- --switch-color: var(--primary-inverse);
240
- --switch-checked-background-color: var(--primary);
241
- --range-border-color: hsl(205deg, 18%, 86%);
242
- --range-active-border-color: hsl(205deg, 16%, 77%);
243
- --range-thumb-border-color: var(--background-color);
244
- --range-thumb-color: var(--secondary);
245
- --range-thumb-hover-color: var(--secondary-hover);
246
- --range-thumb-active-color: var(--primary);
247
- --table-border-color: var(--muted-border-color);
248
- --table-row-stripped-background-color: #f6f8f9;
249
- --code-background-color: hsl(205deg, 20%, 94%);
250
- --code-color: var(--muted-color);
251
- --code-kbd-background-color: var(--contrast);
252
- --code-kbd-color: var(--contrast-inverse);
253
- --code-tag-color: hsl(330deg, 40%, 50%);
254
- --code-property-color: hsl(185deg, 40%, 40%);
255
- --code-value-color: hsl(40deg, 20%, 50%);
256
- --code-comment-color: hsl(205deg, 14%, 68%);
257
- --accordion-border-color: var(--muted-border-color);
258
- --accordion-close-summary-color: var(--color);
259
- --accordion-open-summary-color: var(--muted-color);
260
- --card-background-color: var(--background-color);
261
- --card-border-color: var(--muted-border-color);
262
- --card-box-shadow:
263
- 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
264
- 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
265
- 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
266
- 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
267
- 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
268
- 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
269
- 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
270
- --card-sectionning-background-color: #fbfbfc;
271
- --dropdown-background-color: #fbfbfc;
272
- --dropdown-border-color: #e1e6eb;
273
- --dropdown-box-shadow: var(--card-box-shadow);
274
- --dropdown-color: var(--color);
275
- --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
276
- --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
277
- --progress-background-color: hsl(205deg, 18%, 86%);
278
- --progress-color: var(--primary);
279
- --loading-spinner-opacity: 0.5;
280
- --tooltip-background-color: var(--contrast);
281
- --tooltip-color: var(--contrast-inverse);
282
- color-scheme: light;
283
- }
284
-
285
- progress,
286
- [type=checkbox],
287
- [type=radio],
288
- [type=range] {
289
- accent-color: var(--primary);
290
- }
291
-
292
- /**
293
- * Document
294
- * Content-box & Responsive typography
295
- */
296
- *,
297
- *::before,
298
- *::after {
299
- box-sizing: border-box;
300
- background-repeat: no-repeat;
301
- }
302
-
303
- ::before,
304
- ::after {
305
- text-decoration: inherit;
306
- vertical-align: inherit;
307
- }
308
-
309
- :where(:root) {
310
- -webkit-tap-highlight-color: transparent;
311
- -webkit-text-size-adjust: 100%;
312
- -moz-text-size-adjust: 100%;
313
- text-size-adjust: 100%;
314
- background-color: var(--background-color);
315
- color: var(--color);
316
- font-weight: var(--font-weight);
317
- font-size: var(--font-size);
318
- line-height: var(--line-height);
319
- font-family: var(--font-family);
320
- text-rendering: optimizeLegibility;
321
- overflow-wrap: break-word;
322
- cursor: default;
323
- -moz-tab-size: 4;
324
- -o-tab-size: 4;
325
- tab-size: 4;
326
- }
327
-
328
- /**
329
- * Sectioning
330
- * Container and responsive spacings for header, main, footer
331
- */
332
- main {
333
- display: block;
334
- }
335
-
336
- body {
337
- width: 100%;
338
- margin: 0;
339
- }
340
- body > header,
341
- body > main,
342
- body > footer {
343
- width: 100%;
344
- margin-right: auto;
345
- margin-left: auto;
346
- padding: 0;
347
- }
348
-
349
- /**
350
- * Container
351
- */
352
- .container,
353
- .container-fluid {
354
- width: 100%;
355
- margin-right: auto;
356
- margin-left: auto;
357
- padding-right: var(--spacing);
358
- padding-left: var(--spacing);
359
- }
360
-
361
- /**
362
- * Section
363
- * Responsive spacings for section
364
- */
365
- .section {
366
- margin-bottom: var(--block-spacing-vertical);
367
- }
368
-
369
- /**
370
- * Horizontal scroller (<figure>)
371
- */
372
- figure {
373
- display: block;
374
- margin: 0;
375
- padding: 0;
376
- overflow-x: auto;
377
- }
378
- figure figcaption {
379
- padding: calc(var(--spacing) * 0.5) 0;
380
- color: var(--muted-color);
381
- }
382
-
383
- /**
384
- * Typography
385
- */
386
- b,
387
- strong {
388
- font-weight: bolder;
389
- }
390
-
391
- sub,
392
- sup {
393
- position: relative;
394
- font-size: 0.75em;
395
- line-height: 0;
396
- vertical-align: baseline;
397
- }
398
-
399
- sub {
400
- bottom: -0.25em;
401
- }
402
-
403
- sup {
404
- top: -0.5em;
405
- }
406
-
407
- address,
408
- blockquote,
409
- dl,
410
- figure,
411
- form,
412
- ol,
413
- p,
414
- pre,
415
- table,
416
- ul {
417
- margin-top: 0;
418
- margin-bottom: var(--typography-spacing-vertical);
419
- color: var(--color);
420
- font-style: normal;
421
- font-weight: var(--font-weight);
422
- font-size: var(--font-size);
423
- }
424
-
425
- a,
426
- [role=link] {
427
- --color: var(--primary);
428
- --background-color: transparent;
429
- outline: none;
430
- background-color: var(--background-color);
431
- color: var(--color);
432
- -webkit-text-decoration: var(--text-decoration);
433
- text-decoration: var(--text-decoration);
434
- transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
435
- }
436
- a:is([aria-current], :hover, :active, :focus),
437
- [role=link]:is([aria-current], :hover, :active, :focus) {
438
- --color: var(--primary-hover);
439
- --text-decoration: underline;
440
- }
441
- [role=link]:focus {
442
- --background-color: var(--primary-focus);
443
- }
444
- a.secondary,
445
- [role=link].secondary {
446
- --color: var(--secondary);
447
- }
448
- a.secondary:is([aria-current], :hover, :active, :focus),
449
- [role=link].secondary:is([aria-current], :hover, :active, :focus) {
450
- --color: var(--secondary-hover);
451
- }
452
- a.secondary:focus,
453
- [role=link].secondary:focus {
454
- --background-color: var(--secondary-focus);
455
- }
456
- a.contrast,
457
- [role=link].contrast {
458
- --color: var(--contrast);
459
- }
460
- a.contrast:is([aria-current], :hover, :active, :focus),
461
- [role=link].contrast:is([aria-current], :hover, :active, :focus) {
462
- --color: var(--contrast-hover);
463
- }
464
- a.contrast:focus,
465
- [role=link].contrast:focus {
466
- --background-color: var(--contrast-focus);
467
- }
468
-
469
- h1,
470
- h2,
471
- h3,
472
- h4,
473
- h5,
474
- h6 {
475
- margin-top: 0;
476
- margin-bottom: var(--typography-spacing-vertical);
477
- color: var(--color);
478
- font-weight: var(--font-weight);
479
- font-size: var(--font-size);
480
- font-family: var(--font-family);
481
- }
482
-
483
- h1 {
484
- --color: var(--h1-color);
485
- }
486
-
487
- h2 {
488
- --color: var(--h2-color);
489
- }
490
-
491
- h3 {
492
- --color: var(--h3-color);
493
- }
494
-
495
- h4 {
496
- --color: var(--h4-color);
497
- }
498
-
499
- h5 {
500
- --color: var(--h5-color);
501
- }
502
-
503
- h6 {
504
- --color: var(--h6-color);
505
- }
506
-
507
- :where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
508
- margin-top: var(--typography-spacing-vertical);
509
- }
510
-
511
- hgroup,
512
- .headings {
513
- margin-bottom: var(--typography-spacing-vertical);
514
- }
515
- hgroup > *,
516
- .headings > * {
517
- margin-bottom: 0;
518
- }
519
- hgroup > *:last-child,
520
- .headings > *:last-child {
521
- --color: var(--muted-color);
522
- --font-weight: unset;
523
- font-size: 1rem;
524
- font-family: unset;
525
- }
526
-
527
- p {
528
- margin-bottom: var(--typography-spacing-vertical);
529
- }
530
-
531
- small {
532
- font-size: var(--font-size);
533
- }
534
-
535
- :where(dl, ol, ul) {
536
- padding-right: 0;
537
- padding-left: var(--spacing);
538
- -webkit-padding-start: var(--spacing);
539
- padding-inline-start: var(--spacing);
540
- -webkit-padding-end: 0;
541
- padding-inline-end: 0;
542
- }
543
- :where(dl, ol, ul) li {
544
- margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
545
- }
546
-
547
- :where(dl, ol, ul) :is(dl, ol, ul) {
548
- margin: 0;
549
- margin-top: calc(var(--typography-spacing-vertical) * 0.25);
550
- }
551
-
552
- mark {
553
- padding: 0.125rem 0.25rem;
554
- background-color: var(--mark-background-color);
555
- color: var(--mark-color);
556
- vertical-align: baseline;
557
- }
558
-
559
- blockquote {
560
- display: block;
561
- margin: var(--typography-spacing-vertical) 0;
562
- padding: var(--spacing);
563
- border-right: none;
564
- border-left: 0.25rem solid var(--blockquote-border-color);
565
- -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
566
- border-inline-start: 0.25rem solid var(--blockquote-border-color);
567
- -webkit-border-end: none;
568
- border-inline-end: none;
569
- }
570
- blockquote footer {
571
- margin-top: calc(var(--typography-spacing-vertical) * 0.5);
572
- color: var(--blockquote-footer-color);
573
- }
574
-
575
- abbr[title] {
576
- border-bottom: 1px dotted;
577
- text-decoration: none;
578
- cursor: help;
579
- }
580
-
581
- ins {
582
- color: var(--ins-color);
583
- text-decoration: none;
584
- }
585
-
586
- del {
587
- color: var(--del-color);
588
- }
589
-
590
- /**
591
- * Embedded content
592
- */
593
- :where(audio, canvas, iframe, img, svg, video) {
594
- vertical-align: middle;
595
- }
596
-
597
- audio,
598
- video {
599
- display: inline-block;
600
- }
601
-
602
- audio:not([controls]) {
603
- display: none;
604
- height: 0;
605
- }
606
-
607
- :where(iframe) {
608
- border-style: none;
609
- }
610
-
611
- img {
612
- max-width: 100%;
613
- height: auto;
614
- border-style: none;
615
- }
616
-
617
- :where(svg:not([fill])) {
618
- fill: currentColor;
619
- }
620
-
621
- svg:not(:root) {
622
- overflow: hidden;
623
- }
624
-
625
- /**
626
- * Button
627
- */
628
- button {
629
- margin: 0;
630
- overflow: visible;
631
- font-family: inherit;
632
- text-transform: none;
633
- }
634
-
635
- button,
636
- [type=button],
637
- [type=reset],
638
- [type=submit] {
639
- appearance: button;
640
- -webkit-appearance: button;
641
- }
642
-
643
- button {
644
- display: block;
645
- width: 100%;
646
- margin-bottom: var(--spacing);
647
- }
648
-
649
- [role=button] {
650
- display: inline-block;
651
- text-decoration: none;
652
- cursor: pointer;
653
- }
654
-
655
- button,
656
- input[type=submit],
657
- input[type=button],
658
- input[type=reset],
659
- :where(a)[role=button] {
660
- --background-color: var(--primary);
661
- --border-color: var(--primary);
662
- --color: var(--primary-inverse);
663
- --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
664
- padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
665
- border: var(--border-width) solid var(--border-color);
666
- border-radius: var(--border-radius);
667
- outline: none;
668
- background-color: var(--background-color);
669
- box-shadow: var(--box-shadow);
670
- color: var(--color);
671
- font-weight: var(--font-weight);
672
- font-size: 1rem;
673
- line-height: var(--line-height);
674
- text-align: center;
675
- cursor: pointer;
676
- transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
677
- }
678
- button:is([aria-current], :hover, :active, :focus),
679
- input[type=submit]:is([aria-current], :hover, :active, :focus),
680
- input[type=button]:is([aria-current], :hover, :active, :focus),
681
- input[type=reset]:is([aria-current], :hover, :active, :focus),
682
- [role=button]:is([aria-current], :hover, :active, :focus) {
683
- --background-color: var(--primary-hover);
684
- --border-color: var(--primary-hover);
685
- --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
686
- --color: var(--primary-inverse);
687
- }
688
- button:focus,
689
- input[type=submit]:focus,
690
- input[type=button]:focus,
691
- input[type=reset]:focus,
692
- [role=button]:focus {
693
- --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
694
- 0 0 0 var(--outline-width) var(--primary-focus);
695
- }
696
-
697
- :is(button, input[type=submit], input[type=button], [role=button]).secondary,
698
- input[type=reset] {
699
- --background-color: var(--secondary);
700
- --border-color: var(--secondary);
701
- --color: var(--secondary-inverse);
702
- cursor: pointer;
703
- }
704
- :is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
705
- input[type=reset]:is([aria-current], :hover, :active, :focus) {
706
- --background-color: var(--secondary-hover);
707
- --border-color: var(--secondary-hover);
708
- --color: var(--secondary-inverse);
709
- }
710
- :is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
711
- input[type=reset]:focus {
712
- --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
713
- 0 0 0 var(--outline-width) var(--secondary-focus);
714
- }
715
-
716
- :is(button, input[type=submit], input[type=button], [role=button]).contrast {
717
- --background-color: var(--contrast);
718
- --border-color: var(--contrast);
719
- --color: var(--contrast-inverse);
720
- }
721
- :is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
722
- --background-color: var(--contrast-hover);
723
- --border-color: var(--contrast-hover);
724
- --color: var(--contrast-inverse);
725
- }
726
- :is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
727
- --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
728
- 0 0 0 var(--outline-width) var(--contrast-focus);
729
- }
730
-
731
- :where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
732
- :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
733
- a[role=button]:not([href]) {
734
- opacity: 0.5;
735
- pointer-events: none;
736
- }
737
-
738
- /**
739
- * Form elements
740
- */
741
- input,
742
- optgroup,
743
- select,
744
- textarea {
745
- margin: 0;
746
- font-size: 1rem;
747
- line-height: var(--line-height);
748
- font-family: inherit;
749
- letter-spacing: inherit;
750
- }
751
-
752
- input {
753
- overflow: visible;
754
- }
755
-
756
- select {
757
- text-transform: none;
758
- }
759
-
760
- legend {
761
- max-width: 100%;
762
- padding: 0;
763
- color: inherit;
764
- white-space: normal;
765
- }
766
-
767
- textarea {
768
- overflow: auto;
769
- }
770
-
771
- [type=checkbox],
772
- [type=radio] {
773
- padding: 0;
774
- }
775
-
776
- ::-webkit-inner-spin-button,
777
- ::-webkit-outer-spin-button {
778
- height: auto;
779
- }
780
-
781
- [type=search] {
782
- appearance: textfield;
783
- -webkit-appearance: textfield;
784
- outline-offset: -2px;
785
- }
786
-
787
- [type=search]::-webkit-search-decoration {
788
- appearance: none;
789
- }
790
-
791
- ::-webkit-file-upload-button {
792
- appearance: button;
793
- -webkit-appearance: button;
794
- font: inherit;
795
- }
796
-
797
- ::-moz-focus-inner {
798
- padding: 0;
799
- border-style: none;
800
- }
801
-
802
- :-moz-focusring {
803
- outline: none;
804
- }
805
-
806
- :-moz-ui-invalid {
807
- box-shadow: none;
808
- }
809
-
810
- ::-ms-expand {
811
- display: none;
812
- }
813
-
814
- [type=file],
815
- [type=range] {
816
- padding: 0;
817
- border-width: 0;
818
- }
819
-
820
- :where(input):not([type=checkbox], [type=radio], [type=range]) {
821
- height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
822
- }
823
-
824
- fieldset {
825
- margin: 0;
826
- margin-bottom: var(--spacing);
827
- padding: 0;
828
- border: 0;
829
- }
830
-
831
- label,
832
- fieldset legend {
833
- display: block;
834
- margin-bottom: calc(var(--spacing) * 0.25);
835
- font-weight: var(--form-label-font-weight, var(--font-weight));
836
- }
837
-
838
- :where(input):not([type=checkbox], [type=radio]),
839
- select,
840
- textarea {
841
- width: 100%;
842
- }
843
-
844
- :where(input):not([type=checkbox], [type=radio], [type=range], [type=file]),
845
- select,
846
- textarea {
847
- appearance: none;
848
- padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
849
- }
850
-
851
- input,
852
- select,
853
- textarea {
854
- --background-color: var(--form-element-background-color);
855
- --border-color: var(--form-element-border-color);
856
- --color: var(--form-element-color);
857
- --box-shadow: none;
858
- border: var(--border-width) solid var(--border-color);
859
- border-radius: var(--border-radius);
860
- outline: none;
861
- background-color: var(--background-color);
862
- box-shadow: var(--box-shadow);
863
- color: var(--color);
864
- font-weight: var(--font-weight);
865
- transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
866
- }
867
-
868
- input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
869
- :where(select, textarea):is(:active, :focus) {
870
- --background-color: var(--form-element-active-background-color);
871
- }
872
-
873
- input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
874
- :where(select, textarea):is(:active, :focus) {
875
- --border-color: var(--form-element-active-border-color);
876
- }
877
-
878
- input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
879
- select:focus,
880
- textarea:focus {
881
- --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
882
- }
883
-
884
- input:not([type=submit], [type=button], [type=reset])[disabled],
885
- select[disabled],
886
- textarea[disabled],
887
- :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
888
- --background-color: var(--form-element-disabled-background-color);
889
- --border-color: var(--form-element-disabled-border-color);
890
- opacity: var(--form-element-disabled-opacity);
891
- pointer-events: none;
892
- }
893
-
894
- :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
895
- padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
896
- padding-left: var(--form-element-spacing-horizontal);
897
- -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
898
- padding-inline-start: var(--form-element-spacing-horizontal) !important;
899
- -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
900
- padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
901
- background-position: center right 0.75rem;
902
- background-size: 1rem auto;
903
- background-repeat: no-repeat;
904
- }
905
- :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
906
- background-image: var(--icon-valid);
907
- }
908
- :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
909
- background-image: var(--icon-invalid);
910
- }
911
- :where(input, select, textarea)[aria-invalid=false] {
912
- --border-color: var(--form-element-valid-border-color);
913
- }
914
- :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
915
- --border-color: var(--form-element-valid-active-border-color) !important;
916
- --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
917
- }
918
- :where(input, select, textarea)[aria-invalid=true] {
919
- --border-color: var(--form-element-invalid-border-color);
920
- }
921
- :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
922
- --border-color: var(--form-element-invalid-active-border-color) !important;
923
- --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
924
- }
925
-
926
- [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
927
- background-position: center left 0.75rem;
928
- }
929
-
930
- input::placeholder,
931
- input::-webkit-input-placeholder,
932
- textarea::placeholder,
933
- textarea::-webkit-input-placeholder,
934
- select:invalid {
935
- color: var(--form-element-placeholder-color);
936
- opacity: 1;
937
- }
938
-
939
- :where(input):not([type=checkbox], [type=radio]),
940
- select,
941
- textarea {
942
- margin-bottom: var(--spacing);
943
- }
944
-
945
- select::-ms-expand {
946
- border: 0;
947
- background-color: transparent;
948
- }
949
- select:not([multiple], [size]) {
950
- padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
951
- padding-left: var(--form-element-spacing-horizontal);
952
- -webkit-padding-start: var(--form-element-spacing-horizontal);
953
- padding-inline-start: var(--form-element-spacing-horizontal);
954
- -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
955
- padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
956
- background-image: var(--icon-chevron);
957
- background-position: center right 0.75rem;
958
- background-size: 1rem auto;
959
- background-repeat: no-repeat;
960
- }
961
-
962
- [dir=rtl] select:not([multiple], [size]) {
963
- background-position: center left 0.75rem;
964
- }
965
-
966
- :where(input, select, textarea) + small {
967
- display: block;
968
- width: 100%;
969
- margin-top: calc(var(--spacing) * -0.75);
970
- margin-bottom: var(--spacing);
971
- color: var(--muted-color);
972
- }
973
-
974
- label > :where(input, select, textarea) {
975
- margin-top: calc(var(--spacing) * 0.25);
976
- }
977
-
978
- /**
979
- * Form elements
980
- * Checkboxes & Radios
981
- */
982
- [type=checkbox],
983
- [type=radio] {
984
- appearance: none;
985
- width: 1.25em;
986
- height: 1.25em;
987
- margin-top: -0.125em;
988
- margin-right: 0.375em;
989
- margin-left: 0;
990
- -webkit-margin-start: 0;
991
- margin-inline-start: 0;
992
- -webkit-margin-end: 0.375em;
993
- margin-inline-end: 0.375em;
994
- border-width: var(--border-width);
995
- font-size: inherit;
996
- vertical-align: middle;
997
- cursor: pointer;
998
- }
999
- [type=checkbox]::-ms-check,
1000
- [type=radio]::-ms-check {
1001
- display: none;
1002
- }
1003
- [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,
1004
- [type=radio]:checked,
1005
- [type=radio]:checked:active,
1006
- [type=radio]:checked:focus {
1007
- --background-color: var(--primary);
1008
- --border-color: var(--primary);
1009
- background-image: var(--icon-checkbox);
1010
- background-position: center;
1011
- background-size: 0.75em auto;
1012
- background-repeat: no-repeat;
1013
- }
1014
- [type=checkbox] ~ label,
1015
- [type=radio] ~ label {
1016
- display: inline-block;
1017
- margin-right: 0.375em;
1018
- margin-bottom: 0;
1019
- cursor: pointer;
1020
- }
1021
-
1022
- [type=radio] {
1023
- border-radius: 50%;
1024
- }
1025
- [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {
1026
- --background-color: var(--primary-inverse);
1027
- border-width: 0.35em;
1028
- background-image: none;
1029
- }
1030
-
1031
- [type=checkbox][role=switch] {
1032
- --background-color: var(--switch-background-color);
1033
- --border-color: var(--switch-background-color);
1034
- --color: var(--switch-color);
1035
- width: 2.25em;
1036
- height: 1.25em;
1037
- border: var(--border-width) solid var(--border-color);
1038
- border-radius: 1.25em;
1039
- background-color: var(--background-color);
1040
- line-height: 1.25em;
1041
- }
1042
- [type=checkbox][role=switch]:focus {
1043
- --background-color: var(--switch-background-color);
1044
- --border-color: var(--switch-background-color);
1045
- }
1046
- [type=checkbox][role=switch]:checked {
1047
- --background-color: var(--switch-checked-background-color);
1048
- --border-color: var(--switch-checked-background-color);
1049
- }
1050
- [type=checkbox][role=switch]:before {
1051
- display: block;
1052
- width: calc(1.25em - (var(--border-width) * 2));
1053
- height: 100%;
1054
- border-radius: 50%;
1055
- background-color: var(--color);
1056
- content: "";
1057
- transition: margin 0.1s ease-in-out;
1058
- }
1059
- [type=checkbox][role=switch]:checked {
1060
- background-image: none;
1061
- }
1062
- [type=checkbox][role=switch]:checked::before {
1063
- margin-left: calc(1.125em - var(--border-width));
1064
- -webkit-margin-start: calc(1.125em - var(--border-width));
1065
- margin-inline-start: calc(1.125em - var(--border-width));
1066
- }
1067
-
1068
- [type=checkbox][aria-invalid=false],
1069
- [type=checkbox]:checked[aria-invalid=false],
1070
- [type=radio][aria-invalid=false],
1071
- [type=radio]:checked[aria-invalid=false],
1072
- [type=checkbox][role=switch][aria-invalid=false],
1073
- [type=checkbox][role=switch]:checked[aria-invalid=false] {
1074
- --border-color: var(--form-element-valid-border-color);
1075
- }
1076
- [type=checkbox][aria-invalid=true],
1077
- [type=checkbox]:checked[aria-invalid=true],
1078
- [type=radio][aria-invalid=true],
1079
- [type=radio]:checked[aria-invalid=true],
1080
- [type=checkbox][role=switch][aria-invalid=true],
1081
- [type=checkbox][role=switch]:checked[aria-invalid=true] {
1082
- --border-color: var(--form-element-invalid-border-color);
1083
- }
1084
-
1085
- /**
1086
- * Form elements
1087
- * Alternatives input types (Not Checkboxes & Radios)
1088
- */
1089
- [type=color]::-webkit-color-swatch-wrapper {
1090
- padding: 0;
1091
- }
1092
- [type=color]::-moz-focus-inner {
1093
- padding: 0;
1094
- }
1095
- [type=color]::-webkit-color-swatch {
1096
- border: 0;
1097
- border-radius: calc(var(--border-radius) * 0.5);
1098
- }
1099
- [type=color]::-moz-color-swatch {
1100
- border: 0;
1101
- border-radius: calc(var(--border-radius) * 0.5);
1102
- }
1103
-
1104
- [type=date]::-webkit-calendar-picker-indicator,
1105
- [type=datetime-local]::-webkit-calendar-picker-indicator,
1106
- [type=month]::-webkit-calendar-picker-indicator,
1107
- [type=time]::-webkit-calendar-picker-indicator,
1108
- [type=week]::-webkit-calendar-picker-indicator {
1109
- width: var(--icon-width);
1110
- margin-right: calc(var(--icon-width) * -1);
1111
- margin-left: var(--icon-position);
1112
- opacity: 0;
1113
- }
1114
-
1115
- [dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
1116
- text-align: right;
1117
- }
1118
-
1119
- [type=file] {
1120
- --color: var(--muted-color);
1121
- padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
1122
- border: 0;
1123
- border-radius: 0;
1124
- background: none;
1125
- }
1126
- [type=file]::-webkit-file-upload-button {
1127
- --background-color: var(--secondary);
1128
- --border-color: var(--secondary);
1129
- --color: var(--secondary-inverse);
1130
- margin-right: calc(var(--spacing) / 2);
1131
- margin-left: 0;
1132
- -webkit-margin-start: 0;
1133
- margin-inline-start: 0;
1134
- -webkit-margin-end: calc(var(--spacing) / 2);
1135
- margin-inline-end: calc(var(--spacing) / 2);
1136
- padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1137
- border: var(--border-width) solid var(--border-color);
1138
- border-radius: var(--border-radius);
1139
- outline: none;
1140
- background-color: var(--background-color);
1141
- box-shadow: var(--box-shadow);
1142
- color: var(--color);
1143
- font-weight: var(--font-weight);
1144
- font-size: 1rem;
1145
- line-height: var(--line-height);
1146
- text-align: center;
1147
- cursor: pointer;
1148
- }
1149
- [type=file]::file-selector-button {
1150
- --background-color: var(--secondary);
1151
- --border-color: var(--secondary);
1152
- --color: var(--secondary-inverse);
1153
- margin-right: calc(var(--spacing) / 2);
1154
- margin-left: 0;
1155
- -webkit-margin-start: 0;
1156
- margin-inline-start: 0;
1157
- -webkit-margin-end: calc(var(--spacing) / 2);
1158
- margin-inline-end: calc(var(--spacing) / 2);
1159
- padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1160
- border: var(--border-width) solid var(--border-color);
1161
- border-radius: var(--border-radius);
1162
- outline: none;
1163
- background-color: var(--background-color);
1164
- box-shadow: var(--box-shadow);
1165
- color: var(--color);
1166
- font-weight: var(--font-weight);
1167
- font-size: 1rem;
1168
- line-height: var(--line-height);
1169
- text-align: center;
1170
- cursor: pointer;
1171
- }
1172
- [type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
1173
- --background-color: var(--secondary-hover);
1174
- --border-color: var(--secondary-hover);
1175
- }
1176
- [type=file]::file-selector-button:is(:hover, :active, :focus) {
1177
- --background-color: var(--secondary-hover);
1178
- --border-color: var(--secondary-hover);
1179
- }
1180
- [type=file]::-webkit-file-upload-button {
1181
- --background-color: var(--secondary);
1182
- --border-color: var(--secondary);
1183
- --color: var(--secondary-inverse);
1184
- margin-right: calc(var(--spacing) / 2);
1185
- margin-left: 0;
1186
- -webkit-margin-start: 0;
1187
- margin-inline-start: 0;
1188
- -webkit-margin-end: calc(var(--spacing) / 2);
1189
- margin-inline-end: calc(var(--spacing) / 2);
1190
- padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1191
- border: var(--border-width) solid var(--border-color);
1192
- border-radius: var(--border-radius);
1193
- outline: none;
1194
- background-color: var(--background-color);
1195
- box-shadow: var(--box-shadow);
1196
- color: var(--color);
1197
- font-weight: var(--font-weight);
1198
- font-size: 1rem;
1199
- line-height: var(--line-height);
1200
- text-align: center;
1201
- cursor: pointer;
1202
- }
1203
- [type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
1204
- --background-color: var(--secondary-hover);
1205
- --border-color: var(--secondary-hover);
1206
- }
1207
- [type=file]::-ms-browse {
1208
- --background-color: var(--secondary);
1209
- --border-color: var(--secondary);
1210
- --color: var(--secondary-inverse);
1211
- margin-right: calc(var(--spacing) / 2);
1212
- margin-left: 0;
1213
- margin-inline-start: 0;
1214
- margin-inline-end: calc(var(--spacing) / 2);
1215
- padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
1216
- border: var(--border-width) solid var(--border-color);
1217
- border-radius: var(--border-radius);
1218
- outline: none;
1219
- background-color: var(--background-color);
1220
- box-shadow: var(--box-shadow);
1221
- color: var(--color);
1222
- font-weight: var(--font-weight);
1223
- font-size: 1rem;
1224
- line-height: var(--line-height);
1225
- text-align: center;
1226
- cursor: pointer;
1227
- }
1228
- [type=file]::-ms-browse:is(:hover, :active, :focus) {
1229
- --background-color: var(--secondary-hover);
1230
- --border-color: var(--secondary-hover);
1231
- }
1232
-
1233
- [type=range] {
1234
- appearance: none;
1235
- width: 100%;
1236
- height: 1.25rem;
1237
- background: none;
1238
- }
1239
- [type=range]::-webkit-slider-runnable-track {
1240
- width: 100%;
1241
- height: 0.25rem;
1242
- border-radius: var(--border-radius);
1243
- background-color: var(--range-border-color);
1244
- -webkit-transition: background-color var(--transition), box-shadow var(--transition);
1245
- transition: background-color var(--transition), box-shadow var(--transition);
1246
- }
1247
- [type=range]::-moz-range-track {
1248
- width: 100%;
1249
- height: 0.25rem;
1250
- border-radius: var(--border-radius);
1251
- background-color: var(--range-border-color);
1252
- -moz-transition: background-color var(--transition), box-shadow var(--transition);
1253
- transition: background-color var(--transition), box-shadow var(--transition);
1254
- }
1255
- [type=range]::-ms-track {
1256
- width: 100%;
1257
- height: 0.25rem;
1258
- border-radius: var(--border-radius);
1259
- background-color: var(--range-border-color);
1260
- -ms-transition: background-color var(--transition), box-shadow var(--transition);
1261
- transition: background-color var(--transition), box-shadow var(--transition);
1262
- }
1263
- [type=range]::-webkit-slider-thumb {
1264
- appearance: none;
1265
- width: 1.25rem;
1266
- height: 1.25rem;
1267
- margin-top: -0.5rem;
1268
- border: 2px solid var(--range-thumb-border-color);
1269
- border-radius: 50%;
1270
- background-color: var(--range-thumb-color);
1271
- cursor: pointer;
1272
- -webkit-transition: background-color var(--transition), transform var(--transition);
1273
- transition: background-color var(--transition), transform var(--transition);
1274
- }
1275
- [type=range]::-moz-range-thumb {
1276
- appearance: none;
1277
- width: 1.25rem;
1278
- height: 1.25rem;
1279
- margin-top: -0.5rem;
1280
- border: 2px solid var(--range-thumb-border-color);
1281
- border-radius: 50%;
1282
- background-color: var(--range-thumb-color);
1283
- cursor: pointer;
1284
- -moz-transition: background-color var(--transition), transform var(--transition);
1285
- transition: background-color var(--transition), transform var(--transition);
1286
- }
1287
- [type=range]::-ms-thumb {
1288
- appearance: none;
1289
- width: 1.25rem;
1290
- height: 1.25rem;
1291
- margin-top: -0.5rem;
1292
- border: 2px solid var(--range-thumb-border-color);
1293
- border-radius: 50%;
1294
- background-color: var(--range-thumb-color);
1295
- cursor: pointer;
1296
- -ms-transition: background-color var(--transition), transform var(--transition);
1297
- transition: background-color var(--transition), transform var(--transition);
1298
- }
1299
- [type=range]:hover, [type=range]:focus {
1300
- --range-border-color: var(--range-active-border-color);
1301
- --range-thumb-color: var(--range-thumb-hover-color);
1302
- }
1303
- [type=range]:active {
1304
- --range-thumb-color: var(--range-thumb-active-color);
1305
- }
1306
- [type=range]:active::-webkit-slider-thumb {
1307
- transform: scale(1.25);
1308
- }
1309
- [type=range]:active::-moz-range-thumb {
1310
- transform: scale(1.25);
1311
- }
1312
- [type=range]:active::-ms-thumb {
1313
- transform: scale(1.25);
1314
- }
1315
-
1316
- input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1317
- -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
1318
- padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
1319
- background-position: center left 1.125rem, center right 0.75rem;
1320
- }
1321
- input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
1322
- background-image: var(--icon-search), var(--icon-valid);
1323
- }
1324
- input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
1325
- background-image: var(--icon-search), var(--icon-invalid);
1326
- }
1327
-
1328
- [type=search]::-webkit-search-cancel-button {
1329
- appearance: none;
1330
- display: none;
1331
- }
1332
-
1333
- [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
1334
- background-position: center right 1.125rem;
1335
- }
1336
- [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1337
- background-position: center right 1.125rem, center left 0.75rem;
1338
- }
1339
-
1340
- /**
1341
- * Table
1342
- */
1343
- :where(table) {
1344
- width: 100%;
1345
- border-collapse: collapse;
1346
- border-spacing: 0;
1347
- text-indent: 0;
1348
- }
1349
-
1350
- th,
1351
- td {
1352
- padding: calc(var(--spacing) / 2) var(--spacing);
1353
- border-bottom: var(--border-width) solid var(--table-border-color);
1354
- color: var(--color);
1355
- font-weight: var(--font-weight);
1356
- font-size: var(--font-size);
1357
- text-align: left;
1358
- text-align: start;
1359
- }
1360
-
1361
- tfoot th,
1362
- tfoot td {
1363
- border-top: var(--border-width) solid var(--table-border-color);
1364
- border-bottom: 0;
1365
- }
1366
-
1367
- table[role=grid] tbody tr:nth-child(odd) {
1368
- background-color: var(--table-row-stripped-background-color);
1369
- }
1370
-
1371
- /**
1372
- * Code
1373
- */
1374
- pre,
1375
- code,
1376
- kbd,
1377
- samp {
1378
- font-size: 0.875em;
1379
- font-family: var(--font-family);
1380
- }
1381
-
1382
- pre {
1383
- -ms-overflow-style: scrollbar;
1384
- overflow: auto;
1385
- }
1386
-
1387
- pre,
1388
- code,
1389
- kbd {
1390
- border-radius: var(--border-radius);
1391
- background: var(--code-background-color);
1392
- color: var(--code-color);
1393
- font-weight: var(--font-weight);
1394
- line-height: initial;
1395
- }
1396
-
1397
- code,
1398
- kbd {
1399
- display: inline-block;
1400
- padding: 0.375rem 0.5rem;
1401
- }
1402
-
1403
- pre {
1404
- display: block;
1405
- margin-bottom: var(--spacing);
1406
- overflow-x: auto;
1407
- }
1408
- pre > code {
1409
- display: block;
1410
- padding: var(--spacing);
1411
- background: none;
1412
- font-size: 14px;
1413
- line-height: var(--line-height);
1414
- }
1415
-
1416
- code b {
1417
- color: var(--code-tag-color);
1418
- font-weight: var(--font-weight);
1419
- }
1420
- code i {
1421
- color: var(--code-property-color);
1422
- font-style: normal;
1423
- }
1424
- code u {
1425
- color: var(--code-value-color);
1426
- text-decoration: none;
1427
- }
1428
- code em {
1429
- color: var(--code-comment-color);
1430
- font-style: normal;
1431
- }
1432
-
1433
- kbd {
1434
- background-color: var(--code-kbd-background-color);
1435
- color: var(--code-kbd-color);
1436
- vertical-align: baseline;
1437
- }
1438
-
1439
- /**
1440
- * Miscs
1441
- */
1442
- hr {
1443
- height: 0;
1444
- border: 0;
1445
- border-top: 1px solid var(--muted-border-color);
1446
- color: inherit;
1447
- }
1448
-
1449
- [hidden],
1450
- template {
1451
- display: none !important;
1452
- }
1453
-
1454
- canvas {
1455
- display: inline-block;
1456
- }
1457
-
1458
- /**
1459
- * Accordion (<details>)
1460
- */
1461
- details {
1462
- display: block;
1463
- margin-bottom: var(--spacing);
1464
- padding-bottom: var(--spacing);
1465
- border-bottom: var(--border-width) solid var(--accordion-border-color);
1466
- }
1467
- details summary {
1468
- line-height: 1rem;
1469
- list-style-type: none;
1470
- cursor: pointer;
1471
- transition: color var(--transition);
1472
- }
1473
- details summary:not([role]) {
1474
- color: var(--accordion-close-summary-color);
1475
- }
1476
- details summary::-webkit-details-marker {
1477
- display: none;
1478
- }
1479
- details summary::marker {
1480
- display: none;
1481
- }
1482
- details summary::-moz-list-bullet {
1483
- list-style-type: none;
1484
- }
1485
- details summary::after {
1486
- display: block;
1487
- width: 1rem;
1488
- height: 1rem;
1489
- -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
1490
- margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
1491
- float: right;
1492
- transform: rotate(-90deg);
1493
- background-image: var(--icon-chevron);
1494
- background-position: right center;
1495
- background-size: 1rem auto;
1496
- background-repeat: no-repeat;
1497
- content: "";
1498
- transition: transform var(--transition);
1499
- }
1500
- details summary:focus {
1501
- outline: none;
1502
- }
1503
- details summary:focus:not([role=button]) {
1504
- color: var(--accordion-active-summary-color);
1505
- }
1506
- details summary[role=button] {
1507
- width: 100%;
1508
- text-align: left;
1509
- }
1510
- details summary[role=button]::after {
1511
- height: calc(1rem * var(--line-height, 1.5));
1512
- background-image: var(--icon-chevron-button);
1513
- }
1514
- details summary[role=button].contrast::after {
1515
- background-image: var(--icon-chevron-button-inverse);
1516
- }
1517
- details[open] > summary {
1518
- margin-bottom: calc(var(--spacing));
1519
- }
1520
- details[open] > summary:not([role]):not(:focus) {
1521
- color: var(--accordion-open-summary-color);
1522
- }
1523
- details[open] > summary::after {
1524
- transform: rotate(0);
1525
- }
1526
-
1527
- [dir=rtl] details summary {
1528
- text-align: right;
1529
- }
1530
- [dir=rtl] details summary::after {
1531
- float: left;
1532
- background-position: left center;
1533
- }
1534
-
1535
- /**
1536
- * Card (<article>)
1537
- */
1538
- .card {
1539
- margin: var(--block-spacing-vertical) 0;
1540
- padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
1541
- border-radius: var(--border-radius);
1542
- background: var(--card-background-color);
1543
- box-shadow: var(--card-box-shadow);
1544
- }
1545
- .card > header,
1546
- .card > footer {
1547
- margin-right: calc(var(--block-spacing-horizontal) * -1);
1548
- margin-left: calc(var(--block-spacing-horizontal) * -1);
1549
- padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
1550
- background-color: var(--card-sectionning-background-color);
1551
- }
1552
- .card > header {
1553
- margin-top: calc(var(--block-spacing-vertical) * -1);
1554
- margin-bottom: var(--block-spacing-vertical);
1555
- border-bottom: var(--border-width) solid var(--card-border-color);
1556
- border-top-right-radius: var(--border-radius);
1557
- border-top-left-radius: var(--border-radius);
1558
- }
1559
- .card > footer {
1560
- margin-top: var(--block-spacing-vertical);
1561
- margin-bottom: calc(var(--block-spacing-vertical) * -1);
1562
- border-top: var(--border-width) solid var(--card-border-color);
1563
- border-bottom-right-radius: var(--border-radius);
1564
- border-bottom-left-radius: var(--border-radius);
1565
- }
1566
-
1567
- /**
1568
- * Modal (<dialog>)
1569
- */
1570
- :root {
1571
- --scrollbar-width: 0px;
1572
- }
1573
-
1574
- dialog {
1575
- display: flex;
1576
- z-index: 999;
1577
- position: fixed;
1578
- top: 0;
1579
- right: 0;
1580
- bottom: 0;
1581
- left: 0;
1582
- align-items: center;
1583
- justify-content: center;
1584
- width: inherit;
1585
- min-width: 100%;
1586
- height: inherit;
1587
- min-height: 100%;
1588
- padding: var(--spacing);
1589
- border: 0;
1590
- background-color: var(--modal-overlay-background-color);
1591
- color: var(--color);
1592
- }
1593
- dialog article {
1594
- max-height: calc(100vh - var(--spacing) * 2);
1595
- overflow: auto;
1596
- }
1597
- @media (min-width: 640px) {
1598
- dialog article {
1599
- max-width: 510px;
1600
- }
1601
- }
1602
- @media (min-width: 768px) {
1603
- dialog article {
1604
- max-width: 700px;
1605
- }
1606
- }
1607
- dialog article > header,
1608
- dialog article > footer {
1609
- padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
1610
- }
1611
- dialog article > header .close {
1612
- margin: 0;
1613
- margin-left: var(--spacing);
1614
- float: right;
1615
- }
1616
- dialog article > footer {
1617
- text-align: right;
1618
- }
1619
- dialog article > footer [role=button] {
1620
- margin-bottom: 0;
1621
- }
1622
- dialog article > footer [role=button]:not(:first-of-type) {
1623
- margin-left: calc(var(--spacing) * 0.5);
1624
- }
1625
- dialog article p:last-of-type {
1626
- margin: 0;
1627
- }
1628
- dialog article .close {
1629
- display: block;
1630
- width: 1rem;
1631
- height: 1rem;
1632
- margin-top: calc(var(--block-spacing-vertical) * -0.5);
1633
- margin-bottom: var(--typography-spacing-vertical);
1634
- margin-left: auto;
1635
- background-image: var(--icon-close);
1636
- background-position: center;
1637
- background-size: auto 1rem;
1638
- background-repeat: no-repeat;
1639
- opacity: 0.5;
1640
- transition: opacity var(--transition);
1641
- }
1642
- dialog article .close:is([aria-current], :hover, :active, :focus) {
1643
- opacity: 1;
1644
- }
1645
- dialog:not([open]), dialog[open=false] {
1646
- display: none;
1647
- }
1648
-
1649
- /**
1650
- * Nav
1651
- */
1652
- :where(nav li)::before {
1653
- float: left;
1654
- content: "​";
1655
- }
1656
-
1657
- nav,
1658
- nav ul {
1659
- display: flex;
1660
- }
1661
-
1662
- nav {
1663
- justify-content: space-between;
1664
- }
1665
- nav ol,
1666
- nav ul {
1667
- align-items: center;
1668
- margin-bottom: 0;
1669
- padding: 0;
1670
- list-style: none;
1671
- }
1672
- nav ol:first-of-type,
1673
- nav ul:first-of-type {
1674
- margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
1675
- }
1676
- nav ol:last-of-type,
1677
- nav ul:last-of-type {
1678
- margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
1679
- }
1680
- nav li {
1681
- display: inline-block;
1682
- margin: 0;
1683
- padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
1684
- }
1685
- nav li > * {
1686
- --spacing: 0;
1687
- }
1688
- nav :where(a, [role=link]) {
1689
- display: inline-block;
1690
- margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
1691
- padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
1692
- border-radius: var(--border-radius);
1693
- text-decoration: none;
1694
- }
1695
- nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
1696
- text-decoration: none;
1697
- }
1698
- nav[aria-label=breadcrumb] {
1699
- align-items: center;
1700
- justify-content: start;
1701
- }
1702
- nav[aria-label=breadcrumb] ul li:not(:first-child) {
1703
- -webkit-margin-start: var(--nav-link-spacing-horizontal);
1704
- margin-inline-start: var(--nav-link-spacing-horizontal);
1705
- }
1706
- nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
1707
- position: absolute;
1708
- width: calc(var(--nav-link-spacing-horizontal) * 2);
1709
- -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
1710
- margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
1711
- content: "/";
1712
- color: var(--muted-color);
1713
- text-align: center;
1714
- }
1715
- nav[aria-label=breadcrumb] a[aria-current] {
1716
- background-color: transparent;
1717
- color: inherit;
1718
- text-decoration: none;
1719
- pointer-events: none;
1720
- }
1721
- nav [role=button] {
1722
- margin-right: inherit;
1723
- margin-left: inherit;
1724
- padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
1725
- }
1726
-
1727
- aside nav,
1728
- aside ol,
1729
- aside ul,
1730
- aside li {
1731
- display: block;
1732
- }
1733
- aside li {
1734
- padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
1735
- }
1736
- aside li a {
1737
- display: block;
1738
- }
1739
- aside li [role=button] {
1740
- margin: inherit;
1741
- }
1742
-
1743
- [dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
1744
- content: "\\";
1745
- }
1746
-
1747
- /**
1748
- * Progress
1749
- */
1750
- progress {
1751
- display: inline-block;
1752
- vertical-align: baseline;
1753
- }
1754
-
1755
- progress {
1756
- display: inline-block;
1757
- appearance: none;
1758
- width: 100%;
1759
- height: 0.5rem;
1760
- margin-bottom: calc(var(--spacing) * 0.5);
1761
- overflow: hidden;
1762
- border: 0;
1763
- border-radius: var(--border-radius);
1764
- background-color: var(--progress-background-color);
1765
- color: var(--progress-color);
1766
- }
1767
- progress::-webkit-progress-bar {
1768
- border-radius: var(--border-radius);
1769
- background: none;
1770
- }
1771
- progress[value]::-webkit-progress-value {
1772
- background-color: var(--progress-color);
1773
- }
1774
- progress::-moz-progress-bar {
1775
- background-color: var(--progress-color);
1776
- }
1777
-
1778
- @media (prefers-reduced-motion: no-preference) {
1779
- progress:indeterminate {
1780
- background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
1781
- -webkit-animation: progress-indeterminate 1s linear infinite;
1782
- animation: progress-indeterminate 1s linear infinite;
1783
- }
1784
- progress:indeterminate[value]::-webkit-progress-value {
1785
- background-color: transparent;
1786
- }
1787
- progress:indeterminate::-moz-progress-bar {
1788
- background-color: transparent;
1789
- }
1790
- [dir=rtl] progress:indeterminate {
1791
- animation-direction: reverse;
1792
- }
1793
- }
1794
-
1795
- @-webkit-keyframes progress-indeterminate {
1796
- 0% {
1797
- background-position: 200% 0;
1798
- }
1799
- 100% {
1800
- background-position: -200% 0;
1801
- }
1802
- }
1803
-
1804
- @keyframes progress-indeterminate {
1805
- 0% {
1806
- background-position: 200% 0;
1807
- }
1808
- 100% {
1809
- background-position: -200% 0;
1810
- }
1811
- }
1812
-
1813
- /**
1814
- * Dropdown ([role="list"])
1815
- */
1816
- details[role=list],
1817
- li[role=list] {
1818
- position: relative;
1819
- }
1820
-
1821
- details[role=list] summary + ul,
1822
- li[role=list] > ul {
1823
- display: flex;
1824
- z-index: 99;
1825
- position: absolute;
1826
- top: auto;
1827
- right: 0;
1828
- left: 0;
1829
- flex-direction: column;
1830
- margin: 0;
1831
- padding: 0;
1832
- border: var(--border-width) solid var(--dropdown-border-color);
1833
- border-radius: var(--border-radius);
1834
- border-top-right-radius: 0;
1835
- border-top-left-radius: 0;
1836
- background-color: var(--dropdown-background-color);
1837
- box-shadow: var(--card-box-shadow);
1838
- color: var(--dropdown-color);
1839
- white-space: nowrap;
1840
- }
1841
- details[role=list] summary + ul li,
1842
- li[role=list] > ul li {
1843
- width: 100%;
1844
- margin-bottom: 0;
1845
- padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
1846
- list-style: none;
1847
- }
1848
- details[role=list] summary + ul li:first-of-type,
1849
- li[role=list] > ul li:first-of-type {
1850
- margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
1851
- }
1852
- details[role=list] summary + ul li:last-of-type,
1853
- li[role=list] > ul li:last-of-type {
1854
- margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
1855
- }
1856
- details[role=list] summary + ul li a,
1857
- li[role=list] > ul li a {
1858
- display: block;
1859
- margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
1860
- padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
1861
- overflow: hidden;
1862
- color: var(--dropdown-color);
1863
- text-decoration: none;
1864
- text-overflow: ellipsis;
1865
- }
1866
- details[role=list] summary + ul li a:hover,
1867
- li[role=list] > ul li a:hover {
1868
- background-color: var(--dropdown-hover-background-color);
1869
- }
1870
-
1871
- details[role=list] summary::after,
1872
- li[role=list] > a::after {
1873
- display: block;
1874
- width: 1rem;
1875
- height: calc(1rem * var(--line-height, 1.5));
1876
- -webkit-margin-start: 0.5rem;
1877
- margin-inline-start: 0.5rem;
1878
- float: right;
1879
- transform: rotate(0deg);
1880
- background-position: right center;
1881
- background-size: 1rem auto;
1882
- background-repeat: no-repeat;
1883
- content: "";
1884
- }
1885
-
1886
- details[role=list] {
1887
- padding: 0;
1888
- border-bottom: none;
1889
- }
1890
- details[role=list] summary {
1891
- margin-bottom: 0;
1892
- }
1893
- details[role=list] summary:not([role]) {
1894
- height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
1895
- padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
1896
- border: var(--border-width) solid var(--form-element-border-color);
1897
- border-radius: var(--border-radius);
1898
- background-color: var(--form-element-background-color);
1899
- color: var(--form-element-placeholder-color);
1900
- line-height: inherit;
1901
- cursor: pointer;
1902
- transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
1903
- }
1904
- details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
1905
- border-color: var(--form-element-active-border-color);
1906
- background-color: var(--form-element-active-background-color);
1907
- }
1908
- details[role=list] summary:not([role]):focus {
1909
- box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
1910
- }
1911
- details[role=list][open] summary {
1912
- border-bottom-right-radius: 0;
1913
- border-bottom-left-radius: 0;
1914
- }
1915
- details[role=list][open] summary::before {
1916
- display: block;
1917
- z-index: 1;
1918
- position: fixed;
1919
- top: 0;
1920
- right: 0;
1921
- bottom: 0;
1922
- left: 0;
1923
- background: none;
1924
- content: "";
1925
- cursor: default;
1926
- }
1927
-
1928
- nav details[role=list] summary,
1929
- nav li[role=list] a {
1930
- display: flex;
1931
- direction: ltr;
1932
- }
1933
-
1934
- nav details[role=list] summary + ul,
1935
- nav li[role=list] > ul {
1936
- min-width: -webkit-fit-content;
1937
- min-width: -moz-fit-content;
1938
- min-width: fit-content;
1939
- border-radius: var(--border-radius);
1940
- }
1941
- nav details[role=list] summary + ul li a,
1942
- nav li[role=list] > ul li a {
1943
- border-radius: 0;
1944
- }
1945
-
1946
- nav details[role=list] summary,
1947
- nav details[role=list] summary:not([role]) {
1948
- height: auto;
1949
- padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
1950
- }
1951
- nav details[role=list][open] summary {
1952
- border-radius: var(--border-radius);
1953
- }
1954
- nav details[role=list] summary + ul {
1955
- margin-top: var(--outline-width);
1956
- -webkit-margin-start: 0;
1957
- margin-inline-start: 0;
1958
- }
1959
- nav details[role=list] summary[role=link] {
1960
- margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
1961
- line-height: var(--line-height);
1962
- }
1963
- nav details[role=list] summary[role=link] + ul {
1964
- margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
1965
- -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
1966
- margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
1967
- }
1968
-
1969
- li[role=list]:hover > ul,
1970
- li[role=list] a:active ~ ul,
1971
- li[role=list] a:focus ~ ul {
1972
- display: flex;
1973
- }
1974
- li[role=list] > ul {
1975
- display: none;
1976
- margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
1977
- -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
1978
- margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
1979
- }
1980
- li[role=list] > a::after {
1981
- background-image: var(--icon-chevron);
1982
- }
1983
-
1984
- /**
1985
- * Loading ([aria-busy=true])
1986
- */
1987
- [aria-busy=true] {
1988
- cursor: progress;
1989
- }
1990
-
1991
- [aria-busy=true]:not(input, select, textarea)::before {
1992
- display: inline-block;
1993
- width: 1em;
1994
- height: 1em;
1995
- border: 0.1875em solid currentColor;
1996
- border-radius: 1em;
1997
- border-right-color: transparent;
1998
- content: "";
1999
- vertical-align: text-bottom;
2000
- vertical-align: -0.125em;
2001
- -webkit-animation: spinner 0.75s linear infinite;
2002
- animation: spinner 0.75s linear infinite;
2003
- opacity: var(--loading-spinner-opacity);
2004
- }
2005
- [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
2006
- margin-right: calc(var(--spacing) * 0.5);
2007
- margin-left: 0;
2008
- -webkit-margin-start: 0;
2009
- margin-inline-start: 0;
2010
- -webkit-margin-end: calc(var(--spacing) * 0.5);
2011
- margin-inline-end: calc(var(--spacing) * 0.5);
2012
- }
2013
- [aria-busy=true]:not(input, select, textarea):empty {
2014
- text-align: center;
2015
- }
2016
-
2017
- button[aria-busy=true],
2018
- input[type=submit][aria-busy=true],
2019
- input[type=button][aria-busy=true],
2020
- input[type=reset][aria-busy=true],
2021
- a[aria-busy=true] {
2022
- pointer-events: none;
2023
- }
2024
-
2025
- @-webkit-keyframes spinner {
2026
- to {
2027
- transform: rotate(360deg);
2028
- }
2029
- }
2030
-
2031
- @keyframes spinner {
2032
- to {
2033
- transform: rotate(360deg);
2034
- }
2035
- }
2036
-
2037
- /**
2038
- * Accessibility & User interaction
2039
- */
2040
- [aria-controls] {
2041
- cursor: pointer;
2042
- }
2043
-
2044
- [aria-disabled=true],
2045
- [disabled] {
2046
- cursor: not-allowed;
2047
- }
2048
-
2049
- [aria-hidden=false][hidden] {
2050
- display: initial;
2051
- }
2052
-
2053
- [aria-hidden=false][hidden]:not(:focus) {
2054
- clip: rect(0, 0, 0, 0);
2055
- position: absolute;
2056
- }
2057
-
2058
- [dir=rtl] {
2059
- direction: rtl;
2060
- }
2061
-
2062
- /**
2063
- * Reduce Motion Features
2064
- */
2065
- @media (prefers-reduced-motion: reduce) {
2066
- *:not([aria-busy=true]),
2067
- :not([aria-busy=true])::before,
2068
- :not([aria-busy=true])::after {
2069
- background-attachment: initial !important;
2070
- -webkit-animation-duration: 1ms !important;
2071
- animation-duration: 1ms !important;
2072
- -webkit-animation-delay: -1ms !important;
2073
- animation-delay: -1ms !important;
2074
- -webkit-animation-iteration-count: 1 !important;
2075
- animation-iteration-count: 1 !important;
2076
- scroll-behavior: auto !important;
2077
- transition-delay: 0s !important;
2078
- transition-duration: 0s !important;
2079
- }
2080
- }