@anyblades/pico 2.1.1-alpha → 2.2.0-alpha
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.
- package/README.md +7 -7
- package/css/pico.blades.css +3682 -0
- package/css/pico.blades.min.css +110 -0
- package/css/pico.css +890 -708
- package/css/pico.min.css +100 -1
- package/css/postcss.config.js +6 -4
- package/package.json +11 -10
- package/src/_components.css +974 -0
- package/src/_content.css +604 -0
- package/src/_forms.css +745 -0
- package/src/_layout.css +127 -0
- package/src/_utilities.css +53 -0
- package/src/_variables.css +689 -0
- package/src/pico.blades.css +7 -0
- package/src/pico.css +11 -0
package/css/pico.css
CHANGED
|
@@ -4,13 +4,18 @@
|
|
|
4
4
|
* Copyright 2019-2025 - Licensed under MIT
|
|
5
5
|
*/
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Variables
|
|
8
8
|
*/
|
|
9
9
|
:root,
|
|
10
10
|
:host {
|
|
11
|
-
--pico-font-family-emoji:
|
|
12
|
-
|
|
13
|
-
--pico-font-family-
|
|
11
|
+
--pico-font-family-emoji:
|
|
12
|
+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
13
|
+
--pico-font-family-sans-serif:
|
|
14
|
+
system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
|
|
15
|
+
sans-serif, var(--pico-font-family-emoji);
|
|
16
|
+
--pico-font-family-monospace:
|
|
17
|
+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
|
|
18
|
+
var(--pico-font-family-emoji);
|
|
14
19
|
--pico-font-family: var(--pico-font-family-sans-serif);
|
|
15
20
|
--pico-line-height: 1.5;
|
|
16
21
|
--pico-font-weight: 400;
|
|
@@ -29,7 +34,8 @@
|
|
|
29
34
|
--pico-form-element-spacing-vertical: 0.75rem;
|
|
30
35
|
--pico-form-element-spacing-horizontal: 1rem;
|
|
31
36
|
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
32
|
-
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
37
|
+
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
38
|
+
var(--pico-primary-focus);
|
|
33
39
|
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
|
|
34
40
|
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
|
|
35
41
|
--pico-nav-element-spacing-vertical: 1rem;
|
|
@@ -76,18 +82,16 @@
|
|
|
76
82
|
--pico-font-size: 131.25%;
|
|
77
83
|
}
|
|
78
84
|
}
|
|
79
|
-
|
|
80
85
|
a {
|
|
81
86
|
--pico-text-decoration: underline;
|
|
82
87
|
}
|
|
83
|
-
a.secondary,
|
|
88
|
+
a.secondary,
|
|
89
|
+
a.contrast {
|
|
84
90
|
--pico-text-decoration: underline;
|
|
85
91
|
}
|
|
86
|
-
|
|
87
92
|
small {
|
|
88
93
|
--pico-font-size: 0.875em;
|
|
89
94
|
}
|
|
90
|
-
|
|
91
95
|
h1,
|
|
92
96
|
h2,
|
|
93
97
|
h3,
|
|
@@ -96,43 +100,36 @@ h5,
|
|
|
96
100
|
h6 {
|
|
97
101
|
--pico-font-weight: 700;
|
|
98
102
|
}
|
|
99
|
-
|
|
100
103
|
h1 {
|
|
101
104
|
--pico-font-size: 2rem;
|
|
102
105
|
--pico-line-height: 1.125;
|
|
103
106
|
--pico-typography-spacing-top: 3rem;
|
|
104
107
|
}
|
|
105
|
-
|
|
106
108
|
h2 {
|
|
107
109
|
--pico-font-size: 1.75rem;
|
|
108
110
|
--pico-line-height: 1.15;
|
|
109
111
|
--pico-typography-spacing-top: 2.625rem;
|
|
110
112
|
}
|
|
111
|
-
|
|
112
113
|
h3 {
|
|
113
114
|
--pico-font-size: 1.5rem;
|
|
114
115
|
--pico-line-height: 1.175;
|
|
115
116
|
--pico-typography-spacing-top: 2.25rem;
|
|
116
117
|
}
|
|
117
|
-
|
|
118
118
|
h4 {
|
|
119
119
|
--pico-font-size: 1.25rem;
|
|
120
120
|
--pico-line-height: 1.2;
|
|
121
121
|
--pico-typography-spacing-top: 1.874rem;
|
|
122
122
|
}
|
|
123
|
-
|
|
124
123
|
h5 {
|
|
125
124
|
--pico-font-size: 1.125rem;
|
|
126
125
|
--pico-line-height: 1.225;
|
|
127
126
|
--pico-typography-spacing-top: 1.6875rem;
|
|
128
127
|
}
|
|
129
|
-
|
|
130
128
|
h6 {
|
|
131
129
|
--pico-font-size: 1rem;
|
|
132
130
|
--pico-line-height: 1.25;
|
|
133
131
|
--pico-typography-spacing-top: 1.5rem;
|
|
134
132
|
}
|
|
135
|
-
|
|
136
133
|
thead th,
|
|
137
134
|
thead td,
|
|
138
135
|
tfoot th,
|
|
@@ -140,98 +137,103 @@ tfoot td {
|
|
|
140
137
|
--pico-font-weight: 600;
|
|
141
138
|
--pico-border-width: 0.1875rem;
|
|
142
139
|
}
|
|
143
|
-
|
|
144
140
|
pre,
|
|
145
141
|
code,
|
|
146
142
|
kbd,
|
|
147
143
|
samp {
|
|
148
144
|
--pico-font-family: var(--pico-font-family-monospace);
|
|
149
145
|
}
|
|
150
|
-
|
|
151
146
|
kbd {
|
|
152
147
|
--pico-font-weight: bolder;
|
|
153
148
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
[type=button],
|
|
157
|
-
[type=reset],
|
|
158
|
-
[type=checkbox],
|
|
159
|
-
[type=radio],
|
|
160
|
-
[type=file]
|
|
149
|
+
input:not(
|
|
150
|
+
[type="submit"],
|
|
151
|
+
[type="button"],
|
|
152
|
+
[type="reset"],
|
|
153
|
+
[type="checkbox"],
|
|
154
|
+
[type="radio"],
|
|
155
|
+
[type="file"]
|
|
156
|
+
),
|
|
161
157
|
:where(select, textarea) {
|
|
162
158
|
--pico-outline-width: 0.0625rem;
|
|
163
159
|
}
|
|
164
|
-
|
|
165
|
-
[type=search] {
|
|
160
|
+
[type="search"] {
|
|
166
161
|
--pico-border-radius: 5rem;
|
|
167
162
|
}
|
|
168
|
-
|
|
169
|
-
[type=
|
|
170
|
-
[type=radio] {
|
|
163
|
+
[type="checkbox"],
|
|
164
|
+
[type="radio"] {
|
|
171
165
|
--pico-border-width: 0.125rem;
|
|
172
166
|
}
|
|
173
|
-
|
|
174
|
-
[type=checkbox][role=switch] {
|
|
167
|
+
[type="checkbox"][role="switch"] {
|
|
175
168
|
--pico-border-width: 0.1875rem;
|
|
176
169
|
}
|
|
177
|
-
|
|
178
|
-
details.dropdown summary:not([role=button]) {
|
|
170
|
+
details.dropdown summary:not([role="button"]) {
|
|
179
171
|
--pico-outline-width: 0.0625rem;
|
|
180
172
|
}
|
|
181
|
-
|
|
182
173
|
nav details.dropdown summary:focus-visible {
|
|
183
174
|
--pico-outline-width: 0.125rem;
|
|
184
175
|
}
|
|
185
|
-
|
|
186
|
-
[role=search] {
|
|
176
|
+
[role="search"] {
|
|
187
177
|
--pico-border-radius: 5rem;
|
|
188
178
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
[type=submit].secondary:focus,
|
|
192
|
-
[type=button].secondary:focus,
|
|
193
|
-
[role=button].secondary:focus
|
|
194
|
-
|
|
195
|
-
[
|
|
196
|
-
|
|
197
|
-
[
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
[role=
|
|
205
|
-
|
|
206
|
-
[type=
|
|
207
|
-
[
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
[role=
|
|
211
|
-
|
|
212
|
-
[
|
|
213
|
-
[
|
|
214
|
-
[role=
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
179
|
+
[role="search"]:has(
|
|
180
|
+
button.secondary:focus,
|
|
181
|
+
[type="submit"].secondary:focus,
|
|
182
|
+
[type="button"].secondary:focus,
|
|
183
|
+
[role="button"].secondary:focus
|
|
184
|
+
),
|
|
185
|
+
[role="group"]:has(
|
|
186
|
+
button.secondary:focus,
|
|
187
|
+
[type="submit"].secondary:focus,
|
|
188
|
+
[type="button"].secondary:focus,
|
|
189
|
+
[role="button"].secondary:focus
|
|
190
|
+
) {
|
|
191
|
+
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
192
|
+
var(--pico-secondary-focus);
|
|
193
|
+
}
|
|
194
|
+
[role="search"]:has(
|
|
195
|
+
button.contrast:focus,
|
|
196
|
+
[type="submit"].contrast:focus,
|
|
197
|
+
[type="button"].contrast:focus,
|
|
198
|
+
[role="button"].contrast:focus
|
|
199
|
+
),
|
|
200
|
+
[role="group"]:has(
|
|
201
|
+
button.contrast:focus,
|
|
202
|
+
[type="submit"].contrast:focus,
|
|
203
|
+
[type="button"].contrast:focus,
|
|
204
|
+
[role="button"].contrast:focus
|
|
205
|
+
) {
|
|
206
|
+
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
207
|
+
var(--pico-contrast-focus);
|
|
208
|
+
}
|
|
209
|
+
[role="search"] button,
|
|
210
|
+
[role="search"] [type="submit"],
|
|
211
|
+
[role="search"] [type="button"],
|
|
212
|
+
[role="search"] [role="button"],
|
|
213
|
+
[role="group"] button,
|
|
214
|
+
[role="group"] [type="submit"],
|
|
215
|
+
[role="group"] [type="button"],
|
|
216
|
+
[role="group"] [role="button"] {
|
|
218
217
|
--pico-form-element-spacing-horizontal: 2rem;
|
|
219
218
|
}
|
|
220
|
-
|
|
221
|
-
details summary[role=button]:not(.outline)::after {
|
|
219
|
+
details summary[role="button"]:not(.outline)::after {
|
|
222
220
|
filter: brightness(0) invert(1);
|
|
223
221
|
}
|
|
224
|
-
|
|
225
|
-
|
|
222
|
+
[aria-busy="true"]:not(input, select, textarea):is(
|
|
223
|
+
button,
|
|
224
|
+
[type="submit"],
|
|
225
|
+
[type="button"],
|
|
226
|
+
[type="reset"],
|
|
227
|
+
[role="button"]
|
|
228
|
+
):not(.outline)::before {
|
|
226
229
|
filter: brightness(0) invert(1);
|
|
227
230
|
}
|
|
228
|
-
|
|
229
231
|
/**
|
|
230
232
|
* Color schemes
|
|
231
233
|
*/
|
|
232
|
-
[data-theme=light],
|
|
233
|
-
:root:not([data-theme=dark]),
|
|
234
|
-
:host(:not([data-theme=dark])) {
|
|
234
|
+
[data-theme="light"],
|
|
235
|
+
:root:not([data-theme="dark"]),
|
|
236
|
+
:host(:not([data-theme="dark"])) {
|
|
235
237
|
color-scheme: light;
|
|
236
238
|
--pico-background-color: #fff;
|
|
237
239
|
--pico-color: #373c44;
|
|
@@ -268,7 +270,13 @@ details summary[role=button]:not(.outline)::after {
|
|
|
268
270
|
--pico-contrast-hover-underline: var(--pico-secondary-hover);
|
|
269
271
|
--pico-contrast-focus: rgba(93, 107, 137, 0.25);
|
|
270
272
|
--pico-contrast-inverse: #fff;
|
|
271
|
-
--pico-box-shadow:
|
|
273
|
+
--pico-box-shadow:
|
|
274
|
+
0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
|
|
275
|
+
0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
|
|
276
|
+
0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
|
|
277
|
+
0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
|
|
278
|
+
0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
|
|
279
|
+
0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
|
|
272
280
|
--pico-h1-color: #2d3138;
|
|
273
281
|
--pico-h2-color: #373c44;
|
|
274
282
|
--pico-h3-color: #424751;
|
|
@@ -335,27 +343,35 @@ details summary[role=button]:not(.outline)::after {
|
|
|
335
343
|
--pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
336
344
|
--pico-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(200.25, 79.25, 72.25)' 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");
|
|
337
345
|
}
|
|
338
|
-
[data-theme=light]
|
|
339
|
-
|
|
340
|
-
[type=
|
|
341
|
-
[type=
|
|
342
|
-
[type=
|
|
343
|
-
[type=
|
|
344
|
-
|
|
345
|
-
[type=
|
|
346
|
-
|
|
347
|
-
[
|
|
348
|
-
|
|
349
|
-
[type=
|
|
350
|
-
|
|
351
|
-
[type=
|
|
352
|
-
[type=
|
|
353
|
-
[type=
|
|
354
|
-
[type=
|
|
355
|
-
|
|
346
|
+
[data-theme="light"]
|
|
347
|
+
input:is(
|
|
348
|
+
[type="submit"],
|
|
349
|
+
[type="button"],
|
|
350
|
+
[type="reset"],
|
|
351
|
+
[type="checkbox"],
|
|
352
|
+
[type="radio"],
|
|
353
|
+
[type="file"]
|
|
354
|
+
),
|
|
355
|
+
:root:not([data-theme="dark"])
|
|
356
|
+
input:is(
|
|
357
|
+
[type="submit"],
|
|
358
|
+
[type="button"],
|
|
359
|
+
[type="reset"],
|
|
360
|
+
[type="checkbox"],
|
|
361
|
+
[type="radio"],
|
|
362
|
+
[type="file"]
|
|
363
|
+
),
|
|
364
|
+
:host(:not([data-theme="dark"]))
|
|
365
|
+
input:is(
|
|
366
|
+
[type="submit"],
|
|
367
|
+
[type="button"],
|
|
368
|
+
[type="reset"],
|
|
369
|
+
[type="checkbox"],
|
|
370
|
+
[type="radio"],
|
|
371
|
+
[type="file"]
|
|
372
|
+
) {
|
|
356
373
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
357
374
|
}
|
|
358
|
-
|
|
359
375
|
@media only screen and (prefers-color-scheme: dark) {
|
|
360
376
|
:root:not([data-theme]),
|
|
361
377
|
:host(:not([data-theme])) {
|
|
@@ -395,7 +411,13 @@ details summary[role=button]:not(.outline)::after {
|
|
|
395
411
|
--pico-contrast-hover-underline: var(--pico-contrast-hover);
|
|
396
412
|
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
|
|
397
413
|
--pico-contrast-inverse: #000;
|
|
398
|
-
--pico-box-shadow:
|
|
414
|
+
--pico-box-shadow:
|
|
415
|
+
0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
|
|
416
|
+
0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
|
|
417
|
+
0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
|
|
418
|
+
0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
|
|
419
|
+
0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
|
|
420
|
+
0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
|
399
421
|
--pico-h1-color: #f0f1f3;
|
|
400
422
|
--pico-h2-color: #e0e3e7;
|
|
401
423
|
--pico-h3-color: #c2c7d0;
|
|
@@ -462,38 +484,50 @@ details summary[role=button]:not(.outline)::after {
|
|
|
462
484
|
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
463
485
|
--pico-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(149.5, 74, 80)' 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");
|
|
464
486
|
}
|
|
465
|
-
:root:not([data-theme])
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
[
|
|
475
|
-
|
|
476
|
-
|
|
487
|
+
:root:not([data-theme])
|
|
488
|
+
input:is(
|
|
489
|
+
[type="submit"],
|
|
490
|
+
[type="button"],
|
|
491
|
+
[type="reset"],
|
|
492
|
+
[type="checkbox"],
|
|
493
|
+
[type="radio"],
|
|
494
|
+
[type="file"]
|
|
495
|
+
),
|
|
496
|
+
:host(:not([data-theme]))
|
|
497
|
+
input:is(
|
|
498
|
+
[type="submit"],
|
|
499
|
+
[type="button"],
|
|
500
|
+
[type="reset"],
|
|
501
|
+
[type="checkbox"],
|
|
502
|
+
[type="radio"],
|
|
503
|
+
[type="file"]
|
|
504
|
+
) {
|
|
477
505
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
478
506
|
}
|
|
479
|
-
:root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after,
|
|
480
|
-
:host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after {
|
|
507
|
+
:root:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after,
|
|
508
|
+
:host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)::after {
|
|
481
509
|
filter: brightness(0);
|
|
482
510
|
}
|
|
483
|
-
:root:not([data-theme])
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
[
|
|
492
|
-
|
|
511
|
+
:root:not([data-theme])
|
|
512
|
+
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
513
|
+
button,
|
|
514
|
+
[type="submit"],
|
|
515
|
+
[type="button"],
|
|
516
|
+
[type="reset"],
|
|
517
|
+
[role="button"]
|
|
518
|
+
):not(.outline)::before,
|
|
519
|
+
:host(:not([data-theme]))
|
|
520
|
+
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
521
|
+
button,
|
|
522
|
+
[type="submit"],
|
|
523
|
+
[type="button"],
|
|
524
|
+
[type="reset"],
|
|
525
|
+
[role="button"]
|
|
526
|
+
):not(.outline)::before {
|
|
493
527
|
filter: brightness(0);
|
|
494
528
|
}
|
|
495
529
|
}
|
|
496
|
-
[data-theme=dark] {
|
|
530
|
+
[data-theme="dark"] {
|
|
497
531
|
color-scheme: dark;
|
|
498
532
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
|
499
533
|
--pico-color: #c2c7d0;
|
|
@@ -530,7 +564,13 @@ details summary[role=button]:not(.outline)::after {
|
|
|
530
564
|
--pico-contrast-hover-underline: var(--pico-contrast-hover);
|
|
531
565
|
--pico-contrast-focus: rgba(207, 213, 226, 0.25);
|
|
532
566
|
--pico-contrast-inverse: #000;
|
|
533
|
-
--pico-box-shadow:
|
|
567
|
+
--pico-box-shadow:
|
|
568
|
+
0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
|
|
569
|
+
0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
|
|
570
|
+
0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
|
|
571
|
+
0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
|
|
572
|
+
0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
|
|
573
|
+
0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
|
534
574
|
--pico-h1-color: #f0f1f3;
|
|
535
575
|
--pico-h2-color: #e0e3e7;
|
|
536
576
|
--pico-h3-color: #c2c7d0;
|
|
@@ -597,32 +637,36 @@ details summary[role=button]:not(.outline)::after {
|
|
|
597
637
|
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
598
638
|
--pico-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(149.5, 74, 80)' 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");
|
|
599
639
|
}
|
|
600
|
-
[data-theme=dark]
|
|
601
|
-
|
|
602
|
-
[type=
|
|
603
|
-
[type=
|
|
604
|
-
[type=
|
|
605
|
-
[type=
|
|
640
|
+
[data-theme="dark"]
|
|
641
|
+
input:is(
|
|
642
|
+
[type="submit"],
|
|
643
|
+
[type="button"],
|
|
644
|
+
[type="reset"],
|
|
645
|
+
[type="checkbox"],
|
|
646
|
+
[type="radio"],
|
|
647
|
+
[type="file"]
|
|
648
|
+
) {
|
|
606
649
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
607
650
|
}
|
|
608
|
-
[data-theme=dark] details summary[role=button].contrast:not(.outline)::after {
|
|
651
|
+
[data-theme="dark"] details summary[role="button"].contrast:not(.outline)::after {
|
|
609
652
|
filter: brightness(0);
|
|
610
653
|
}
|
|
611
|
-
[data-theme=dark]
|
|
612
|
-
[
|
|
613
|
-
|
|
614
|
-
[type=
|
|
615
|
-
[
|
|
654
|
+
[data-theme="dark"]
|
|
655
|
+
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
656
|
+
button,
|
|
657
|
+
[type="submit"],
|
|
658
|
+
[type="button"],
|
|
659
|
+
[type="reset"],
|
|
660
|
+
[role="button"]
|
|
661
|
+
):not(.outline)::before {
|
|
616
662
|
filter: brightness(0);
|
|
617
663
|
}
|
|
618
|
-
|
|
619
664
|
progress,
|
|
620
|
-
[type=checkbox],
|
|
621
|
-
[type=radio],
|
|
622
|
-
[type=range] {
|
|
665
|
+
[type="checkbox"],
|
|
666
|
+
[type="radio"],
|
|
667
|
+
[type="range"] {
|
|
623
668
|
accent-color: var(--pico-primary);
|
|
624
669
|
}
|
|
625
|
-
|
|
626
670
|
/**
|
|
627
671
|
* Document
|
|
628
672
|
* Content-box & Responsive typography
|
|
@@ -633,13 +677,11 @@ progress,
|
|
|
633
677
|
box-sizing: border-box;
|
|
634
678
|
background-repeat: no-repeat;
|
|
635
679
|
}
|
|
636
|
-
|
|
637
680
|
::before,
|
|
638
681
|
::after {
|
|
639
682
|
text-decoration: inherit;
|
|
640
683
|
vertical-align: inherit;
|
|
641
684
|
}
|
|
642
|
-
|
|
643
685
|
:where(:root),
|
|
644
686
|
:where(:host) {
|
|
645
687
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -659,7 +701,6 @@ progress,
|
|
|
659
701
|
-o-tab-size: 4;
|
|
660
702
|
tab-size: 4;
|
|
661
703
|
}
|
|
662
|
-
|
|
663
704
|
/**
|
|
664
705
|
* Landmarks
|
|
665
706
|
*/
|
|
@@ -667,24 +708,20 @@ body {
|
|
|
667
708
|
width: 100%;
|
|
668
709
|
margin: 0;
|
|
669
710
|
}
|
|
670
|
-
|
|
671
711
|
main {
|
|
672
712
|
display: block;
|
|
673
713
|
}
|
|
674
|
-
|
|
675
714
|
body > header,
|
|
676
715
|
body > main,
|
|
677
716
|
body > footer {
|
|
678
717
|
padding-block: var(--pico-block-spacing-vertical);
|
|
679
718
|
}
|
|
680
|
-
|
|
681
719
|
/**
|
|
682
720
|
* Section
|
|
683
721
|
*/
|
|
684
722
|
section {
|
|
685
723
|
margin-bottom: var(--pico-block-spacing-vertical);
|
|
686
724
|
}
|
|
687
|
-
|
|
688
725
|
/**
|
|
689
726
|
* Container
|
|
690
727
|
*/
|
|
@@ -696,7 +733,6 @@ section {
|
|
|
696
733
|
padding-right: var(--pico-spacing);
|
|
697
734
|
padding-left: var(--pico-spacing);
|
|
698
735
|
}
|
|
699
|
-
|
|
700
736
|
@media (min-width: 576px) {
|
|
701
737
|
.container {
|
|
702
738
|
max-width: 510px;
|
|
@@ -724,7 +760,6 @@ section {
|
|
|
724
760
|
max-width: 1450px;
|
|
725
761
|
}
|
|
726
762
|
}
|
|
727
|
-
|
|
728
763
|
/**
|
|
729
764
|
* Grid
|
|
730
765
|
* Minimal grid system with auto-layout columns
|
|
@@ -743,14 +778,12 @@ section {
|
|
|
743
778
|
.grid > * {
|
|
744
779
|
min-width: 0;
|
|
745
780
|
}
|
|
746
|
-
|
|
747
781
|
/**
|
|
748
782
|
* Overflow auto
|
|
749
783
|
*/
|
|
750
784
|
.overflow-auto {
|
|
751
785
|
overflow: auto;
|
|
752
786
|
}
|
|
753
|
-
|
|
754
787
|
/**
|
|
755
788
|
* Typography
|
|
756
789
|
*/
|
|
@@ -758,7 +791,6 @@ b,
|
|
|
758
791
|
strong {
|
|
759
792
|
font-weight: bolder;
|
|
760
793
|
}
|
|
761
|
-
|
|
762
794
|
sub,
|
|
763
795
|
sup {
|
|
764
796
|
position: relative;
|
|
@@ -766,15 +798,12 @@ sup {
|
|
|
766
798
|
line-height: 0;
|
|
767
799
|
vertical-align: baseline;
|
|
768
800
|
}
|
|
769
|
-
|
|
770
801
|
sub {
|
|
771
802
|
bottom: -0.25em;
|
|
772
803
|
}
|
|
773
|
-
|
|
774
804
|
sup {
|
|
775
805
|
top: -0.5em;
|
|
776
806
|
}
|
|
777
|
-
|
|
778
807
|
address,
|
|
779
808
|
blockquote,
|
|
780
809
|
dl,
|
|
@@ -789,7 +818,6 @@ ul {
|
|
|
789
818
|
font-style: normal;
|
|
790
819
|
font-weight: var(--pico-font-weight);
|
|
791
820
|
}
|
|
792
|
-
|
|
793
821
|
h1,
|
|
794
822
|
h2,
|
|
795
823
|
h3,
|
|
@@ -804,39 +832,31 @@ h6 {
|
|
|
804
832
|
line-height: var(--pico-line-height);
|
|
805
833
|
font-family: var(--pico-font-family);
|
|
806
834
|
}
|
|
807
|
-
|
|
808
835
|
h1 {
|
|
809
836
|
--pico-color: var(--pico-h1-color);
|
|
810
837
|
}
|
|
811
|
-
|
|
812
838
|
h2 {
|
|
813
839
|
--pico-color: var(--pico-h2-color);
|
|
814
840
|
}
|
|
815
|
-
|
|
816
841
|
h3 {
|
|
817
842
|
--pico-color: var(--pico-h3-color);
|
|
818
843
|
}
|
|
819
|
-
|
|
820
844
|
h4 {
|
|
821
845
|
--pico-color: var(--pico-h4-color);
|
|
822
846
|
}
|
|
823
|
-
|
|
824
847
|
h5 {
|
|
825
848
|
--pico-color: var(--pico-h5-color);
|
|
826
849
|
}
|
|
827
|
-
|
|
828
850
|
h6 {
|
|
829
851
|
--pico-color: var(--pico-h6-color);
|
|
830
852
|
}
|
|
831
|
-
|
|
832
|
-
|
|
853
|
+
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
|
|
854
|
+
~ :is(h1, h2, h3, h4, h5, h6) {
|
|
833
855
|
margin-top: var(--pico-typography-spacing-top);
|
|
834
856
|
}
|
|
835
|
-
|
|
836
857
|
p {
|
|
837
858
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
838
859
|
}
|
|
839
|
-
|
|
840
860
|
hgroup {
|
|
841
861
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
842
862
|
}
|
|
@@ -849,27 +869,22 @@ hgroup > *:not(:first-child):last-child {
|
|
|
849
869
|
--pico-font-weight: unset;
|
|
850
870
|
font-size: 1rem;
|
|
851
871
|
}
|
|
852
|
-
|
|
853
872
|
:where(ol, ul) li {
|
|
854
873
|
margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
|
|
855
874
|
}
|
|
856
|
-
|
|
857
875
|
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
858
876
|
margin: 0;
|
|
859
877
|
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
|
|
860
878
|
}
|
|
861
|
-
|
|
862
879
|
ul li {
|
|
863
880
|
list-style: square;
|
|
864
881
|
}
|
|
865
|
-
|
|
866
882
|
mark {
|
|
867
883
|
padding: 0.125rem 0.25rem;
|
|
868
884
|
background-color: var(--pico-mark-background-color);
|
|
869
885
|
color: var(--pico-mark-color);
|
|
870
886
|
vertical-align: baseline;
|
|
871
887
|
}
|
|
872
|
-
|
|
873
888
|
blockquote {
|
|
874
889
|
display: block;
|
|
875
890
|
margin: var(--pico-typography-spacing-vertical) 0;
|
|
@@ -883,35 +898,29 @@ blockquote footer {
|
|
|
883
898
|
margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
|
|
884
899
|
color: var(--pico-blockquote-footer-color);
|
|
885
900
|
}
|
|
886
|
-
|
|
887
901
|
abbr[title] {
|
|
888
902
|
border-bottom: 1px dotted;
|
|
889
903
|
text-decoration: none;
|
|
890
904
|
cursor: help;
|
|
891
905
|
}
|
|
892
|
-
|
|
893
906
|
ins {
|
|
894
907
|
color: var(--pico-ins-color);
|
|
895
908
|
text-decoration: none;
|
|
896
909
|
}
|
|
897
|
-
|
|
898
910
|
del {
|
|
899
911
|
color: var(--pico-del-color);
|
|
900
912
|
}
|
|
901
|
-
|
|
902
913
|
::-moz-selection {
|
|
903
914
|
background-color: var(--pico-text-selection-color);
|
|
904
915
|
}
|
|
905
|
-
|
|
906
916
|
::selection {
|
|
907
917
|
background-color: var(--pico-text-selection-color);
|
|
908
918
|
}
|
|
909
|
-
|
|
910
919
|
/**
|
|
911
920
|
* Link
|
|
912
921
|
*/
|
|
913
|
-
:where(a:not([role=button])),
|
|
914
|
-
[role=link] {
|
|
922
|
+
:where(a:not([role="button"])),
|
|
923
|
+
[role="link"] {
|
|
915
924
|
--pico-color: var(--pico-primary);
|
|
916
925
|
--pico-background-color: transparent;
|
|
917
926
|
--pico-underline: var(--pico-primary-underline);
|
|
@@ -922,45 +931,71 @@ del {
|
|
|
922
931
|
text-decoration: var(--pico-text-decoration);
|
|
923
932
|
text-decoration-color: var(--pico-underline);
|
|
924
933
|
text-underline-offset: 0.125em;
|
|
925
|
-
transition:
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
934
|
+
transition:
|
|
935
|
+
background-color var(--pico-transition),
|
|
936
|
+
color var(--pico-transition),
|
|
937
|
+
box-shadow var(--pico-transition),
|
|
938
|
+
-webkit-text-decoration var(--pico-transition);
|
|
939
|
+
transition:
|
|
940
|
+
background-color var(--pico-transition),
|
|
941
|
+
color var(--pico-transition),
|
|
942
|
+
text-decoration var(--pico-transition),
|
|
943
|
+
box-shadow var(--pico-transition);
|
|
944
|
+
transition:
|
|
945
|
+
background-color var(--pico-transition),
|
|
946
|
+
color var(--pico-transition),
|
|
947
|
+
text-decoration var(--pico-transition),
|
|
948
|
+
box-shadow var(--pico-transition),
|
|
949
|
+
-webkit-text-decoration var(--pico-transition);
|
|
950
|
+
}
|
|
951
|
+
:where(a:not([role="button"])):is(
|
|
952
|
+
[aria-current]:not([aria-current="false"]),
|
|
953
|
+
:hover,
|
|
954
|
+
:active,
|
|
955
|
+
:focus
|
|
956
|
+
),
|
|
957
|
+
[role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
931
958
|
--pico-color: var(--pico-primary-hover);
|
|
932
959
|
--pico-underline: var(--pico-primary-hover-underline);
|
|
933
960
|
--pico-text-decoration: underline;
|
|
934
961
|
}
|
|
935
|
-
:where(a:not([role=button])):focus-visible,
|
|
936
|
-
[role=link]:focus-visible {
|
|
962
|
+
:where(a:not([role="button"])):focus-visible,
|
|
963
|
+
[role="link"]:focus-visible {
|
|
937
964
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
938
965
|
}
|
|
939
|
-
:where(a:not([role=button])).secondary,
|
|
940
|
-
[role=link].secondary {
|
|
966
|
+
:where(a:not([role="button"])).secondary,
|
|
967
|
+
[role="link"].secondary {
|
|
941
968
|
--pico-color: var(--pico-secondary);
|
|
942
969
|
--pico-underline: var(--pico-secondary-underline);
|
|
943
970
|
}
|
|
944
|
-
:where(a:not([role=button])).secondary:is(
|
|
945
|
-
[
|
|
971
|
+
:where(a:not([role="button"])).secondary:is(
|
|
972
|
+
[aria-current]:not([aria-current="false"]),
|
|
973
|
+
:hover,
|
|
974
|
+
:active,
|
|
975
|
+
:focus
|
|
976
|
+
),
|
|
977
|
+
[role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
946
978
|
--pico-color: var(--pico-secondary-hover);
|
|
947
979
|
--pico-underline: var(--pico-secondary-hover-underline);
|
|
948
980
|
}
|
|
949
|
-
:where(a:not([role=button])).contrast,
|
|
950
|
-
[role=link].contrast {
|
|
981
|
+
:where(a:not([role="button"])).contrast,
|
|
982
|
+
[role="link"].contrast {
|
|
951
983
|
--pico-color: var(--pico-contrast);
|
|
952
984
|
--pico-underline: var(--pico-contrast-underline);
|
|
953
985
|
}
|
|
954
|
-
:where(a:not([role=button])).contrast:is(
|
|
955
|
-
[
|
|
986
|
+
:where(a:not([role="button"])).contrast:is(
|
|
987
|
+
[aria-current]:not([aria-current="false"]),
|
|
988
|
+
:hover,
|
|
989
|
+
:active,
|
|
990
|
+
:focus
|
|
991
|
+
),
|
|
992
|
+
[role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
956
993
|
--pico-color: var(--pico-contrast-hover);
|
|
957
994
|
--pico-underline: var(--pico-contrast-hover-underline);
|
|
958
995
|
}
|
|
959
|
-
|
|
960
|
-
a[role=button] {
|
|
996
|
+
a[role="button"] {
|
|
961
997
|
display: inline-block;
|
|
962
998
|
}
|
|
963
|
-
|
|
964
999
|
/**
|
|
965
1000
|
* Button
|
|
966
1001
|
*/
|
|
@@ -970,20 +1005,18 @@ button {
|
|
|
970
1005
|
font-family: inherit;
|
|
971
1006
|
text-transform: none;
|
|
972
1007
|
}
|
|
973
|
-
|
|
974
1008
|
button,
|
|
975
|
-
[type=submit],
|
|
976
|
-
[type=reset],
|
|
977
|
-
[type=button] {
|
|
1009
|
+
[type="submit"],
|
|
1010
|
+
[type="reset"],
|
|
1011
|
+
[type="button"] {
|
|
978
1012
|
-webkit-appearance: button;
|
|
979
1013
|
}
|
|
980
|
-
|
|
981
1014
|
button,
|
|
982
|
-
[type=submit],
|
|
983
|
-
[type=reset],
|
|
984
|
-
[type=button],
|
|
985
|
-
[type=file]::file-selector-button,
|
|
986
|
-
[role=button] {
|
|
1015
|
+
[type="submit"],
|
|
1016
|
+
[type="reset"],
|
|
1017
|
+
[type="button"],
|
|
1018
|
+
[type="file"]::file-selector-button,
|
|
1019
|
+
[role="button"] {
|
|
987
1020
|
--pico-background-color: var(--pico-primary-background);
|
|
988
1021
|
--pico-border-color: var(--pico-primary-border);
|
|
989
1022
|
--pico-color: var(--pico-primary-inverse);
|
|
@@ -1004,120 +1037,161 @@ button,
|
|
|
1004
1037
|
-webkit-user-select: none;
|
|
1005
1038
|
-moz-user-select: none;
|
|
1006
1039
|
user-select: none;
|
|
1007
|
-
transition:
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
[
|
|
1014
|
-
|
|
1015
|
-
[type=
|
|
1016
|
-
[type=
|
|
1017
|
-
[type=
|
|
1018
|
-
[
|
|
1019
|
-
[
|
|
1040
|
+
transition:
|
|
1041
|
+
background-color var(--pico-transition),
|
|
1042
|
+
border-color var(--pico-transition),
|
|
1043
|
+
color var(--pico-transition),
|
|
1044
|
+
box-shadow var(--pico-transition);
|
|
1045
|
+
}
|
|
1046
|
+
button:is([aria-current]:not([aria-current="false"])),
|
|
1047
|
+
button:is(:hover, :active, :focus),
|
|
1048
|
+
[type="submit"]:is([aria-current]:not([aria-current="false"])),
|
|
1049
|
+
[type="submit"]:is(:hover, :active, :focus),
|
|
1050
|
+
[type="reset"]:is([aria-current]:not([aria-current="false"])),
|
|
1051
|
+
[type="reset"]:is(:hover, :active, :focus),
|
|
1052
|
+
[type="button"]:is([aria-current]:not([aria-current="false"])),
|
|
1053
|
+
[type="button"]:is(:hover, :active, :focus),
|
|
1054
|
+
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])),
|
|
1055
|
+
[type="file"]::file-selector-button:is(:hover, :active, :focus),
|
|
1056
|
+
[role="button"]:is([aria-current]:not([aria-current="false"])),
|
|
1057
|
+
[role="button"]:is(:hover, :active, :focus) {
|
|
1020
1058
|
--pico-background-color: var(--pico-primary-hover-background);
|
|
1021
1059
|
--pico-border-color: var(--pico-primary-hover-border);
|
|
1022
1060
|
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
|
1023
1061
|
--pico-color: var(--pico-primary-inverse);
|
|
1024
1062
|
}
|
|
1025
|
-
button:focus,
|
|
1026
|
-
[
|
|
1027
|
-
[type=submit]:
|
|
1028
|
-
[type=
|
|
1029
|
-
[type=reset]:
|
|
1030
|
-
[type=
|
|
1031
|
-
[type=button]:
|
|
1032
|
-
[type=
|
|
1033
|
-
[type=file]::file-selector-button:
|
|
1034
|
-
[
|
|
1035
|
-
[role=button]:
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
[type=
|
|
1063
|
+
button:focus,
|
|
1064
|
+
button:is([aria-current]:not([aria-current="false"])):focus,
|
|
1065
|
+
[type="submit"]:focus,
|
|
1066
|
+
[type="submit"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
1067
|
+
[type="reset"]:focus,
|
|
1068
|
+
[type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
1069
|
+
[type="button"]:focus,
|
|
1070
|
+
[type="button"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
1071
|
+
[type="file"]::file-selector-button:focus,
|
|
1072
|
+
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus,
|
|
1073
|
+
[role="button"]:focus,
|
|
1074
|
+
[role="button"]:is([aria-current]:not([aria-current="false"])):focus {
|
|
1075
|
+
--pico-box-shadow:
|
|
1076
|
+
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
1077
|
+
0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
1078
|
+
}
|
|
1079
|
+
[type="submit"],
|
|
1080
|
+
[type="reset"],
|
|
1081
|
+
[type="button"] {
|
|
1042
1082
|
margin-bottom: var(--pico-spacing);
|
|
1043
1083
|
}
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
[type=
|
|
1047
|
-
[type=file]::file-selector-button {
|
|
1084
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
|
1085
|
+
[type="reset"],
|
|
1086
|
+
[type="file"]::file-selector-button {
|
|
1048
1087
|
--pico-background-color: var(--pico-secondary-background);
|
|
1049
1088
|
--pico-border-color: var(--pico-secondary-border);
|
|
1050
1089
|
--pico-color: var(--pico-secondary-inverse);
|
|
1051
1090
|
cursor: pointer;
|
|
1052
1091
|
}
|
|
1053
|
-
:is(button, [type=submit], [type=button], [role=button]).secondary:is(
|
|
1054
|
-
[
|
|
1055
|
-
|
|
1092
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
|
|
1093
|
+
[aria-current]:not([aria-current="false"]),
|
|
1094
|
+
:hover,
|
|
1095
|
+
:active,
|
|
1096
|
+
:focus
|
|
1097
|
+
),
|
|
1098
|
+
[type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
|
|
1099
|
+
[type="file"]::file-selector-button:is(
|
|
1100
|
+
[aria-current]:not([aria-current="false"]),
|
|
1101
|
+
:hover,
|
|
1102
|
+
:active,
|
|
1103
|
+
:focus
|
|
1104
|
+
) {
|
|
1056
1105
|
--pico-background-color: var(--pico-secondary-hover-background);
|
|
1057
1106
|
--pico-border-color: var(--pico-secondary-hover-border);
|
|
1058
1107
|
--pico-color: var(--pico-secondary-inverse);
|
|
1059
1108
|
}
|
|
1060
|
-
:is(button, [type=submit], [type=button], [role=button]).secondary:focus,
|
|
1061
|
-
[type=
|
|
1062
|
-
[
|
|
1063
|
-
|
|
1064
|
-
[type=
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
:
|
|
1109
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
|
|
1110
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
|
|
1111
|
+
[aria-current]:not([aria-current="false"])
|
|
1112
|
+
):focus,
|
|
1113
|
+
[type="reset"]:focus,
|
|
1114
|
+
[type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
1115
|
+
[type="file"]::file-selector-button:focus,
|
|
1116
|
+
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus {
|
|
1117
|
+
--pico-box-shadow:
|
|
1118
|
+
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
1119
|
+
0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
|
1120
|
+
}
|
|
1121
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
|
1069
1122
|
--pico-background-color: var(--pico-contrast-background);
|
|
1070
1123
|
--pico-border-color: var(--pico-contrast-border);
|
|
1071
1124
|
--pico-color: var(--pico-contrast-inverse);
|
|
1072
1125
|
}
|
|
1073
|
-
:is(button, [type=submit], [type=button], [role=button]).contrast:is(
|
|
1126
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
|
|
1127
|
+
[aria-current]:not([aria-current="false"]),
|
|
1128
|
+
:hover,
|
|
1129
|
+
:active,
|
|
1130
|
+
:focus
|
|
1131
|
+
) {
|
|
1074
1132
|
--pico-background-color: var(--pico-contrast-hover-background);
|
|
1075
1133
|
--pico-border-color: var(--pico-contrast-hover-border);
|
|
1076
1134
|
--pico-color: var(--pico-contrast-inverse);
|
|
1077
1135
|
}
|
|
1078
|
-
:is(button, [type=submit], [type=button], [role=button]).contrast:focus,
|
|
1079
|
-
|
|
1136
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
|
|
1137
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
|
|
1138
|
+
[aria-current]:not([aria-current="false"])
|
|
1139
|
+
):focus {
|
|
1140
|
+
--pico-box-shadow:
|
|
1141
|
+
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
1142
|
+
0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
|
|
1080
1143
|
}
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
[type=reset].outline {
|
|
1144
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
|
1145
|
+
[type="reset"].outline {
|
|
1084
1146
|
--pico-background-color: transparent;
|
|
1085
1147
|
--pico-color: var(--pico-primary);
|
|
1086
1148
|
--pico-border-color: var(--pico-primary);
|
|
1087
1149
|
}
|
|
1088
|
-
:is(button, [type=submit], [type=button], [role=button]).outline:is(
|
|
1089
|
-
[
|
|
1150
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
|
|
1151
|
+
[aria-current]:not([aria-current="false"]),
|
|
1152
|
+
:hover,
|
|
1153
|
+
:active,
|
|
1154
|
+
:focus
|
|
1155
|
+
),
|
|
1156
|
+
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
1090
1157
|
--pico-background-color: transparent;
|
|
1091
1158
|
--pico-color: var(--pico-primary-hover);
|
|
1092
1159
|
--pico-border-color: var(--pico-primary-hover);
|
|
1093
1160
|
}
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
[type=reset].outline {
|
|
1161
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
|
1162
|
+
[type="reset"].outline {
|
|
1097
1163
|
--pico-color: var(--pico-secondary);
|
|
1098
1164
|
--pico-border-color: var(--pico-secondary);
|
|
1099
1165
|
}
|
|
1100
|
-
:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is(
|
|
1101
|
-
[
|
|
1166
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(
|
|
1167
|
+
[aria-current]:not([aria-current="false"]),
|
|
1168
|
+
:hover,
|
|
1169
|
+
:active,
|
|
1170
|
+
:focus
|
|
1171
|
+
),
|
|
1172
|
+
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
1102
1173
|
--pico-color: var(--pico-secondary-hover);
|
|
1103
1174
|
--pico-border-color: var(--pico-secondary-hover);
|
|
1104
1175
|
}
|
|
1105
|
-
|
|
1106
|
-
:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
|
|
1176
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
|
1107
1177
|
--pico-color: var(--pico-contrast);
|
|
1108
1178
|
--pico-border-color: var(--pico-contrast);
|
|
1109
1179
|
}
|
|
1110
|
-
:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is(
|
|
1180
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is(
|
|
1181
|
+
[aria-current]:not([aria-current="false"]),
|
|
1182
|
+
:hover,
|
|
1183
|
+
:active,
|
|
1184
|
+
:focus
|
|
1185
|
+
) {
|
|
1111
1186
|
--pico-color: var(--pico-contrast-hover);
|
|
1112
1187
|
--pico-border-color: var(--pico-contrast-hover);
|
|
1113
1188
|
}
|
|
1114
|
-
|
|
1115
|
-
:where(
|
|
1116
|
-
:
|
|
1189
|
+
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
|
1190
|
+
:where(fieldset[disabled])
|
|
1191
|
+
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
|
1117
1192
|
opacity: 0.5;
|
|
1118
1193
|
pointer-events: none;
|
|
1119
1194
|
}
|
|
1120
|
-
|
|
1121
1195
|
/**
|
|
1122
1196
|
* Table
|
|
1123
1197
|
*/
|
|
@@ -1127,7 +1201,6 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
|
|
|
1127
1201
|
border-spacing: 0;
|
|
1128
1202
|
text-indent: 0;
|
|
1129
1203
|
}
|
|
1130
|
-
|
|
1131
1204
|
th,
|
|
1132
1205
|
td {
|
|
1133
1206
|
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
|
|
@@ -1138,54 +1211,44 @@ td {
|
|
|
1138
1211
|
text-align: left;
|
|
1139
1212
|
text-align: start;
|
|
1140
1213
|
}
|
|
1141
|
-
|
|
1142
1214
|
tfoot th,
|
|
1143
1215
|
tfoot td {
|
|
1144
1216
|
border-top: var(--pico-border-width) solid var(--pico-table-border-color);
|
|
1145
1217
|
border-bottom: 0;
|
|
1146
1218
|
}
|
|
1147
|
-
|
|
1148
1219
|
table.striped tbody tr:nth-child(odd) th,
|
|
1149
1220
|
table.striped tbody tr:nth-child(odd) td {
|
|
1150
1221
|
background-color: var(--pico-table-row-stripped-background-color);
|
|
1151
1222
|
}
|
|
1152
|
-
|
|
1153
1223
|
/**
|
|
1154
1224
|
* Embedded content
|
|
1155
1225
|
*/
|
|
1156
1226
|
:where(audio, canvas, iframe, img, svg, video) {
|
|
1157
1227
|
vertical-align: middle;
|
|
1158
1228
|
}
|
|
1159
|
-
|
|
1160
1229
|
audio,
|
|
1161
1230
|
video {
|
|
1162
1231
|
display: inline-block;
|
|
1163
1232
|
}
|
|
1164
|
-
|
|
1165
1233
|
audio:not([controls]) {
|
|
1166
1234
|
display: none;
|
|
1167
1235
|
height: 0;
|
|
1168
1236
|
}
|
|
1169
|
-
|
|
1170
1237
|
:where(iframe) {
|
|
1171
1238
|
border-style: none;
|
|
1172
1239
|
}
|
|
1173
|
-
|
|
1174
1240
|
img {
|
|
1175
1241
|
max-width: 100%;
|
|
1176
1242
|
height: auto;
|
|
1177
1243
|
border-style: none;
|
|
1178
1244
|
}
|
|
1179
|
-
|
|
1180
1245
|
:where(svg:not([fill])) {
|
|
1181
1246
|
fill: currentColor;
|
|
1182
1247
|
}
|
|
1183
|
-
|
|
1184
1248
|
svg:not(:root),
|
|
1185
1249
|
svg:not(:host) {
|
|
1186
1250
|
overflow: hidden;
|
|
1187
1251
|
}
|
|
1188
|
-
|
|
1189
1252
|
/**
|
|
1190
1253
|
* Code
|
|
1191
1254
|
*/
|
|
@@ -1196,18 +1259,15 @@ samp {
|
|
|
1196
1259
|
font-size: 0.875em;
|
|
1197
1260
|
font-family: var(--pico-font-family);
|
|
1198
1261
|
}
|
|
1199
|
-
|
|
1200
1262
|
pre code,
|
|
1201
1263
|
pre samp {
|
|
1202
1264
|
font-size: inherit;
|
|
1203
1265
|
font-family: inherit;
|
|
1204
1266
|
}
|
|
1205
|
-
|
|
1206
1267
|
pre {
|
|
1207
1268
|
-ms-overflow-style: scrollbar;
|
|
1208
1269
|
overflow: auto;
|
|
1209
1270
|
}
|
|
1210
|
-
|
|
1211
1271
|
pre,
|
|
1212
1272
|
code,
|
|
1213
1273
|
kbd,
|
|
@@ -1218,14 +1278,12 @@ samp {
|
|
|
1218
1278
|
font-weight: var(--pico-font-weight);
|
|
1219
1279
|
line-height: initial;
|
|
1220
1280
|
}
|
|
1221
|
-
|
|
1222
1281
|
code,
|
|
1223
1282
|
kbd,
|
|
1224
1283
|
samp {
|
|
1225
1284
|
display: inline-block;
|
|
1226
1285
|
padding: 0.375rem;
|
|
1227
1286
|
}
|
|
1228
|
-
|
|
1229
1287
|
pre {
|
|
1230
1288
|
display: block;
|
|
1231
1289
|
margin-bottom: var(--pico-spacing);
|
|
@@ -1238,13 +1296,11 @@ pre > samp {
|
|
|
1238
1296
|
background: none;
|
|
1239
1297
|
line-height: var(--pico-line-height);
|
|
1240
1298
|
}
|
|
1241
|
-
|
|
1242
1299
|
kbd {
|
|
1243
1300
|
background-color: var(--pico-code-kbd-background-color);
|
|
1244
1301
|
color: var(--pico-code-kbd-color);
|
|
1245
1302
|
vertical-align: baseline;
|
|
1246
1303
|
}
|
|
1247
|
-
|
|
1248
1304
|
/**
|
|
1249
1305
|
* Figure
|
|
1250
1306
|
*/
|
|
@@ -1257,7 +1313,6 @@ figure figcaption {
|
|
|
1257
1313
|
padding: calc(var(--pico-spacing) * 0.5) 0;
|
|
1258
1314
|
color: var(--pico-muted-color);
|
|
1259
1315
|
}
|
|
1260
|
-
|
|
1261
1316
|
/**
|
|
1262
1317
|
* Misc
|
|
1263
1318
|
*/
|
|
@@ -1268,16 +1323,13 @@ hr {
|
|
|
1268
1323
|
border-top: 1px solid var(--pico-muted-border-color);
|
|
1269
1324
|
color: inherit;
|
|
1270
1325
|
}
|
|
1271
|
-
|
|
1272
1326
|
[hidden],
|
|
1273
1327
|
template {
|
|
1274
1328
|
display: none !important;
|
|
1275
1329
|
}
|
|
1276
|
-
|
|
1277
1330
|
canvas {
|
|
1278
1331
|
display: inline-block;
|
|
1279
1332
|
}
|
|
1280
|
-
|
|
1281
1333
|
/**
|
|
1282
1334
|
* Basics form elements
|
|
1283
1335
|
*/
|
|
@@ -1291,77 +1343,64 @@ textarea {
|
|
|
1291
1343
|
font-family: inherit;
|
|
1292
1344
|
letter-spacing: inherit;
|
|
1293
1345
|
}
|
|
1294
|
-
|
|
1295
1346
|
input {
|
|
1296
1347
|
overflow: visible;
|
|
1297
1348
|
}
|
|
1298
|
-
|
|
1299
1349
|
select {
|
|
1300
1350
|
text-transform: none;
|
|
1301
1351
|
}
|
|
1302
|
-
|
|
1303
1352
|
legend {
|
|
1304
1353
|
max-width: 100%;
|
|
1305
1354
|
padding: 0;
|
|
1306
1355
|
color: inherit;
|
|
1307
1356
|
white-space: normal;
|
|
1308
1357
|
}
|
|
1309
|
-
|
|
1310
1358
|
textarea {
|
|
1311
1359
|
overflow: auto;
|
|
1312
1360
|
}
|
|
1313
|
-
|
|
1314
|
-
[type=
|
|
1315
|
-
[type=radio] {
|
|
1361
|
+
[type="checkbox"],
|
|
1362
|
+
[type="radio"] {
|
|
1316
1363
|
padding: 0;
|
|
1317
1364
|
}
|
|
1318
|
-
|
|
1319
1365
|
::-webkit-inner-spin-button,
|
|
1320
1366
|
::-webkit-outer-spin-button {
|
|
1321
1367
|
height: auto;
|
|
1322
1368
|
}
|
|
1323
|
-
|
|
1324
|
-
[type=search] {
|
|
1369
|
+
[type="search"] {
|
|
1325
1370
|
-webkit-appearance: textfield;
|
|
1326
1371
|
outline-offset: -2px;
|
|
1327
1372
|
}
|
|
1328
|
-
|
|
1329
|
-
[type=search]::-webkit-search-decoration {
|
|
1373
|
+
[type="search"]::-webkit-search-decoration {
|
|
1330
1374
|
-webkit-appearance: none;
|
|
1331
1375
|
}
|
|
1332
|
-
|
|
1333
1376
|
::-webkit-file-upload-button {
|
|
1334
1377
|
-webkit-appearance: button;
|
|
1335
1378
|
font: inherit;
|
|
1336
1379
|
}
|
|
1337
|
-
|
|
1338
1380
|
::-moz-focus-inner {
|
|
1339
1381
|
padding: 0;
|
|
1340
1382
|
border-style: none;
|
|
1341
1383
|
}
|
|
1342
|
-
|
|
1343
1384
|
:-moz-focusring {
|
|
1344
1385
|
outline: none;
|
|
1345
1386
|
}
|
|
1346
|
-
|
|
1347
1387
|
:-moz-ui-invalid {
|
|
1348
1388
|
box-shadow: none;
|
|
1349
1389
|
}
|
|
1350
|
-
|
|
1351
1390
|
::-ms-expand {
|
|
1352
1391
|
display: none;
|
|
1353
1392
|
}
|
|
1354
|
-
|
|
1355
|
-
[type=
|
|
1356
|
-
[type=range] {
|
|
1393
|
+
[type="file"],
|
|
1394
|
+
[type="range"] {
|
|
1357
1395
|
padding: 0;
|
|
1358
1396
|
border-width: 0;
|
|
1359
1397
|
}
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1398
|
+
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
1399
|
+
height: calc(
|
|
1400
|
+
1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
1401
|
+
var(--pico-border-width) * 2
|
|
1402
|
+
);
|
|
1363
1403
|
}
|
|
1364
|
-
|
|
1365
1404
|
fieldset {
|
|
1366
1405
|
width: 100%;
|
|
1367
1406
|
margin: 0;
|
|
@@ -1369,7 +1408,6 @@ fieldset {
|
|
|
1369
1408
|
padding: 0;
|
|
1370
1409
|
border: 0;
|
|
1371
1410
|
}
|
|
1372
|
-
|
|
1373
1411
|
label,
|
|
1374
1412
|
fieldset legend {
|
|
1375
1413
|
display: block;
|
|
@@ -1377,19 +1415,16 @@ fieldset legend {
|
|
|
1377
1415
|
color: var(--pico-color);
|
|
1378
1416
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
|
1379
1417
|
}
|
|
1380
|
-
|
|
1381
1418
|
fieldset legend {
|
|
1382
1419
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
|
1383
1420
|
}
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
button[type=submit],
|
|
1421
|
+
input:not([type="checkbox"], [type="radio"]),
|
|
1422
|
+
button[type="submit"],
|
|
1387
1423
|
select,
|
|
1388
1424
|
textarea {
|
|
1389
1425
|
width: 100%;
|
|
1390
1426
|
}
|
|
1391
|
-
|
|
1392
|
-
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
|
1427
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|
1393
1428
|
select,
|
|
1394
1429
|
textarea {
|
|
1395
1430
|
-webkit-appearance: none;
|
|
@@ -1397,7 +1432,6 @@ textarea {
|
|
|
1397
1432
|
appearance: none;
|
|
1398
1433
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
1399
1434
|
}
|
|
1400
|
-
|
|
1401
1435
|
input,
|
|
1402
1436
|
select,
|
|
1403
1437
|
textarea {
|
|
@@ -1412,55 +1446,63 @@ textarea {
|
|
|
1412
1446
|
box-shadow: var(--pico-box-shadow);
|
|
1413
1447
|
color: var(--pico-color);
|
|
1414
1448
|
font-weight: var(--pico-font-weight);
|
|
1415
|
-
transition:
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
[type=
|
|
1423
|
-
[
|
|
1449
|
+
transition:
|
|
1450
|
+
background-color var(--pico-transition),
|
|
1451
|
+
border-color var(--pico-transition),
|
|
1452
|
+
color var(--pico-transition),
|
|
1453
|
+
box-shadow var(--pico-transition);
|
|
1454
|
+
}
|
|
1455
|
+
input:not(
|
|
1456
|
+
[type="submit"],
|
|
1457
|
+
[type="button"],
|
|
1458
|
+
[type="reset"],
|
|
1459
|
+
[type="checkbox"],
|
|
1460
|
+
[type="radio"],
|
|
1461
|
+
[readonly]
|
|
1462
|
+
):is(:active, :focus),
|
|
1424
1463
|
:where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
1425
1464
|
--pico-background-color: var(--pico-form-element-active-background-color);
|
|
1426
1465
|
}
|
|
1427
|
-
|
|
1428
|
-
|
|
1466
|
+
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(
|
|
1467
|
+
:active,
|
|
1468
|
+
:focus
|
|
1469
|
+
),
|
|
1429
1470
|
:where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
1430
1471
|
--pico-border-color: var(--pico-form-element-active-border-color);
|
|
1431
1472
|
}
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
[type=button],
|
|
1435
|
-
[type=reset],
|
|
1436
|
-
[type=range],
|
|
1437
|
-
[type=file],
|
|
1438
|
-
[readonly]
|
|
1473
|
+
input:not(
|
|
1474
|
+
[type="submit"],
|
|
1475
|
+
[type="button"],
|
|
1476
|
+
[type="reset"],
|
|
1477
|
+
[type="range"],
|
|
1478
|
+
[type="file"],
|
|
1479
|
+
[readonly]
|
|
1480
|
+
):focus,
|
|
1439
1481
|
:where(select, textarea):not([readonly]):focus {
|
|
1440
1482
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
|
1441
1483
|
}
|
|
1442
|
-
|
|
1443
|
-
input:not([type=submit], [type=button], [type=reset])[disabled],
|
|
1484
|
+
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
|
1444
1485
|
select[disabled],
|
|
1445
1486
|
textarea[disabled],
|
|
1446
|
-
label[aria-disabled=true],
|
|
1447
|
-
:where(fieldset[disabled])
|
|
1487
|
+
label[aria-disabled="true"],
|
|
1488
|
+
:where(fieldset[disabled])
|
|
1489
|
+
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
|
1448
1490
|
opacity: var(--pico-form-element-disabled-opacity);
|
|
1449
1491
|
pointer-events: none;
|
|
1450
1492
|
}
|
|
1451
|
-
|
|
1452
|
-
label[aria-disabled=true] input[disabled] {
|
|
1493
|
+
label[aria-disabled="true"] input[disabled] {
|
|
1453
1494
|
opacity: 1;
|
|
1454
1495
|
}
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
[type=radio],
|
|
1458
|
-
[type=date],
|
|
1459
|
-
[type=datetime-local],
|
|
1460
|
-
[type=month],
|
|
1461
|
-
[type=time],
|
|
1462
|
-
[type=week],
|
|
1463
|
-
[type=range]
|
|
1496
|
+
:where(input, select, textarea):not(
|
|
1497
|
+
[type="checkbox"],
|
|
1498
|
+
[type="radio"],
|
|
1499
|
+
[type="date"],
|
|
1500
|
+
[type="datetime-local"],
|
|
1501
|
+
[type="month"],
|
|
1502
|
+
[type="time"],
|
|
1503
|
+
[type="week"],
|
|
1504
|
+
[type="range"]
|
|
1505
|
+
)[aria-invalid] {
|
|
1464
1506
|
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
|
|
1465
1507
|
padding-left: var(--pico-form-element-spacing-horizontal);
|
|
1466
1508
|
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
|
|
@@ -1469,49 +1511,62 @@ label[aria-disabled=true] input[disabled] {
|
|
|
1469
1511
|
background-size: 1rem auto;
|
|
1470
1512
|
background-repeat: no-repeat;
|
|
1471
1513
|
}
|
|
1472
|
-
:where(input, select, textarea):not(
|
|
1473
|
-
[type=
|
|
1474
|
-
[type=
|
|
1475
|
-
[type=
|
|
1476
|
-
[type=
|
|
1477
|
-
[type=
|
|
1478
|
-
[type=
|
|
1479
|
-
[type=
|
|
1514
|
+
:where(input, select, textarea):not(
|
|
1515
|
+
[type="checkbox"],
|
|
1516
|
+
[type="radio"],
|
|
1517
|
+
[type="date"],
|
|
1518
|
+
[type="datetime-local"],
|
|
1519
|
+
[type="month"],
|
|
1520
|
+
[type="time"],
|
|
1521
|
+
[type="week"],
|
|
1522
|
+
[type="range"]
|
|
1523
|
+
)[aria-invalid="false"]:not(select) {
|
|
1480
1524
|
background-image: var(--pico-icon-valid);
|
|
1481
1525
|
}
|
|
1482
|
-
:where(input, select, textarea):not(
|
|
1483
|
-
[type=
|
|
1484
|
-
[type=
|
|
1485
|
-
[type=
|
|
1486
|
-
[type=
|
|
1487
|
-
[type=
|
|
1488
|
-
[type=
|
|
1489
|
-
[type=
|
|
1526
|
+
:where(input, select, textarea):not(
|
|
1527
|
+
[type="checkbox"],
|
|
1528
|
+
[type="radio"],
|
|
1529
|
+
[type="date"],
|
|
1530
|
+
[type="datetime-local"],
|
|
1531
|
+
[type="month"],
|
|
1532
|
+
[type="time"],
|
|
1533
|
+
[type="week"],
|
|
1534
|
+
[type="range"]
|
|
1535
|
+
)[aria-invalid="true"]:not(select) {
|
|
1490
1536
|
background-image: var(--pico-icon-invalid);
|
|
1491
1537
|
}
|
|
1492
|
-
:where(input, select, textarea)[aria-invalid=false] {
|
|
1538
|
+
:where(input, select, textarea)[aria-invalid="false"] {
|
|
1493
1539
|
--pico-border-color: var(--pico-form-element-valid-border-color);
|
|
1494
1540
|
}
|
|
1495
|
-
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
|
1541
|
+
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
|
|
1496
1542
|
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
|
|
1497
1543
|
}
|
|
1498
|
-
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not(
|
|
1544
|
+
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(
|
|
1545
|
+
[type="checkbox"],
|
|
1546
|
+
[type="radio"]
|
|
1547
|
+
) {
|
|
1499
1548
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
|
|
1500
1549
|
}
|
|
1501
|
-
:where(input, select, textarea)[aria-invalid=true] {
|
|
1550
|
+
:where(input, select, textarea)[aria-invalid="true"] {
|
|
1502
1551
|
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
|
1503
1552
|
}
|
|
1504
|
-
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
|
1553
|
+
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
|
|
1505
1554
|
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
|
|
1506
1555
|
}
|
|
1507
|
-
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not(
|
|
1556
|
+
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(
|
|
1557
|
+
[type="checkbox"],
|
|
1558
|
+
[type="radio"]
|
|
1559
|
+
) {
|
|
1508
1560
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
|
|
1509
1561
|
}
|
|
1510
|
-
|
|
1511
|
-
|
|
1562
|
+
[dir="rtl"]
|
|
1563
|
+
:where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
|
|
1564
|
+
[aria-invalid],
|
|
1565
|
+
[aria-invalid="true"],
|
|
1566
|
+
[aria-invalid="false"]
|
|
1567
|
+
) {
|
|
1512
1568
|
background-position: center left 0.75rem;
|
|
1513
1569
|
}
|
|
1514
|
-
|
|
1515
1570
|
input::placeholder,
|
|
1516
1571
|
input::-webkit-input-placeholder,
|
|
1517
1572
|
textarea::placeholder,
|
|
@@ -1520,13 +1575,11 @@ select:invalid {
|
|
|
1520
1575
|
color: var(--pico-form-element-placeholder-color);
|
|
1521
1576
|
opacity: 1;
|
|
1522
1577
|
}
|
|
1523
|
-
|
|
1524
|
-
input:not([type=checkbox], [type=radio]),
|
|
1578
|
+
input:not([type="checkbox"], [type="radio"]),
|
|
1525
1579
|
select,
|
|
1526
1580
|
textarea {
|
|
1527
1581
|
margin-bottom: var(--pico-spacing);
|
|
1528
1582
|
}
|
|
1529
|
-
|
|
1530
1583
|
select::-ms-expand {
|
|
1531
1584
|
border: 0;
|
|
1532
1585
|
background-color: transparent;
|
|
@@ -1545,21 +1598,21 @@ select[multiple] option:checked {
|
|
|
1545
1598
|
background: var(--pico-form-element-selected-background-color);
|
|
1546
1599
|
color: var(--pico-form-element-color);
|
|
1547
1600
|
}
|
|
1548
|
-
|
|
1549
|
-
[dir=rtl] select:not([multiple], [size]) {
|
|
1601
|
+
[dir="rtl"] select:not([multiple], [size]) {
|
|
1550
1602
|
background-position: center left 0.75rem;
|
|
1551
1603
|
}
|
|
1552
|
-
|
|
1553
1604
|
textarea {
|
|
1554
1605
|
display: block;
|
|
1555
1606
|
resize: vertical;
|
|
1556
1607
|
}
|
|
1557
1608
|
textarea[aria-invalid] {
|
|
1558
|
-
--pico-icon-height: calc(
|
|
1609
|
+
--pico-icon-height: calc(
|
|
1610
|
+
1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
1611
|
+
var(--pico-border-width) * 2
|
|
1612
|
+
);
|
|
1559
1613
|
background-position: top right 0.75rem !important;
|
|
1560
1614
|
background-size: 1rem var(--pico-icon-height) !important;
|
|
1561
1615
|
}
|
|
1562
|
-
|
|
1563
1616
|
:where(input, select, textarea, fieldset, .grid) + small {
|
|
1564
1617
|
display: block;
|
|
1565
1618
|
width: 100%;
|
|
@@ -1567,28 +1620,25 @@ textarea[aria-invalid] {
|
|
|
1567
1620
|
margin-bottom: var(--pico-spacing);
|
|
1568
1621
|
color: var(--pico-muted-color);
|
|
1569
1622
|
}
|
|
1570
|
-
:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
|
|
1623
|
+
:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
|
|
1571
1624
|
color: var(--pico-ins-color);
|
|
1572
1625
|
}
|
|
1573
|
-
:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small {
|
|
1626
|
+
:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
|
|
1574
1627
|
color: var(--pico-del-color);
|
|
1575
1628
|
}
|
|
1576
|
-
|
|
1577
1629
|
label > :where(input, select, textarea) {
|
|
1578
1630
|
margin-top: calc(var(--pico-spacing) * 0.25);
|
|
1579
1631
|
}
|
|
1580
|
-
|
|
1581
1632
|
/**
|
|
1582
1633
|
* Checkboxes, Radios and Switches
|
|
1583
1634
|
*/
|
|
1584
|
-
label:has([type=checkbox], [type=radio]) {
|
|
1635
|
+
label:has([type="checkbox"], [type="radio"]) {
|
|
1585
1636
|
width: -moz-fit-content;
|
|
1586
1637
|
width: fit-content;
|
|
1587
1638
|
cursor: pointer;
|
|
1588
1639
|
}
|
|
1589
|
-
|
|
1590
|
-
[type=
|
|
1591
|
-
[type=radio] {
|
|
1640
|
+
[type="checkbox"],
|
|
1641
|
+
[type="radio"] {
|
|
1592
1642
|
-webkit-appearance: none;
|
|
1593
1643
|
-moz-appearance: none;
|
|
1594
1644
|
appearance: none;
|
|
@@ -1600,14 +1650,16 @@ label:has([type=checkbox], [type=radio]) {
|
|
|
1600
1650
|
vertical-align: middle;
|
|
1601
1651
|
cursor: pointer;
|
|
1602
1652
|
}
|
|
1603
|
-
[type=checkbox]::-ms-check,
|
|
1604
|
-
[type=radio]::-ms-check {
|
|
1653
|
+
[type="checkbox"]::-ms-check,
|
|
1654
|
+
[type="radio"]::-ms-check {
|
|
1605
1655
|
display: none;
|
|
1606
1656
|
}
|
|
1607
|
-
[type=checkbox]:checked,
|
|
1608
|
-
[type=
|
|
1609
|
-
[type=
|
|
1610
|
-
[type=radio]:checked
|
|
1657
|
+
[type="checkbox"]:checked,
|
|
1658
|
+
[type="checkbox"]:checked:active,
|
|
1659
|
+
[type="checkbox"]:checked:focus,
|
|
1660
|
+
[type="radio"]:checked,
|
|
1661
|
+
[type="radio"]:checked:active,
|
|
1662
|
+
[type="radio"]:checked:focus {
|
|
1611
1663
|
--pico-background-color: var(--pico-primary-background);
|
|
1612
1664
|
--pico-border-color: var(--pico-primary-border);
|
|
1613
1665
|
background-image: var(--pico-icon-checkbox);
|
|
@@ -1615,18 +1667,17 @@ label:has([type=checkbox], [type=radio]) {
|
|
|
1615
1667
|
background-size: 0.75em auto;
|
|
1616
1668
|
background-repeat: no-repeat;
|
|
1617
1669
|
}
|
|
1618
|
-
[type=checkbox] ~ label,
|
|
1619
|
-
[type=radio] ~ label {
|
|
1670
|
+
[type="checkbox"] ~ label,
|
|
1671
|
+
[type="radio"] ~ label {
|
|
1620
1672
|
display: inline-block;
|
|
1621
1673
|
margin-bottom: 0;
|
|
1622
1674
|
cursor: pointer;
|
|
1623
1675
|
}
|
|
1624
|
-
[type=checkbox] ~ label:not(:last-of-type),
|
|
1625
|
-
[type=radio] ~ label:not(:last-of-type) {
|
|
1676
|
+
[type="checkbox"] ~ label:not(:last-of-type),
|
|
1677
|
+
[type="radio"] ~ label:not(:last-of-type) {
|
|
1626
1678
|
margin-inline-end: 1em;
|
|
1627
1679
|
}
|
|
1628
|
-
|
|
1629
|
-
[type=checkbox]:indeterminate {
|
|
1680
|
+
[type="checkbox"]:indeterminate {
|
|
1630
1681
|
--pico-background-color: var(--pico-primary-background);
|
|
1631
1682
|
--pico-border-color: var(--pico-primary-border);
|
|
1632
1683
|
background-image: var(--pico-icon-minus);
|
|
@@ -1634,17 +1685,17 @@ label:has([type=checkbox], [type=radio]) {
|
|
|
1634
1685
|
background-size: 0.75em auto;
|
|
1635
1686
|
background-repeat: no-repeat;
|
|
1636
1687
|
}
|
|
1637
|
-
|
|
1638
|
-
[type=radio] {
|
|
1688
|
+
[type="radio"] {
|
|
1639
1689
|
border-radius: 50%;
|
|
1640
1690
|
}
|
|
1641
|
-
[type=radio]:checked,
|
|
1691
|
+
[type="radio"]:checked,
|
|
1692
|
+
[type="radio"]:checked:active,
|
|
1693
|
+
[type="radio"]:checked:focus {
|
|
1642
1694
|
--pico-background-color: var(--pico-primary-inverse);
|
|
1643
1695
|
border-width: 0.35em;
|
|
1644
1696
|
background-image: none;
|
|
1645
1697
|
}
|
|
1646
|
-
|
|
1647
|
-
[type=checkbox][role=switch] {
|
|
1698
|
+
[type="checkbox"][role="switch"] {
|
|
1648
1699
|
--pico-background-color: var(--pico-switch-background-color);
|
|
1649
1700
|
--pico-color: var(--pico-switch-color);
|
|
1650
1701
|
width: 2.25em;
|
|
@@ -1654,10 +1705,10 @@ label:has([type=checkbox], [type=radio]) {
|
|
|
1654
1705
|
background-color: var(--pico-background-color);
|
|
1655
1706
|
line-height: 1.25em;
|
|
1656
1707
|
}
|
|
1657
|
-
[type=checkbox][role=switch]:not([aria-invalid]) {
|
|
1708
|
+
[type="checkbox"][role="switch"]:not([aria-invalid]) {
|
|
1658
1709
|
--pico-border-color: var(--pico-switch-background-color);
|
|
1659
1710
|
}
|
|
1660
|
-
[type=checkbox][role=switch]:before {
|
|
1711
|
+
[type="checkbox"][role="switch"]:before {
|
|
1661
1712
|
display: block;
|
|
1662
1713
|
aspect-ratio: 1;
|
|
1663
1714
|
height: 100%;
|
|
@@ -1667,76 +1718,86 @@ label:has([type=checkbox], [type=radio]) {
|
|
|
1667
1718
|
content: "";
|
|
1668
1719
|
transition: margin 0.1s ease-in-out;
|
|
1669
1720
|
}
|
|
1670
|
-
[type=checkbox][role=switch]:focus {
|
|
1721
|
+
[type="checkbox"][role="switch"]:focus {
|
|
1671
1722
|
--pico-background-color: var(--pico-switch-background-color);
|
|
1672
1723
|
--pico-border-color: var(--pico-switch-background-color);
|
|
1673
1724
|
}
|
|
1674
|
-
[type=checkbox][role=switch]:checked {
|
|
1725
|
+
[type="checkbox"][role="switch"]:checked {
|
|
1675
1726
|
--pico-background-color: var(--pico-switch-checked-background-color);
|
|
1676
1727
|
--pico-border-color: var(--pico-switch-checked-background-color);
|
|
1677
1728
|
background-image: none;
|
|
1678
1729
|
}
|
|
1679
|
-
[type=checkbox][role=switch]:checked::before {
|
|
1730
|
+
[type="checkbox"][role="switch"]:checked::before {
|
|
1680
1731
|
margin-inline-start: calc(2.25em - 1.25em);
|
|
1681
1732
|
}
|
|
1682
|
-
[type=checkbox][role=switch][disabled] {
|
|
1733
|
+
[type="checkbox"][role="switch"][disabled] {
|
|
1683
1734
|
--pico-background-color: var(--pico-border-color);
|
|
1684
1735
|
}
|
|
1685
|
-
|
|
1686
|
-
[type=checkbox][aria-invalid=false]:checked
|
|
1687
|
-
[type=checkbox][
|
|
1688
|
-
[type=checkbox][role=switch][aria-invalid=false]:checked
|
|
1689
|
-
[type=checkbox][role=switch][aria-invalid=false]:checked:
|
|
1736
|
+
[type="checkbox"][aria-invalid="false"]:checked,
|
|
1737
|
+
[type="checkbox"][aria-invalid="false"]:checked:active,
|
|
1738
|
+
[type="checkbox"][aria-invalid="false"]:checked:focus,
|
|
1739
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
|
|
1740
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
|
|
1741
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1690
1742
|
--pico-background-color: var(--pico-form-element-valid-border-color);
|
|
1691
1743
|
}
|
|
1692
|
-
[type=checkbox]:checked[aria-invalid=true],
|
|
1693
|
-
[type=checkbox]
|
|
1694
|
-
[type=checkbox]
|
|
1695
|
-
[type=checkbox][role=switch]:checked
|
|
1744
|
+
[type="checkbox"]:checked[aria-invalid="true"],
|
|
1745
|
+
[type="checkbox"]:checked:active[aria-invalid="true"],
|
|
1746
|
+
[type="checkbox"]:checked:focus[aria-invalid="true"],
|
|
1747
|
+
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
|
|
1748
|
+
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
|
|
1749
|
+
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1696
1750
|
--pico-background-color: var(--pico-form-element-invalid-border-color);
|
|
1697
1751
|
}
|
|
1698
|
-
|
|
1699
|
-
[type=checkbox][aria-invalid=false]:checked
|
|
1700
|
-
[type=
|
|
1701
|
-
[type=radio][aria-invalid=false]:checked
|
|
1702
|
-
[type=radio][aria-invalid=false]:checked:
|
|
1703
|
-
[type=
|
|
1704
|
-
[type=checkbox][role=switch][aria-invalid=false]:checked
|
|
1705
|
-
[type=checkbox][role=switch][aria-invalid=false]:checked:
|
|
1752
|
+
[type="checkbox"][aria-invalid="false"]:checked,
|
|
1753
|
+
[type="checkbox"][aria-invalid="false"]:checked:active,
|
|
1754
|
+
[type="checkbox"][aria-invalid="false"]:checked:focus,
|
|
1755
|
+
[type="radio"][aria-invalid="false"]:checked,
|
|
1756
|
+
[type="radio"][aria-invalid="false"]:checked:active,
|
|
1757
|
+
[type="radio"][aria-invalid="false"]:checked:focus,
|
|
1758
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
|
|
1759
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
|
|
1760
|
+
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1706
1761
|
--pico-border-color: var(--pico-form-element-valid-border-color);
|
|
1707
1762
|
}
|
|
1708
|
-
[type=checkbox]:checked[aria-invalid=true],
|
|
1709
|
-
[type=
|
|
1710
|
-
[type=
|
|
1711
|
-
[type=radio]:checked
|
|
1712
|
-
[type=
|
|
1713
|
-
[type=
|
|
1714
|
-
[type=checkbox][role=switch]:checked
|
|
1763
|
+
[type="checkbox"]:checked[aria-invalid="true"],
|
|
1764
|
+
[type="checkbox"]:checked:active[aria-invalid="true"],
|
|
1765
|
+
[type="checkbox"]:checked:focus[aria-invalid="true"],
|
|
1766
|
+
[type="radio"]:checked[aria-invalid="true"],
|
|
1767
|
+
[type="radio"]:checked:active[aria-invalid="true"],
|
|
1768
|
+
[type="radio"]:checked:focus[aria-invalid="true"],
|
|
1769
|
+
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
|
|
1770
|
+
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
|
|
1771
|
+
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1715
1772
|
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
|
1716
1773
|
}
|
|
1717
|
-
|
|
1718
1774
|
/**
|
|
1719
1775
|
* Input type color
|
|
1720
1776
|
*/
|
|
1721
|
-
[type=color]::-webkit-color-swatch-wrapper {
|
|
1777
|
+
[type="color"]::-webkit-color-swatch-wrapper {
|
|
1722
1778
|
padding: 0;
|
|
1723
1779
|
}
|
|
1724
|
-
[type=color]::-moz-focus-inner {
|
|
1780
|
+
[type="color"]::-moz-focus-inner {
|
|
1725
1781
|
padding: 0;
|
|
1726
1782
|
}
|
|
1727
|
-
[type=color]::-webkit-color-swatch {
|
|
1783
|
+
[type="color"]::-webkit-color-swatch {
|
|
1728
1784
|
border: 0;
|
|
1729
1785
|
border-radius: calc(var(--pico-border-radius) * 0.5);
|
|
1730
1786
|
}
|
|
1731
|
-
[type=color]::-moz-color-swatch {
|
|
1787
|
+
[type="color"]::-moz-color-swatch {
|
|
1732
1788
|
border: 0;
|
|
1733
1789
|
border-radius: calc(var(--pico-border-radius) * 0.5);
|
|
1734
1790
|
}
|
|
1735
|
-
|
|
1736
1791
|
/**
|
|
1737
1792
|
* Input type datetime
|
|
1738
1793
|
*/
|
|
1739
|
-
input:not([type=checkbox], [type=radio], [type=range], [type=file]):is(
|
|
1794
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
|
|
1795
|
+
[type="date"],
|
|
1796
|
+
[type="datetime-local"],
|
|
1797
|
+
[type="month"],
|
|
1798
|
+
[type="time"],
|
|
1799
|
+
[type="week"]
|
|
1800
|
+
) {
|
|
1740
1801
|
--pico-icon-position: 0.75rem;
|
|
1741
1802
|
--pico-icon-width: 1rem;
|
|
1742
1803
|
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
|
|
@@ -1745,39 +1806,37 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=dat
|
|
|
1745
1806
|
background-size: var(--pico-icon-width) auto;
|
|
1746
1807
|
background-repeat: no-repeat;
|
|
1747
1808
|
}
|
|
1748
|
-
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
1809
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
|
|
1749
1810
|
background-image: var(--pico-icon-time);
|
|
1750
1811
|
}
|
|
1751
|
-
|
|
1752
|
-
[type=
|
|
1753
|
-
[type=
|
|
1754
|
-
[type=
|
|
1755
|
-
[type=
|
|
1756
|
-
[type=week]::-webkit-calendar-picker-indicator {
|
|
1812
|
+
[type="date"]::-webkit-calendar-picker-indicator,
|
|
1813
|
+
[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
|
1814
|
+
[type="month"]::-webkit-calendar-picker-indicator,
|
|
1815
|
+
[type="time"]::-webkit-calendar-picker-indicator,
|
|
1816
|
+
[type="week"]::-webkit-calendar-picker-indicator {
|
|
1757
1817
|
width: var(--pico-icon-width);
|
|
1758
1818
|
margin-right: calc(var(--pico-icon-width) * -1);
|
|
1759
1819
|
margin-left: var(--pico-icon-position);
|
|
1760
1820
|
opacity: 0;
|
|
1761
1821
|
}
|
|
1762
|
-
|
|
1763
1822
|
@-moz-document url-prefix() {
|
|
1764
|
-
[type=date],
|
|
1765
|
-
[type=datetime-local],
|
|
1766
|
-
[type=month],
|
|
1767
|
-
[type=time],
|
|
1768
|
-
[type=week] {
|
|
1823
|
+
[type="date"],
|
|
1824
|
+
[type="datetime-local"],
|
|
1825
|
+
[type="month"],
|
|
1826
|
+
[type="time"],
|
|
1827
|
+
[type="week"] {
|
|
1769
1828
|
padding-right: var(--pico-form-element-spacing-horizontal) !important;
|
|
1770
1829
|
background-image: none !important;
|
|
1771
1830
|
}
|
|
1772
1831
|
}
|
|
1773
|
-
[dir=rtl]
|
|
1832
|
+
[dir="rtl"]
|
|
1833
|
+
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
1774
1834
|
text-align: right;
|
|
1775
1835
|
}
|
|
1776
|
-
|
|
1777
1836
|
/**
|
|
1778
1837
|
* Input type file
|
|
1779
1838
|
*/
|
|
1780
|
-
[type=file] {
|
|
1839
|
+
[type="file"] {
|
|
1781
1840
|
--pico-color: var(--pico-muted-color);
|
|
1782
1841
|
margin-left: calc(var(--pico-outline-width) * -1);
|
|
1783
1842
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
|
|
@@ -1786,22 +1845,24 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
|
1786
1845
|
border-radius: 0;
|
|
1787
1846
|
background: none;
|
|
1788
1847
|
}
|
|
1789
|
-
[type=file]::file-selector-button {
|
|
1848
|
+
[type="file"]::file-selector-button {
|
|
1790
1849
|
margin-right: calc(var(--pico-spacing) / 2);
|
|
1791
|
-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
1850
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
1851
|
+
var(--pico-form-element-spacing-horizontal);
|
|
1792
1852
|
}
|
|
1793
|
-
[type=file]:is(:hover, :active, :focus)::file-selector-button {
|
|
1853
|
+
[type="file"]:is(:hover, :active, :focus)::file-selector-button {
|
|
1794
1854
|
--pico-background-color: var(--pico-secondary-hover-background);
|
|
1795
1855
|
--pico-border-color: var(--pico-secondary-hover-border);
|
|
1796
1856
|
}
|
|
1797
|
-
[type=file]:focus::file-selector-button {
|
|
1798
|
-
--pico-box-shadow:
|
|
1857
|
+
[type="file"]:focus::file-selector-button {
|
|
1858
|
+
--pico-box-shadow:
|
|
1859
|
+
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
1860
|
+
0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
|
1799
1861
|
}
|
|
1800
|
-
|
|
1801
1862
|
/**
|
|
1802
1863
|
* Input type range
|
|
1803
1864
|
*/
|
|
1804
|
-
[type=range] {
|
|
1865
|
+
[type="range"] {
|
|
1805
1866
|
-webkit-appearance: none;
|
|
1806
1867
|
-moz-appearance: none;
|
|
1807
1868
|
appearance: none;
|
|
@@ -1809,31 +1870,43 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
|
1809
1870
|
height: 1.25rem;
|
|
1810
1871
|
background: none;
|
|
1811
1872
|
}
|
|
1812
|
-
[type=range]::-webkit-slider-runnable-track {
|
|
1873
|
+
[type="range"]::-webkit-slider-runnable-track {
|
|
1813
1874
|
width: 100%;
|
|
1814
1875
|
height: 0.375rem;
|
|
1815
1876
|
border-radius: var(--pico-border-radius);
|
|
1816
1877
|
background-color: var(--pico-range-border-color);
|
|
1817
|
-
-webkit-transition:
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1878
|
+
-webkit-transition:
|
|
1879
|
+
background-color var(--pico-transition),
|
|
1880
|
+
box-shadow var(--pico-transition);
|
|
1881
|
+
transition:
|
|
1882
|
+
background-color var(--pico-transition),
|
|
1883
|
+
box-shadow var(--pico-transition);
|
|
1884
|
+
}
|
|
1885
|
+
[type="range"]::-moz-range-track {
|
|
1821
1886
|
width: 100%;
|
|
1822
1887
|
height: 0.375rem;
|
|
1823
1888
|
border-radius: var(--pico-border-radius);
|
|
1824
1889
|
background-color: var(--pico-range-border-color);
|
|
1825
|
-
-moz-transition:
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1890
|
+
-moz-transition:
|
|
1891
|
+
background-color var(--pico-transition),
|
|
1892
|
+
box-shadow var(--pico-transition);
|
|
1893
|
+
transition:
|
|
1894
|
+
background-color var(--pico-transition),
|
|
1895
|
+
box-shadow var(--pico-transition);
|
|
1896
|
+
}
|
|
1897
|
+
[type="range"]::-ms-track {
|
|
1829
1898
|
width: 100%;
|
|
1830
1899
|
height: 0.375rem;
|
|
1831
1900
|
border-radius: var(--pico-border-radius);
|
|
1832
1901
|
background-color: var(--pico-range-border-color);
|
|
1833
|
-
-ms-transition:
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1902
|
+
-ms-transition:
|
|
1903
|
+
background-color var(--pico-transition),
|
|
1904
|
+
box-shadow var(--pico-transition);
|
|
1905
|
+
transition:
|
|
1906
|
+
background-color var(--pico-transition),
|
|
1907
|
+
box-shadow var(--pico-transition);
|
|
1908
|
+
}
|
|
1909
|
+
[type="range"]::-webkit-slider-thumb {
|
|
1837
1910
|
-webkit-appearance: none;
|
|
1838
1911
|
width: 1.25rem;
|
|
1839
1912
|
height: 1.25rem;
|
|
@@ -1842,10 +1915,14 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
|
1842
1915
|
border-radius: 50%;
|
|
1843
1916
|
background-color: var(--pico-range-thumb-color);
|
|
1844
1917
|
cursor: pointer;
|
|
1845
|
-
-webkit-transition:
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1918
|
+
-webkit-transition:
|
|
1919
|
+
background-color var(--pico-transition),
|
|
1920
|
+
transform var(--pico-transition);
|
|
1921
|
+
transition:
|
|
1922
|
+
background-color var(--pico-transition),
|
|
1923
|
+
transform var(--pico-transition);
|
|
1924
|
+
}
|
|
1925
|
+
[type="range"]::-moz-range-thumb {
|
|
1849
1926
|
-webkit-appearance: none;
|
|
1850
1927
|
width: 1.25rem;
|
|
1851
1928
|
height: 1.25rem;
|
|
@@ -1854,10 +1931,14 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
|
1854
1931
|
border-radius: 50%;
|
|
1855
1932
|
background-color: var(--pico-range-thumb-color);
|
|
1856
1933
|
cursor: pointer;
|
|
1857
|
-
-moz-transition:
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1934
|
+
-moz-transition:
|
|
1935
|
+
background-color var(--pico-transition),
|
|
1936
|
+
transform var(--pico-transition);
|
|
1937
|
+
transition:
|
|
1938
|
+
background-color var(--pico-transition),
|
|
1939
|
+
transform var(--pico-transition);
|
|
1940
|
+
}
|
|
1941
|
+
[type="range"]::-ms-thumb {
|
|
1861
1942
|
-webkit-appearance: none;
|
|
1862
1943
|
width: 1.25rem;
|
|
1863
1944
|
height: 1.25rem;
|
|
@@ -1866,51 +1947,84 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
|
|
|
1866
1947
|
border-radius: 50%;
|
|
1867
1948
|
background-color: var(--pico-range-thumb-color);
|
|
1868
1949
|
cursor: pointer;
|
|
1869
|
-
-ms-transition:
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1950
|
+
-ms-transition:
|
|
1951
|
+
background-color var(--pico-transition),
|
|
1952
|
+
transform var(--pico-transition);
|
|
1953
|
+
transition:
|
|
1954
|
+
background-color var(--pico-transition),
|
|
1955
|
+
transform var(--pico-transition);
|
|
1956
|
+
}
|
|
1957
|
+
[type="range"]:active,
|
|
1958
|
+
[type="range"]:focus-within {
|
|
1873
1959
|
--pico-range-border-color: var(--pico-range-active-border-color);
|
|
1874
1960
|
--pico-range-thumb-color: var(--pico-range-thumb-active-color);
|
|
1875
1961
|
}
|
|
1876
|
-
[type=range]:active::-webkit-slider-thumb {
|
|
1962
|
+
[type="range"]:active::-webkit-slider-thumb {
|
|
1877
1963
|
transform: scale(1.25);
|
|
1878
1964
|
}
|
|
1879
|
-
[type=range]:active::-moz-range-thumb {
|
|
1965
|
+
[type="range"]:active::-moz-range-thumb {
|
|
1880
1966
|
transform: scale(1.25);
|
|
1881
1967
|
}
|
|
1882
|
-
[type=range]:active::-ms-thumb {
|
|
1968
|
+
[type="range"]:active::-ms-thumb {
|
|
1883
1969
|
transform: scale(1.25);
|
|
1884
1970
|
}
|
|
1885
|
-
|
|
1886
1971
|
/**
|
|
1887
1972
|
* Input type search
|
|
1888
1973
|
*/
|
|
1889
|
-
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
|
|
1974
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
|
|
1890
1975
|
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
|
|
1891
1976
|
background-image: var(--pico-icon-search);
|
|
1892
1977
|
background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
|
|
1893
1978
|
background-size: 1rem auto;
|
|
1894
1979
|
background-repeat: no-repeat;
|
|
1895
1980
|
}
|
|
1896
|
-
input:not(
|
|
1981
|
+
input:not(
|
|
1982
|
+
[type="checkbox"],
|
|
1983
|
+
[type="radio"],
|
|
1984
|
+
[type="range"],
|
|
1985
|
+
[type="file"]
|
|
1986
|
+
)[type="search"][aria-invalid] {
|
|
1897
1987
|
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
|
|
1898
|
-
background-position:
|
|
1899
|
-
|
|
1900
|
-
|
|
1988
|
+
background-position:
|
|
1989
|
+
center left 1.125rem,
|
|
1990
|
+
center right 0.75rem;
|
|
1991
|
+
}
|
|
1992
|
+
input:not(
|
|
1993
|
+
[type="checkbox"],
|
|
1994
|
+
[type="radio"],
|
|
1995
|
+
[type="range"],
|
|
1996
|
+
[type="file"]
|
|
1997
|
+
)[type="search"][aria-invalid="false"] {
|
|
1901
1998
|
background-image: var(--pico-icon-search), var(--pico-icon-valid);
|
|
1902
1999
|
}
|
|
1903
|
-
input:not(
|
|
2000
|
+
input:not(
|
|
2001
|
+
[type="checkbox"],
|
|
2002
|
+
[type="radio"],
|
|
2003
|
+
[type="range"],
|
|
2004
|
+
[type="file"]
|
|
2005
|
+
)[type="search"][aria-invalid="true"] {
|
|
1904
2006
|
background-image: var(--pico-icon-search), var(--pico-icon-invalid);
|
|
1905
2007
|
}
|
|
1906
|
-
|
|
1907
|
-
|
|
2008
|
+
[dir="rtl"]
|
|
2009
|
+
:where(input):not(
|
|
2010
|
+
[type="checkbox"],
|
|
2011
|
+
[type="radio"],
|
|
2012
|
+
[type="range"],
|
|
2013
|
+
[type="file"]
|
|
2014
|
+
)[type="search"] {
|
|
1908
2015
|
background-position: center right 1.125rem;
|
|
1909
2016
|
}
|
|
1910
|
-
[dir=rtl]
|
|
1911
|
-
|
|
2017
|
+
[dir="rtl"]
|
|
2018
|
+
:where(input):not(
|
|
2019
|
+
[type="checkbox"],
|
|
2020
|
+
[type="radio"],
|
|
2021
|
+
[type="range"],
|
|
2022
|
+
[type="file"]
|
|
2023
|
+
)[type="search"][aria-invalid] {
|
|
2024
|
+
background-position:
|
|
2025
|
+
center right 1.125rem,
|
|
2026
|
+
center left 0.75rem;
|
|
1912
2027
|
}
|
|
1913
|
-
|
|
1914
2028
|
/**
|
|
1915
2029
|
* Accordion (<details>)
|
|
1916
2030
|
*/
|
|
@@ -1961,11 +2075,11 @@ details summary:focus-visible:not([role]) {
|
|
|
1961
2075
|
outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
|
|
1962
2076
|
color: var(--pico-primary);
|
|
1963
2077
|
}
|
|
1964
|
-
details summary[role=button] {
|
|
2078
|
+
details summary[role="button"] {
|
|
1965
2079
|
width: 100%;
|
|
1966
2080
|
text-align: left;
|
|
1967
2081
|
}
|
|
1968
|
-
details summary[role=button]::after {
|
|
2082
|
+
details summary[role="button"]::after {
|
|
1969
2083
|
height: calc(1rem * var(--pico-line-height, 1.5));
|
|
1970
2084
|
}
|
|
1971
2085
|
details[open] > summary {
|
|
@@ -1977,15 +2091,13 @@ details[open] > summary:not([role]):not(:focus) {
|
|
|
1977
2091
|
details[open] > summary::after {
|
|
1978
2092
|
transform: rotate(0);
|
|
1979
2093
|
}
|
|
1980
|
-
|
|
1981
|
-
[dir=rtl] details summary {
|
|
2094
|
+
[dir="rtl"] details summary {
|
|
1982
2095
|
text-align: right;
|
|
1983
2096
|
}
|
|
1984
|
-
[dir=rtl] details summary::after {
|
|
2097
|
+
[dir="rtl"] details summary::after {
|
|
1985
2098
|
float: left;
|
|
1986
2099
|
background-position: left center;
|
|
1987
2100
|
}
|
|
1988
|
-
|
|
1989
2101
|
/**
|
|
1990
2102
|
* Card (<article>)
|
|
1991
2103
|
*/
|
|
@@ -2017,7 +2129,6 @@ article > footer {
|
|
|
2017
2129
|
border-bottom-right-radius: var(--pico-border-radius);
|
|
2018
2130
|
border-bottom-left-radius: var(--pico-border-radius);
|
|
2019
2131
|
}
|
|
2020
|
-
|
|
2021
2132
|
/**
|
|
2022
2133
|
* Dropdown (details.dropdown)
|
|
2023
2134
|
*/
|
|
@@ -2040,13 +2151,14 @@ details.dropdown > a::after {
|
|
|
2040
2151
|
background-repeat: no-repeat;
|
|
2041
2152
|
content: "";
|
|
2042
2153
|
}
|
|
2043
|
-
|
|
2044
2154
|
nav details.dropdown {
|
|
2045
2155
|
margin-bottom: 0;
|
|
2046
2156
|
}
|
|
2047
|
-
|
|
2048
2157
|
details.dropdown > summary:not([role]) {
|
|
2049
|
-
height: calc(
|
|
2158
|
+
height: calc(
|
|
2159
|
+
1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
2160
|
+
var(--pico-border-width) * 2
|
|
2161
|
+
);
|
|
2050
2162
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
2051
2163
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
|
2052
2164
|
border-radius: var(--pico-border-radius);
|
|
@@ -2057,9 +2169,14 @@ details.dropdown > summary:not([role]) {
|
|
|
2057
2169
|
-webkit-user-select: none;
|
|
2058
2170
|
-moz-user-select: none;
|
|
2059
2171
|
user-select: none;
|
|
2060
|
-
transition:
|
|
2172
|
+
transition:
|
|
2173
|
+
background-color var(--pico-transition),
|
|
2174
|
+
border-color var(--pico-transition),
|
|
2175
|
+
color var(--pico-transition),
|
|
2176
|
+
box-shadow var(--pico-transition);
|
|
2061
2177
|
}
|
|
2062
|
-
details.dropdown > summary:not([role]):active,
|
|
2178
|
+
details.dropdown > summary:not([role]):active,
|
|
2179
|
+
details.dropdown > summary:not([role]):focus {
|
|
2063
2180
|
border-color: var(--pico-form-element-active-border-color);
|
|
2064
2181
|
background-color: var(--pico-form-element-active-background-color);
|
|
2065
2182
|
}
|
|
@@ -2069,17 +2186,16 @@ details.dropdown > summary:not([role]):focus {
|
|
|
2069
2186
|
details.dropdown > summary:not([role]):focus-visible {
|
|
2070
2187
|
outline: none;
|
|
2071
2188
|
}
|
|
2072
|
-
details.dropdown > summary:not([role])[aria-invalid=false] {
|
|
2189
|
+
details.dropdown > summary:not([role])[aria-invalid="false"] {
|
|
2073
2190
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
|
2074
2191
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
|
2075
2192
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
|
2076
2193
|
}
|
|
2077
|
-
details.dropdown > summary:not([role])[aria-invalid=true] {
|
|
2194
|
+
details.dropdown > summary:not([role])[aria-invalid="true"] {
|
|
2078
2195
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
|
2079
2196
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
|
2080
2197
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
|
2081
2198
|
}
|
|
2082
|
-
|
|
2083
2199
|
nav details.dropdown {
|
|
2084
2200
|
display: inline;
|
|
2085
2201
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
|
@@ -2089,12 +2205,12 @@ nav details.dropdown > summary::after {
|
|
|
2089
2205
|
}
|
|
2090
2206
|
nav details.dropdown > summary:not([role]) {
|
|
2091
2207
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
|
2092
|
-
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2208
|
+
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2209
|
+
var(--pico-nav-link-spacing-horizontal);
|
|
2093
2210
|
}
|
|
2094
2211
|
nav details.dropdown > summary:not([role]):focus-visible {
|
|
2095
2212
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
2096
2213
|
}
|
|
2097
|
-
|
|
2098
2214
|
details.dropdown > summary + ul {
|
|
2099
2215
|
display: flex;
|
|
2100
2216
|
z-index: 99;
|
|
@@ -2114,16 +2230,19 @@ details.dropdown > summary + ul {
|
|
|
2114
2230
|
color: var(--pico-dropdown-color);
|
|
2115
2231
|
white-space: nowrap;
|
|
2116
2232
|
opacity: 0;
|
|
2117
|
-
transition:
|
|
2233
|
+
transition:
|
|
2234
|
+
opacity var(--pico-transition),
|
|
2235
|
+
transform 0s ease-in-out 1s;
|
|
2118
2236
|
}
|
|
2119
|
-
details.dropdown > summary + ul[dir=rtl] {
|
|
2237
|
+
details.dropdown > summary + ul[dir="rtl"] {
|
|
2120
2238
|
right: 0;
|
|
2121
2239
|
left: auto;
|
|
2122
2240
|
}
|
|
2123
2241
|
details.dropdown > summary + ul li {
|
|
2124
2242
|
width: 100%;
|
|
2125
2243
|
margin-bottom: 0;
|
|
2126
|
-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
2244
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
2245
|
+
var(--pico-form-element-spacing-horizontal);
|
|
2127
2246
|
list-style: none;
|
|
2128
2247
|
}
|
|
2129
2248
|
details.dropdown > summary + ul li:first-of-type {
|
|
@@ -2134,15 +2253,21 @@ details.dropdown > summary + ul li:last-of-type {
|
|
|
2134
2253
|
}
|
|
2135
2254
|
details.dropdown > summary + ul li a {
|
|
2136
2255
|
display: block;
|
|
2137
|
-
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
|
|
2138
|
-
|
|
2256
|
+
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
|
|
2257
|
+
calc(var(--pico-form-element-spacing-horizontal) * -1);
|
|
2258
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
2259
|
+
var(--pico-form-element-spacing-horizontal);
|
|
2139
2260
|
overflow: hidden;
|
|
2140
2261
|
border-radius: 0;
|
|
2141
2262
|
color: var(--pico-dropdown-color);
|
|
2142
2263
|
text-decoration: none;
|
|
2143
2264
|
text-overflow: ellipsis;
|
|
2144
2265
|
}
|
|
2145
|
-
details.dropdown > summary + ul li a:hover,
|
|
2266
|
+
details.dropdown > summary + ul li a:hover,
|
|
2267
|
+
details.dropdown > summary + ul li a:focus,
|
|
2268
|
+
details.dropdown > summary + ul li a:active,
|
|
2269
|
+
details.dropdown > summary + ul li a:focus-visible,
|
|
2270
|
+
details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
|
|
2146
2271
|
background-color: var(--pico-dropdown-hover-background-color);
|
|
2147
2272
|
}
|
|
2148
2273
|
details.dropdown > summary + ul li label {
|
|
@@ -2151,17 +2276,16 @@ details.dropdown > summary + ul li label {
|
|
|
2151
2276
|
details.dropdown > summary + ul li:has(label):hover {
|
|
2152
2277
|
background-color: var(--pico-dropdown-hover-background-color);
|
|
2153
2278
|
}
|
|
2154
|
-
|
|
2155
2279
|
details.dropdown[open] > summary {
|
|
2156
2280
|
margin-bottom: 0;
|
|
2157
2281
|
}
|
|
2158
|
-
|
|
2159
2282
|
details.dropdown[open] > summary + ul {
|
|
2160
2283
|
transform: scaleY(1);
|
|
2161
2284
|
opacity: 1;
|
|
2162
|
-
transition:
|
|
2285
|
+
transition:
|
|
2286
|
+
opacity var(--pico-transition),
|
|
2287
|
+
transform 0s ease-in-out 0s;
|
|
2163
2288
|
}
|
|
2164
|
-
|
|
2165
2289
|
details.dropdown[open] > summary::before {
|
|
2166
2290
|
display: block;
|
|
2167
2291
|
z-index: 1;
|
|
@@ -2173,16 +2297,14 @@ details.dropdown[open] > summary::before {
|
|
|
2173
2297
|
content: "";
|
|
2174
2298
|
cursor: default;
|
|
2175
2299
|
}
|
|
2176
|
-
|
|
2177
2300
|
label > details.dropdown {
|
|
2178
2301
|
margin-top: calc(var(--pico-spacing) * 0.25);
|
|
2179
2302
|
}
|
|
2180
|
-
|
|
2181
2303
|
/**
|
|
2182
2304
|
* Group ([role="group"], [role="search"])
|
|
2183
2305
|
*/
|
|
2184
|
-
[role=search],
|
|
2185
|
-
[role=group] {
|
|
2306
|
+
[role="search"],
|
|
2307
|
+
[role="group"] {
|
|
2186
2308
|
display: inline-flex;
|
|
2187
2309
|
position: relative;
|
|
2188
2310
|
width: 100%;
|
|
@@ -2192,127 +2314,165 @@ label > details.dropdown {
|
|
|
2192
2314
|
vertical-align: middle;
|
|
2193
2315
|
transition: box-shadow var(--pico-transition);
|
|
2194
2316
|
}
|
|
2195
|
-
[role=search] > *,
|
|
2196
|
-
[role=search] input:not([type=checkbox], [type=radio]),
|
|
2197
|
-
[role=search] select,
|
|
2198
|
-
[role=group] > *,
|
|
2199
|
-
[role=group] input:not([type=checkbox], [type=radio]),
|
|
2200
|
-
[role=group] select {
|
|
2317
|
+
[role="search"] > *,
|
|
2318
|
+
[role="search"] input:not([type="checkbox"], [type="radio"]),
|
|
2319
|
+
[role="search"] select,
|
|
2320
|
+
[role="group"] > *,
|
|
2321
|
+
[role="group"] input:not([type="checkbox"], [type="radio"]),
|
|
2322
|
+
[role="group"] select {
|
|
2201
2323
|
position: relative;
|
|
2202
2324
|
flex: 1 1 auto;
|
|
2203
2325
|
margin-bottom: 0;
|
|
2204
2326
|
}
|
|
2205
|
-
[role=search] > *:not(:first-child),
|
|
2206
|
-
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
|
2207
|
-
[role=search] select:not(:first-child),
|
|
2208
|
-
[role=group] > *:not(:first-child),
|
|
2209
|
-
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
|
2210
|
-
[role=group] select:not(:first-child) {
|
|
2327
|
+
[role="search"] > *:not(:first-child),
|
|
2328
|
+
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2329
|
+
[role="search"] select:not(:first-child),
|
|
2330
|
+
[role="group"] > *:not(:first-child),
|
|
2331
|
+
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2332
|
+
[role="group"] select:not(:first-child) {
|
|
2211
2333
|
margin-left: 0;
|
|
2212
2334
|
border-top-left-radius: 0;
|
|
2213
2335
|
border-bottom-left-radius: 0;
|
|
2214
2336
|
}
|
|
2215
|
-
[role=search] > *:not(:last-child),
|
|
2216
|
-
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
|
|
2217
|
-
[role=search] select:not(:last-child),
|
|
2218
|
-
[role=group] > *:not(:last-child),
|
|
2219
|
-
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
|
|
2220
|
-
[role=group] select:not(:last-child) {
|
|
2337
|
+
[role="search"] > *:not(:last-child),
|
|
2338
|
+
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
|
|
2339
|
+
[role="search"] select:not(:last-child),
|
|
2340
|
+
[role="group"] > *:not(:last-child),
|
|
2341
|
+
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
|
|
2342
|
+
[role="group"] select:not(:last-child) {
|
|
2221
2343
|
border-top-right-radius: 0;
|
|
2222
2344
|
border-bottom-right-radius: 0;
|
|
2223
2345
|
}
|
|
2224
|
-
[role=search] > *:focus,
|
|
2225
|
-
[role=search] input:not([type=checkbox], [type=radio]):focus,
|
|
2226
|
-
[role=search] select:focus,
|
|
2227
|
-
[role=group] > *:focus,
|
|
2228
|
-
[role=group] input:not([type=checkbox], [type=radio]):focus,
|
|
2229
|
-
[role=group] select:focus {
|
|
2346
|
+
[role="search"] > *:focus,
|
|
2347
|
+
[role="search"] input:not([type="checkbox"], [type="radio"]):focus,
|
|
2348
|
+
[role="search"] select:focus,
|
|
2349
|
+
[role="group"] > *:focus,
|
|
2350
|
+
[role="group"] input:not([type="checkbox"], [type="radio"]):focus,
|
|
2351
|
+
[role="group"] select:focus {
|
|
2230
2352
|
z-index: 2;
|
|
2231
2353
|
}
|
|
2232
|
-
[role=search] button:not(:first-child),
|
|
2233
|
-
[role=search] [type=submit]:not(:first-child),
|
|
2234
|
-
[role=search] [type=reset]:not(:first-child),
|
|
2235
|
-
[role=search] [type=button]:not(:first-child),
|
|
2236
|
-
[role=search] [role=button]:not(:first-child),
|
|
2237
|
-
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
|
|
2238
|
-
[role=search] select:not(:first-child),
|
|
2239
|
-
[role=group] button:not(:first-child),
|
|
2240
|
-
[role=group] [type=submit]:not(:first-child),
|
|
2241
|
-
[role=group] [type=reset]:not(:first-child),
|
|
2242
|
-
[role=group] [type=button]:not(:first-child),
|
|
2243
|
-
[role=group] [role=button]:not(:first-child),
|
|
2244
|
-
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
|
|
2245
|
-
[role=group] select:not(:first-child) {
|
|
2354
|
+
[role="search"] button:not(:first-child),
|
|
2355
|
+
[role="search"] [type="submit"]:not(:first-child),
|
|
2356
|
+
[role="search"] [type="reset"]:not(:first-child),
|
|
2357
|
+
[role="search"] [type="button"]:not(:first-child),
|
|
2358
|
+
[role="search"] [role="button"]:not(:first-child),
|
|
2359
|
+
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2360
|
+
[role="search"] select:not(:first-child),
|
|
2361
|
+
[role="group"] button:not(:first-child),
|
|
2362
|
+
[role="group"] [type="submit"]:not(:first-child),
|
|
2363
|
+
[role="group"] [type="reset"]:not(:first-child),
|
|
2364
|
+
[role="group"] [type="button"]:not(:first-child),
|
|
2365
|
+
[role="group"] [role="button"]:not(:first-child),
|
|
2366
|
+
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2367
|
+
[role="group"] select:not(:first-child) {
|
|
2246
2368
|
margin-left: calc(var(--pico-border-width) * -1);
|
|
2247
2369
|
}
|
|
2248
|
-
[role=search] button,
|
|
2249
|
-
[role=search] [type=submit],
|
|
2250
|
-
[role=search] [type=reset],
|
|
2251
|
-
[role=search] [type=button],
|
|
2252
|
-
[role=search] [role=button],
|
|
2253
|
-
[role=group] button,
|
|
2254
|
-
[role=group] [type=submit],
|
|
2255
|
-
[role=group] [type=reset],
|
|
2256
|
-
[role=group] [type=button],
|
|
2257
|
-
[role=group] [role=button] {
|
|
2370
|
+
[role="search"] button,
|
|
2371
|
+
[role="search"] [type="submit"],
|
|
2372
|
+
[role="search"] [type="reset"],
|
|
2373
|
+
[role="search"] [type="button"],
|
|
2374
|
+
[role="search"] [role="button"],
|
|
2375
|
+
[role="group"] button,
|
|
2376
|
+
[role="group"] [type="submit"],
|
|
2377
|
+
[role="group"] [type="reset"],
|
|
2378
|
+
[role="group"] [type="button"],
|
|
2379
|
+
[role="group"] [role="button"] {
|
|
2258
2380
|
width: auto;
|
|
2259
2381
|
}
|
|
2260
2382
|
@supports selector(:has(*)) {
|
|
2261
|
-
[role=search]:has(
|
|
2262
|
-
|
|
2383
|
+
[role="search"]:has(
|
|
2384
|
+
button:focus,
|
|
2385
|
+
[type="submit"]:focus,
|
|
2386
|
+
[type="button"]:focus,
|
|
2387
|
+
[role="button"]:focus
|
|
2388
|
+
),
|
|
2389
|
+
[role="group"]:has(
|
|
2390
|
+
button:focus,
|
|
2391
|
+
[type="submit"]:focus,
|
|
2392
|
+
[type="button"]:focus,
|
|
2393
|
+
[role="button"]:focus
|
|
2394
|
+
) {
|
|
2263
2395
|
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
|
|
2264
2396
|
}
|
|
2265
|
-
[role=search]:has(
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2397
|
+
[role="search"]:has(
|
|
2398
|
+
button:focus,
|
|
2399
|
+
[type="submit"]:focus,
|
|
2400
|
+
[type="button"]:focus,
|
|
2401
|
+
[role="button"]:focus
|
|
2402
|
+
)
|
|
2403
|
+
input:not([type="checkbox"], [type="radio"]),
|
|
2404
|
+
[role="search"]:has(
|
|
2405
|
+
button:focus,
|
|
2406
|
+
[type="submit"]:focus,
|
|
2407
|
+
[type="button"]:focus,
|
|
2408
|
+
[role="button"]:focus
|
|
2409
|
+
)
|
|
2410
|
+
select,
|
|
2411
|
+
[role="group"]:has(
|
|
2412
|
+
button:focus,
|
|
2413
|
+
[type="submit"]:focus,
|
|
2414
|
+
[type="button"]:focus,
|
|
2415
|
+
[role="button"]:focus
|
|
2416
|
+
)
|
|
2417
|
+
input:not([type="checkbox"], [type="radio"]),
|
|
2418
|
+
[role="group"]:has(
|
|
2419
|
+
button:focus,
|
|
2420
|
+
[type="submit"]:focus,
|
|
2421
|
+
[type="button"]:focus,
|
|
2422
|
+
[role="button"]:focus
|
|
2423
|
+
)
|
|
2424
|
+
select {
|
|
2269
2425
|
border-color: transparent;
|
|
2270
2426
|
}
|
|
2271
|
-
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
|
|
2272
|
-
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
|
|
2427
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus),
|
|
2428
|
+
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
|
2273
2429
|
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
|
|
2274
2430
|
}
|
|
2275
|
-
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
|
|
2276
|
-
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus)
|
|
2277
|
-
|
|
2278
|
-
[role=search]:has(input:not([type=submit], [type=button]):focus, select:focus)
|
|
2279
|
-
|
|
2280
|
-
[role=
|
|
2281
|
-
|
|
2282
|
-
[role=group]:has(input:not([type=submit], [type=button]):focus, select:focus)
|
|
2431
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
|
|
2432
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2433
|
+
[type="submit"],
|
|
2434
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2435
|
+
[type="button"],
|
|
2436
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2437
|
+
[role="button"],
|
|
2438
|
+
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
|
|
2439
|
+
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2440
|
+
[type="submit"],
|
|
2441
|
+
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2442
|
+
[type="button"],
|
|
2443
|
+
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2444
|
+
[role="button"] {
|
|
2283
2445
|
--pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
|
|
2284
2446
|
--pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
|
|
2285
2447
|
}
|
|
2286
|
-
[role=search] button:focus,
|
|
2287
|
-
[role=search] [type=submit]:focus,
|
|
2288
|
-
[role=search] [type=reset]:focus,
|
|
2289
|
-
[role=search] [type=button]:focus,
|
|
2290
|
-
[role=search] [role=button]:focus,
|
|
2291
|
-
[role=group] button:focus,
|
|
2292
|
-
[role=group] [type=submit]:focus,
|
|
2293
|
-
[role=group] [type=reset]:focus,
|
|
2294
|
-
[role=group] [type=button]:focus,
|
|
2295
|
-
[role=group] [role=button]:focus {
|
|
2448
|
+
[role="search"] button:focus,
|
|
2449
|
+
[role="search"] [type="submit"]:focus,
|
|
2450
|
+
[role="search"] [type="reset"]:focus,
|
|
2451
|
+
[role="search"] [type="button"]:focus,
|
|
2452
|
+
[role="search"] [role="button"]:focus,
|
|
2453
|
+
[role="group"] button:focus,
|
|
2454
|
+
[role="group"] [type="submit"]:focus,
|
|
2455
|
+
[role="group"] [type="reset"]:focus,
|
|
2456
|
+
[role="group"] [type="button"]:focus,
|
|
2457
|
+
[role="group"] [role="button"]:focus {
|
|
2296
2458
|
box-shadow: none;
|
|
2297
2459
|
}
|
|
2298
2460
|
}
|
|
2299
|
-
|
|
2300
|
-
[role=search] > *:first-child {
|
|
2461
|
+
[role="search"] > *:first-child {
|
|
2301
2462
|
border-top-left-radius: 5rem;
|
|
2302
2463
|
border-bottom-left-radius: 5rem;
|
|
2303
2464
|
}
|
|
2304
|
-
[role=search] > *:last-child {
|
|
2465
|
+
[role="search"] > *:last-child {
|
|
2305
2466
|
border-top-right-radius: 5rem;
|
|
2306
2467
|
border-bottom-right-radius: 5rem;
|
|
2307
2468
|
}
|
|
2308
|
-
|
|
2309
2469
|
/**
|
|
2310
2470
|
* Loading ([aria-busy=true])
|
|
2311
2471
|
*/
|
|
2312
|
-
[aria-busy=true]:not(input, select, textarea, html, form) {
|
|
2472
|
+
[aria-busy="true"]:not(input, select, textarea, html, form) {
|
|
2313
2473
|
white-space: nowrap;
|
|
2314
2474
|
}
|
|
2315
|
-
[aria-busy=true]:not(input, select, textarea, html, form)::before {
|
|
2475
|
+
[aria-busy="true"]:not(input, select, textarea, html, form)::before {
|
|
2316
2476
|
display: inline-block;
|
|
2317
2477
|
width: 1em;
|
|
2318
2478
|
height: 1em;
|
|
@@ -2322,22 +2482,20 @@ label > details.dropdown {
|
|
|
2322
2482
|
content: "";
|
|
2323
2483
|
vertical-align: -0.125em;
|
|
2324
2484
|
}
|
|
2325
|
-
[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
|
|
2485
|
+
[aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before {
|
|
2326
2486
|
margin-inline-end: calc(var(--pico-spacing) * 0.5);
|
|
2327
2487
|
}
|
|
2328
|
-
[aria-busy=true]:not(input, select, textarea, html, form):empty {
|
|
2488
|
+
[aria-busy="true"]:not(input, select, textarea, html, form):empty {
|
|
2329
2489
|
text-align: center;
|
|
2330
2490
|
}
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
[type=
|
|
2334
|
-
[type=
|
|
2335
|
-
[
|
|
2336
|
-
[
|
|
2337
|
-
a[aria-busy=true] {
|
|
2491
|
+
button[aria-busy="true"],
|
|
2492
|
+
[type="submit"][aria-busy="true"],
|
|
2493
|
+
[type="button"][aria-busy="true"],
|
|
2494
|
+
[type="reset"][aria-busy="true"],
|
|
2495
|
+
[role="button"][aria-busy="true"],
|
|
2496
|
+
a[aria-busy="true"] {
|
|
2338
2497
|
pointer-events: none;
|
|
2339
2498
|
}
|
|
2340
|
-
|
|
2341
2499
|
/**
|
|
2342
2500
|
* Modal (<dialog>)
|
|
2343
2501
|
*/
|
|
@@ -2345,7 +2503,6 @@ a[aria-busy=true] {
|
|
|
2345
2503
|
:host {
|
|
2346
2504
|
--pico-scrollbar-width: 0px;
|
|
2347
2505
|
}
|
|
2348
|
-
|
|
2349
2506
|
dialog {
|
|
2350
2507
|
display: flex;
|
|
2351
2508
|
z-index: 999;
|
|
@@ -2362,7 +2519,6 @@ dialog {
|
|
|
2362
2519
|
min-height: 100%;
|
|
2363
2520
|
padding: 0;
|
|
2364
2521
|
border: 0;
|
|
2365
|
-
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
|
|
2366
2522
|
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
|
|
2367
2523
|
background-color: var(--pico-modal-overlay-background-color);
|
|
2368
2524
|
color: var(--pico-color);
|
|
@@ -2386,7 +2542,8 @@ dialog > article {
|
|
|
2386
2542
|
dialog > article > header > * {
|
|
2387
2543
|
margin-bottom: 0;
|
|
2388
2544
|
}
|
|
2389
|
-
dialog > article > header .close,
|
|
2545
|
+
dialog > article > header .close,
|
|
2546
|
+
dialog > article > header :is(a, button)[rel="prev"] {
|
|
2390
2547
|
margin: 0;
|
|
2391
2548
|
margin-left: var(--pico-spacing);
|
|
2392
2549
|
padding: 0;
|
|
@@ -2396,14 +2553,15 @@ dialog > article > footer {
|
|
|
2396
2553
|
text-align: right;
|
|
2397
2554
|
}
|
|
2398
2555
|
dialog > article > footer button,
|
|
2399
|
-
dialog > article > footer [role=button] {
|
|
2556
|
+
dialog > article > footer [role="button"] {
|
|
2400
2557
|
margin-bottom: 0;
|
|
2401
2558
|
}
|
|
2402
2559
|
dialog > article > footer button:not(:first-of-type),
|
|
2403
|
-
dialog > article > footer [role=button]:not(:first-of-type) {
|
|
2560
|
+
dialog > article > footer [role="button"]:not(:first-of-type) {
|
|
2404
2561
|
margin-left: calc(var(--pico-spacing) * 0.5);
|
|
2405
2562
|
}
|
|
2406
|
-
dialog > article .close,
|
|
2563
|
+
dialog > article .close,
|
|
2564
|
+
dialog > article :is(a, button)[rel="prev"] {
|
|
2407
2565
|
display: block;
|
|
2408
2566
|
width: 1rem;
|
|
2409
2567
|
height: 1rem;
|
|
@@ -2419,13 +2577,21 @@ dialog > article .close, dialog > article :is(a, button)[rel=prev] {
|
|
|
2419
2577
|
opacity: 0.5;
|
|
2420
2578
|
transition: opacity var(--pico-transition);
|
|
2421
2579
|
}
|
|
2422
|
-
dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
|
2580
|
+
dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
|
|
2581
|
+
dialog
|
|
2582
|
+
> article
|
|
2583
|
+
:is(a, button)[rel="prev"]:is(
|
|
2584
|
+
[aria-current]:not([aria-current="false"]),
|
|
2585
|
+
:hover,
|
|
2586
|
+
:active,
|
|
2587
|
+
:focus
|
|
2588
|
+
) {
|
|
2423
2589
|
opacity: 1;
|
|
2424
2590
|
}
|
|
2425
|
-
dialog:not([open]),
|
|
2591
|
+
dialog:not([open]),
|
|
2592
|
+
dialog[open="false"] {
|
|
2426
2593
|
display: none;
|
|
2427
2594
|
}
|
|
2428
|
-
|
|
2429
2595
|
.modal-is-open {
|
|
2430
2596
|
padding-right: var(--pico-scrollbar-width, 0px);
|
|
2431
2597
|
overflow: hidden;
|
|
@@ -2436,7 +2602,6 @@ dialog:not([open]), dialog[open=false] {
|
|
|
2436
2602
|
pointer-events: auto;
|
|
2437
2603
|
touch-action: auto;
|
|
2438
2604
|
}
|
|
2439
|
-
|
|
2440
2605
|
:where(.modal-is-opening, .modal-is-closing) dialog,
|
|
2441
2606
|
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
|
2442
2607
|
animation-duration: 0.2s;
|
|
@@ -2451,16 +2616,13 @@ dialog:not([open]), dialog[open=false] {
|
|
|
2451
2616
|
animation-delay: 0.2s;
|
|
2452
2617
|
animation-name: modal;
|
|
2453
2618
|
}
|
|
2454
|
-
|
|
2455
2619
|
.modal-is-closing dialog,
|
|
2456
2620
|
.modal-is-closing dialog > article {
|
|
2457
2621
|
animation-delay: 0s;
|
|
2458
2622
|
animation-direction: reverse;
|
|
2459
2623
|
}
|
|
2460
|
-
|
|
2461
2624
|
@keyframes modal-overlay {
|
|
2462
2625
|
from {
|
|
2463
|
-
-webkit-backdrop-filter: none;
|
|
2464
2626
|
backdrop-filter: none;
|
|
2465
2627
|
background-color: transparent;
|
|
2466
2628
|
}
|
|
@@ -2478,12 +2640,10 @@ dialog:not([open]), dialog[open=false] {
|
|
|
2478
2640
|
float: left;
|
|
2479
2641
|
content: "";
|
|
2480
2642
|
}
|
|
2481
|
-
|
|
2482
2643
|
nav,
|
|
2483
2644
|
nav ul {
|
|
2484
2645
|
display: flex;
|
|
2485
2646
|
}
|
|
2486
|
-
|
|
2487
2647
|
nav {
|
|
2488
2648
|
justify-content: space-between;
|
|
2489
2649
|
overflow: visible;
|
|
@@ -2508,38 +2668,40 @@ nav li {
|
|
|
2508
2668
|
margin: 0;
|
|
2509
2669
|
padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
|
|
2510
2670
|
}
|
|
2511
|
-
nav li :where(a, [role=link]) {
|
|
2671
|
+
nav li :where(a, [role="link"]) {
|
|
2512
2672
|
display: inline-block;
|
|
2513
|
-
margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
|
|
2673
|
+
margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
|
|
2674
|
+
calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
2514
2675
|
padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
|
|
2515
2676
|
border-radius: var(--pico-border-radius);
|
|
2516
2677
|
}
|
|
2517
|
-
nav li :where(a, [role=link]):not(:hover) {
|
|
2678
|
+
nav li :where(a, [role="link"]):not(:hover) {
|
|
2518
2679
|
text-decoration: none;
|
|
2519
2680
|
}
|
|
2520
2681
|
nav li button,
|
|
2521
|
-
nav li [role=button],
|
|
2522
|
-
nav li [type=button],
|
|
2523
|
-
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
|
2682
|
+
nav li [role="button"],
|
|
2683
|
+
nav li [type="button"],
|
|
2684
|
+
nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|
2524
2685
|
nav li select {
|
|
2525
2686
|
height: auto;
|
|
2526
2687
|
margin-right: inherit;
|
|
2527
2688
|
margin-bottom: 0;
|
|
2528
2689
|
margin-left: inherit;
|
|
2529
|
-
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2690
|
+
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2691
|
+
var(--pico-nav-link-spacing-horizontal);
|
|
2530
2692
|
}
|
|
2531
|
-
nav[aria-label=breadcrumb] {
|
|
2693
|
+
nav[aria-label="breadcrumb"] {
|
|
2532
2694
|
align-items: center;
|
|
2533
2695
|
justify-content: start;
|
|
2534
2696
|
}
|
|
2535
|
-
nav[aria-label=breadcrumb] ul li:not(:first-child) {
|
|
2697
|
+
nav[aria-label="breadcrumb"] ul li:not(:first-child) {
|
|
2536
2698
|
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
|
2537
2699
|
}
|
|
2538
|
-
nav[aria-label=breadcrumb] ul li a {
|
|
2700
|
+
nav[aria-label="breadcrumb"] ul li a {
|
|
2539
2701
|
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
|
|
2540
2702
|
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
2541
2703
|
}
|
|
2542
|
-
nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
|
2704
|
+
nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
|
|
2543
2705
|
display: inline-block;
|
|
2544
2706
|
position: absolute;
|
|
2545
2707
|
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
|
|
@@ -2550,13 +2712,12 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
|
|
|
2550
2712
|
text-decoration: none;
|
|
2551
2713
|
white-space: nowrap;
|
|
2552
2714
|
}
|
|
2553
|
-
nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
|
|
2715
|
+
nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
|
|
2554
2716
|
background-color: transparent;
|
|
2555
2717
|
color: inherit;
|
|
2556
2718
|
text-decoration: none;
|
|
2557
2719
|
pointer-events: none;
|
|
2558
2720
|
}
|
|
2559
|
-
|
|
2560
2721
|
aside nav,
|
|
2561
2722
|
aside ol,
|
|
2562
2723
|
aside ul,
|
|
@@ -2564,19 +2725,18 @@ aside li {
|
|
|
2564
2725
|
display: block;
|
|
2565
2726
|
}
|
|
2566
2727
|
aside li {
|
|
2567
|
-
padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5)
|
|
2728
|
+
padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5)
|
|
2729
|
+
var(--pico-nav-element-spacing-horizontal);
|
|
2568
2730
|
}
|
|
2569
2731
|
aside li a {
|
|
2570
2732
|
display: block;
|
|
2571
2733
|
}
|
|
2572
|
-
aside li [role=button] {
|
|
2734
|
+
aside li [role="button"] {
|
|
2573
2735
|
margin: inherit;
|
|
2574
2736
|
}
|
|
2575
|
-
|
|
2576
|
-
[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
|
|
2737
|
+
[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
|
|
2577
2738
|
content: "\\";
|
|
2578
2739
|
}
|
|
2579
|
-
|
|
2580
2740
|
/**
|
|
2581
2741
|
* Progress
|
|
2582
2742
|
*/
|
|
@@ -2584,7 +2744,6 @@ progress {
|
|
|
2584
2744
|
display: inline-block;
|
|
2585
2745
|
vertical-align: baseline;
|
|
2586
2746
|
}
|
|
2587
|
-
|
|
2588
2747
|
progress {
|
|
2589
2748
|
-webkit-appearance: none;
|
|
2590
2749
|
-moz-appearance: none;
|
|
@@ -2613,7 +2772,13 @@ progress::-moz-progress-bar {
|
|
|
2613
2772
|
}
|
|
2614
2773
|
@media (prefers-reduced-motion: no-preference) {
|
|
2615
2774
|
progress:indeterminate {
|
|
2616
|
-
background: var(--pico-progress-background-color)
|
|
2775
|
+
background: var(--pico-progress-background-color)
|
|
2776
|
+
linear-gradient(
|
|
2777
|
+
to right,
|
|
2778
|
+
var(--pico-progress-color) 30%,
|
|
2779
|
+
var(--pico-progress-background-color) 30%
|
|
2780
|
+
)
|
|
2781
|
+
top left/150% 150% no-repeat;
|
|
2617
2782
|
animation: progress-indeterminate 1s linear infinite;
|
|
2618
2783
|
}
|
|
2619
2784
|
progress:indeterminate[value]::-webkit-progress-value {
|
|
@@ -2623,13 +2788,11 @@ progress::-moz-progress-bar {
|
|
|
2623
2788
|
background-color: transparent;
|
|
2624
2789
|
}
|
|
2625
2790
|
}
|
|
2626
|
-
|
|
2627
2791
|
@media (prefers-reduced-motion: no-preference) {
|
|
2628
|
-
[dir=rtl] progress:indeterminate {
|
|
2792
|
+
[dir="rtl"] progress:indeterminate {
|
|
2629
2793
|
animation-direction: reverse;
|
|
2630
2794
|
}
|
|
2631
2795
|
}
|
|
2632
|
-
|
|
2633
2796
|
@keyframes progress-indeterminate {
|
|
2634
2797
|
0% {
|
|
2635
2798
|
background-position: 200% 0;
|
|
@@ -2644,12 +2807,15 @@ progress::-moz-progress-bar {
|
|
|
2644
2807
|
[data-tooltip] {
|
|
2645
2808
|
position: relative;
|
|
2646
2809
|
}
|
|
2647
|
-
[data-tooltip]:not(a, button, input, [role=button]) {
|
|
2810
|
+
[data-tooltip]:not(a, button, input, [role="button"]) {
|
|
2648
2811
|
border-bottom: 1px dotted;
|
|
2649
2812
|
text-decoration: none;
|
|
2650
2813
|
cursor: help;
|
|
2651
2814
|
}
|
|
2652
|
-
[data-tooltip][data-placement=top]::before,
|
|
2815
|
+
[data-tooltip][data-placement="top"]::before,
|
|
2816
|
+
[data-tooltip][data-placement="top"]::after,
|
|
2817
|
+
[data-tooltip]::before,
|
|
2818
|
+
[data-tooltip]::after {
|
|
2653
2819
|
display: block;
|
|
2654
2820
|
z-index: 99;
|
|
2655
2821
|
position: absolute;
|
|
@@ -2671,7 +2837,8 @@ progress::-moz-progress-bar {
|
|
|
2671
2837
|
opacity: 0;
|
|
2672
2838
|
pointer-events: none;
|
|
2673
2839
|
}
|
|
2674
|
-
[data-tooltip][data-placement=top]::after,
|
|
2840
|
+
[data-tooltip][data-placement="top"]::after,
|
|
2841
|
+
[data-tooltip]::after {
|
|
2675
2842
|
padding: 0;
|
|
2676
2843
|
transform: translate(-50%, 0rem);
|
|
2677
2844
|
border-top: 0.3rem solid;
|
|
@@ -2682,45 +2849,54 @@ progress::-moz-progress-bar {
|
|
|
2682
2849
|
content: "";
|
|
2683
2850
|
color: var(--pico-tooltip-background-color);
|
|
2684
2851
|
}
|
|
2685
|
-
[data-tooltip][data-placement=bottom]::before,
|
|
2852
|
+
[data-tooltip][data-placement="bottom"]::before,
|
|
2853
|
+
[data-tooltip][data-placement="bottom"]::after {
|
|
2686
2854
|
top: 100%;
|
|
2687
2855
|
bottom: auto;
|
|
2688
2856
|
transform: translate(-50%, 0.25rem);
|
|
2689
2857
|
}
|
|
2690
|
-
[data-tooltip][data-placement=bottom]:after {
|
|
2858
|
+
[data-tooltip][data-placement="bottom"]:after {
|
|
2691
2859
|
transform: translate(-50%, -0.3rem);
|
|
2692
2860
|
border: 0.3rem solid transparent;
|
|
2693
2861
|
border-bottom: 0.3rem solid;
|
|
2694
2862
|
}
|
|
2695
|
-
[data-tooltip][data-placement=left]::before,
|
|
2863
|
+
[data-tooltip][data-placement="left"]::before,
|
|
2864
|
+
[data-tooltip][data-placement="left"]::after {
|
|
2696
2865
|
top: 50%;
|
|
2697
2866
|
right: 100%;
|
|
2698
2867
|
bottom: auto;
|
|
2699
2868
|
left: auto;
|
|
2700
2869
|
transform: translate(-0.25rem, -50%);
|
|
2701
2870
|
}
|
|
2702
|
-
[data-tooltip][data-placement=left]:after {
|
|
2871
|
+
[data-tooltip][data-placement="left"]:after {
|
|
2703
2872
|
transform: translate(0.3rem, -50%);
|
|
2704
2873
|
border: 0.3rem solid transparent;
|
|
2705
2874
|
border-left: 0.3rem solid;
|
|
2706
2875
|
}
|
|
2707
|
-
[data-tooltip][data-placement=right]::before,
|
|
2876
|
+
[data-tooltip][data-placement="right"]::before,
|
|
2877
|
+
[data-tooltip][data-placement="right"]::after {
|
|
2708
2878
|
top: 50%;
|
|
2709
2879
|
right: auto;
|
|
2710
2880
|
bottom: auto;
|
|
2711
2881
|
left: 100%;
|
|
2712
2882
|
transform: translate(0.25rem, -50%);
|
|
2713
2883
|
}
|
|
2714
|
-
[data-tooltip][data-placement=right]:after {
|
|
2884
|
+
[data-tooltip][data-placement="right"]:after {
|
|
2715
2885
|
transform: translate(-0.3rem, -50%);
|
|
2716
2886
|
border: 0.3rem solid transparent;
|
|
2717
2887
|
border-right: 0.3rem solid;
|
|
2718
2888
|
}
|
|
2719
|
-
[data-tooltip]:focus::before,
|
|
2889
|
+
[data-tooltip]:focus::before,
|
|
2890
|
+
[data-tooltip]:focus::after,
|
|
2891
|
+
[data-tooltip]:hover::before,
|
|
2892
|
+
[data-tooltip]:hover::after {
|
|
2720
2893
|
opacity: 1;
|
|
2721
2894
|
}
|
|
2722
2895
|
@media (hover: hover) and (pointer: fine) {
|
|
2723
|
-
[data-tooltip]:focus::before,
|
|
2896
|
+
[data-tooltip]:focus::before,
|
|
2897
|
+
[data-tooltip]:focus::after,
|
|
2898
|
+
[data-tooltip]:hover::before,
|
|
2899
|
+
[data-tooltip]:hover::after {
|
|
2724
2900
|
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
|
|
2725
2901
|
transform: translate(-50%, 0.75rem);
|
|
2726
2902
|
animation-duration: 0.2s;
|
|
@@ -2728,37 +2904,50 @@ progress::-moz-progress-bar {
|
|
|
2728
2904
|
animation-name: tooltip-slide;
|
|
2729
2905
|
opacity: 0;
|
|
2730
2906
|
}
|
|
2731
|
-
[data-tooltip]:focus::after,
|
|
2907
|
+
[data-tooltip]:focus::after,
|
|
2908
|
+
[data-tooltip]:hover::after {
|
|
2732
2909
|
--pico-tooltip-caret-slide-to: translate(-50%, 0rem);
|
|
2733
2910
|
transform: translate(-50%, -0.25rem);
|
|
2734
2911
|
animation-name: tooltip-caret-slide;
|
|
2735
2912
|
}
|
|
2736
|
-
[data-tooltip][data-placement=bottom]:focus::before,
|
|
2913
|
+
[data-tooltip][data-placement="bottom"]:focus::before,
|
|
2914
|
+
[data-tooltip][data-placement="bottom"]:focus::after,
|
|
2915
|
+
[data-tooltip][data-placement="bottom"]:hover::before,
|
|
2916
|
+
[data-tooltip][data-placement="bottom"]:hover::after {
|
|
2737
2917
|
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
|
|
2738
2918
|
transform: translate(-50%, -0.75rem);
|
|
2739
2919
|
animation-name: tooltip-slide;
|
|
2740
2920
|
}
|
|
2741
|
-
[data-tooltip][data-placement=bottom]:focus::after,
|
|
2921
|
+
[data-tooltip][data-placement="bottom"]:focus::after,
|
|
2922
|
+
[data-tooltip][data-placement="bottom"]:hover::after {
|
|
2742
2923
|
--pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
|
|
2743
2924
|
transform: translate(-50%, -0.5rem);
|
|
2744
2925
|
animation-name: tooltip-caret-slide;
|
|
2745
2926
|
}
|
|
2746
|
-
[data-tooltip][data-placement=left]:focus::before,
|
|
2927
|
+
[data-tooltip][data-placement="left"]:focus::before,
|
|
2928
|
+
[data-tooltip][data-placement="left"]:focus::after,
|
|
2929
|
+
[data-tooltip][data-placement="left"]:hover::before,
|
|
2930
|
+
[data-tooltip][data-placement="left"]:hover::after {
|
|
2747
2931
|
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
|
|
2748
2932
|
transform: translate(0.75rem, -50%);
|
|
2749
2933
|
animation-name: tooltip-slide;
|
|
2750
2934
|
}
|
|
2751
|
-
[data-tooltip][data-placement=left]:focus::after,
|
|
2935
|
+
[data-tooltip][data-placement="left"]:focus::after,
|
|
2936
|
+
[data-tooltip][data-placement="left"]:hover::after {
|
|
2752
2937
|
--pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
|
|
2753
2938
|
transform: translate(0.05rem, -50%);
|
|
2754
2939
|
animation-name: tooltip-caret-slide;
|
|
2755
2940
|
}
|
|
2756
|
-
[data-tooltip][data-placement=right]:focus::before,
|
|
2941
|
+
[data-tooltip][data-placement="right"]:focus::before,
|
|
2942
|
+
[data-tooltip][data-placement="right"]:focus::after,
|
|
2943
|
+
[data-tooltip][data-placement="right"]:hover::before,
|
|
2944
|
+
[data-tooltip][data-placement="right"]:hover::after {
|
|
2757
2945
|
--pico-tooltip-slide-to: translate(0.25rem, -50%);
|
|
2758
2946
|
transform: translate(-0.75rem, -50%);
|
|
2759
2947
|
animation-name: tooltip-slide;
|
|
2760
2948
|
}
|
|
2761
|
-
[data-tooltip][data-placement=right]:focus::after,
|
|
2949
|
+
[data-tooltip][data-placement="right"]:focus::after,
|
|
2950
|
+
[data-tooltip][data-placement="right"]:hover::after {
|
|
2762
2951
|
--pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
|
|
2763
2952
|
transform: translate(-0.05rem, -50%);
|
|
2764
2953
|
animation-name: tooltip-caret-slide;
|
|
@@ -2779,28 +2968,23 @@ progress::-moz-progress-bar {
|
|
|
2779
2968
|
opacity: 1;
|
|
2780
2969
|
}
|
|
2781
2970
|
}
|
|
2782
|
-
|
|
2783
2971
|
/**
|
|
2784
2972
|
* Accessibility & User interaction
|
|
2785
2973
|
*/
|
|
2786
2974
|
[aria-controls] {
|
|
2787
2975
|
cursor: pointer;
|
|
2788
2976
|
}
|
|
2789
|
-
|
|
2790
|
-
[aria-disabled=true],
|
|
2977
|
+
[aria-disabled="true"],
|
|
2791
2978
|
[disabled] {
|
|
2792
2979
|
cursor: not-allowed;
|
|
2793
2980
|
}
|
|
2794
|
-
|
|
2795
|
-
[aria-hidden=false][hidden] {
|
|
2981
|
+
[aria-hidden="false"][hidden] {
|
|
2796
2982
|
display: initial;
|
|
2797
2983
|
}
|
|
2798
|
-
|
|
2799
|
-
[aria-hidden=false][hidden]:not(:focus) {
|
|
2984
|
+
[aria-hidden="false"][hidden]:not(:focus) {
|
|
2800
2985
|
clip: rect(0, 0, 0, 0);
|
|
2801
2986
|
position: absolute;
|
|
2802
2987
|
}
|
|
2803
|
-
|
|
2804
2988
|
a,
|
|
2805
2989
|
area,
|
|
2806
2990
|
button,
|
|
@@ -2812,18 +2996,16 @@ textarea,
|
|
|
2812
2996
|
[tabindex] {
|
|
2813
2997
|
-ms-touch-action: manipulation;
|
|
2814
2998
|
}
|
|
2815
|
-
|
|
2816
|
-
[dir=rtl] {
|
|
2999
|
+
[dir="rtl"] {
|
|
2817
3000
|
direction: rtl;
|
|
2818
3001
|
}
|
|
2819
|
-
|
|
2820
3002
|
/**
|
|
2821
3003
|
* Reduce Motion Features
|
|
2822
3004
|
*/
|
|
2823
3005
|
@media (prefers-reduced-motion: reduce) {
|
|
2824
|
-
*:not([aria-busy=true]),
|
|
2825
|
-
:not([aria-busy=true])::before,
|
|
2826
|
-
:not([aria-busy=true])::after {
|
|
3006
|
+
*:not([aria-busy="true"]),
|
|
3007
|
+
:not([aria-busy="true"])::before,
|
|
3008
|
+
:not([aria-busy="true"])::after {
|
|
2827
3009
|
background-attachment: initial !important;
|
|
2828
3010
|
animation-duration: 1ms !important;
|
|
2829
3011
|
animation-delay: -1ms !important;
|