@primer/css 0.0.0-2021926222917 → 0.0.0-2021926234650
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/CHANGELOG.md +1 -1
- package/actionlist/action-list-item.scss +57 -59
- package/actionlist/action-list.scss +7 -7
- package/dist/actionlist.css +1 -1
- package/dist/actionlist.css.map +1 -1
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/meta.json +52 -52
- package/dist/primer.css +1 -1
- package/dist/primer.css.map +1 -1
- package/dist/stats/actionlist.json +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
|
|
21
21
|
// a href
|
|
22
|
-
.ActionList-
|
|
22
|
+
.ActionList-content {
|
|
23
23
|
text-decoration: none;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
// only hover li without list as children
|
|
28
|
-
&:not(.ActionList-item--
|
|
28
|
+
&:not(.ActionList-item--hasSubItem) {
|
|
29
29
|
&:hover {
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
background-color: var(--color-action-list-item-default-hover-bg);
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
&:hover,
|
|
57
57
|
&:active {
|
|
58
58
|
// hide dividers
|
|
59
|
-
.ActionList-item-
|
|
60
|
-
+ .ActionList-item .ActionList-item-
|
|
59
|
+
.ActionList-item-label::before,
|
|
60
|
+
+ .ActionList-item .ActionList-item-label::before {
|
|
61
61
|
visibility: hidden;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
|
|
66
66
|
// target contents of li if sub-item (li wraps item label + nested ul)
|
|
67
67
|
// collapse styles here
|
|
68
|
-
&.ActionList-item--
|
|
68
|
+
&.ActionList-item--hasSubItem {
|
|
69
69
|
// first child
|
|
70
|
-
> .ActionList-
|
|
70
|
+
> .ActionList-content {
|
|
71
71
|
&:hover {
|
|
72
72
|
background-color: var(--color-action-list-item-default-hover-bg);
|
|
73
73
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
|
|
77
77
|
// active state [aria-current]
|
|
78
78
|
|
|
79
|
-
&.ActionList-item--
|
|
79
|
+
&.ActionList-item--navActive:not(.ActionList-item--danger) {
|
|
80
80
|
background: var(--color-action-list-item-default-selected-bg);
|
|
81
81
|
|
|
82
82
|
&::before,
|
|
@@ -100,29 +100,29 @@
|
|
|
100
100
|
// collapsible item [aria-expanded]
|
|
101
101
|
|
|
102
102
|
&[aria-expanded='true'] {
|
|
103
|
-
.ActionList-item-
|
|
103
|
+
.ActionList-item-collapseIcon {
|
|
104
104
|
transition: transform 120ms linear;
|
|
105
105
|
transform: scaleY(-1);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.ActionList--
|
|
108
|
+
.ActionList--subGroup {
|
|
109
109
|
display: block;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
&.ActionList-item--
|
|
113
|
-
> .ActionList-
|
|
112
|
+
&.ActionList-item--hasSubItem {
|
|
113
|
+
> .ActionList-content > .ActionList-item-label {
|
|
114
114
|
font-weight: $font-weight-bold;
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
&[aria-expanded='false'] {
|
|
120
|
-
.ActionList-item-
|
|
120
|
+
.ActionList-item-collapseIcon {
|
|
121
121
|
transition: transform 120ms linear;
|
|
122
122
|
transform: scaleY(1);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
.ActionList--
|
|
125
|
+
.ActionList--subGroup {
|
|
126
126
|
display: none;
|
|
127
127
|
}
|
|
128
128
|
}
|
|
@@ -133,14 +133,14 @@
|
|
|
133
133
|
&[aria-checked='true'],
|
|
134
134
|
&[aria-selected='true'] {
|
|
135
135
|
// multiselect checkmark
|
|
136
|
-
.ActionList-item-
|
|
136
|
+
.ActionList-item-multiSelectCheckmark {
|
|
137
137
|
visibility: visible;
|
|
138
138
|
opacity: 1;
|
|
139
139
|
transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// singleselect checkmark
|
|
143
|
-
.ActionList-item-
|
|
143
|
+
.ActionList-item-singleSelectCheckmark {
|
|
144
144
|
visibility: visible;
|
|
145
145
|
|
|
146
146
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
@@ -149,14 +149,14 @@
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
// checkbox
|
|
152
|
-
.ActionList-item-
|
|
153
|
-
.ActionList-item-
|
|
152
|
+
.ActionList-item-multiSelectIcon {
|
|
153
|
+
.ActionList-item-multiSelectIconRect {
|
|
154
154
|
fill: var(--color-accent-fg);
|
|
155
155
|
stroke: var(--color-accent-fg);
|
|
156
156
|
stroke-width: $border-width;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
|
-
.ActionList-item-
|
|
159
|
+
.ActionList-item-multiSelectCheckmark {
|
|
160
160
|
fill: var(--color-fg-on-emphasis);
|
|
161
161
|
}
|
|
162
162
|
}
|
|
@@ -165,16 +165,14 @@
|
|
|
165
165
|
&[aria-checked='false'],
|
|
166
166
|
&[aria-selected='false'] {
|
|
167
167
|
// multiselect checkmark
|
|
168
|
-
.ActionList-item-
|
|
168
|
+
.ActionList-item-multiSelectCheckmark {
|
|
169
169
|
visibility: hidden;
|
|
170
170
|
opacity: 0;
|
|
171
|
-
transition:
|
|
172
|
-
visibility 0 linear $actionList-item-checkmark-transition-timing,
|
|
173
|
-
opacity $actionList-item-checkmark-transition-timing;
|
|
171
|
+
transition: visibility 0 linear $actionList-item-checkmark-transition-timing, opacity $actionList-item-checkmark-transition-timing;
|
|
174
172
|
}
|
|
175
173
|
|
|
176
174
|
// singleselect checkmark
|
|
177
|
-
.ActionList-item-
|
|
175
|
+
.ActionList-item-singleSelectCheckmark {
|
|
178
176
|
visibility: hidden;
|
|
179
177
|
transition: visibility 0s linear 200ms;
|
|
180
178
|
clip-path: inset(16px 0 0 0);
|
|
@@ -185,15 +183,15 @@
|
|
|
185
183
|
}
|
|
186
184
|
|
|
187
185
|
// checkbox
|
|
188
|
-
.ActionList-item-
|
|
189
|
-
.ActionList-item-
|
|
186
|
+
.ActionList-item-multiSelectIcon {
|
|
187
|
+
.ActionList-item-multiSelectIconRect {
|
|
190
188
|
fill: var(--color-canvas-default);
|
|
191
189
|
stroke: var(--color-border-default);
|
|
192
190
|
stroke-width: $border-width;
|
|
193
191
|
}
|
|
194
192
|
}
|
|
195
193
|
|
|
196
|
-
.ActionList-item-
|
|
194
|
+
.ActionList-item-multiSelectIconRect {
|
|
197
195
|
fill: var(--color-canvas-default);
|
|
198
196
|
border: $border-width $border-style var(--color-border-default);
|
|
199
197
|
}
|
|
@@ -222,7 +220,7 @@
|
|
|
222
220
|
// variants
|
|
223
221
|
|
|
224
222
|
&.ActionList-item--danger {
|
|
225
|
-
.ActionList-item-
|
|
223
|
+
.ActionList-item-label {
|
|
226
224
|
color: var(--color-danger-fg);
|
|
227
225
|
}
|
|
228
226
|
|
|
@@ -230,7 +228,7 @@
|
|
|
230
228
|
&:hover {
|
|
231
229
|
background: var(--color-action-list-item-danger-hover-bg);
|
|
232
230
|
|
|
233
|
-
.ActionList-item-
|
|
231
|
+
.ActionList-item-label {
|
|
234
232
|
color: var(--color-action-list-item-danger-hover-text);
|
|
235
233
|
}
|
|
236
234
|
}
|
|
@@ -248,7 +246,7 @@
|
|
|
248
246
|
}
|
|
249
247
|
|
|
250
248
|
// span or a href
|
|
251
|
-
.ActionList-
|
|
249
|
+
.ActionList-content {
|
|
252
250
|
position: relative;
|
|
253
251
|
display: grid;
|
|
254
252
|
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
|
@@ -273,11 +271,11 @@
|
|
|
273
271
|
|
|
274
272
|
// sizes
|
|
275
273
|
|
|
276
|
-
&.ActionList-
|
|
274
|
+
&.ActionList-content--sizeMedium {
|
|
277
275
|
grid-template-rows: minmax($actionList-item-height-md, max-content); // 28px with 12px padding = [40px total]
|
|
278
276
|
}
|
|
279
277
|
|
|
280
|
-
&.ActionList-
|
|
278
|
+
&.ActionList-content--sizeLarge {
|
|
281
279
|
grid-template-rows: minmax($actionList-item-height-lg, max-content); // 36px with 12px padding = [48px total]
|
|
282
280
|
}
|
|
283
281
|
|
|
@@ -286,9 +284,9 @@
|
|
|
286
284
|
grid-template-rows: minmax($actionList-item-height-lg, max-content);
|
|
287
285
|
}
|
|
288
286
|
|
|
289
|
-
&.ActionList-
|
|
287
|
+
&.ActionList-content--blockDescription {
|
|
290
288
|
// if leading/trailing visual, align with first line of content
|
|
291
|
-
.ActionList-item-
|
|
289
|
+
.ActionList-item-visual {
|
|
292
290
|
place-self: start;
|
|
293
291
|
}
|
|
294
292
|
}
|
|
@@ -296,58 +294,58 @@
|
|
|
296
294
|
|
|
297
295
|
// place children on grid
|
|
298
296
|
|
|
299
|
-
.ActionList-item-
|
|
297
|
+
.ActionList-item-action--leading {
|
|
300
298
|
grid-area: leadingAction;
|
|
301
299
|
}
|
|
302
300
|
|
|
303
|
-
.ActionList-item-
|
|
301
|
+
.ActionList-item-visual--leading {
|
|
304
302
|
grid-area: leadingVisual;
|
|
305
303
|
}
|
|
306
304
|
|
|
307
|
-
.ActionList-item-
|
|
305
|
+
.ActionList-item-label {
|
|
308
306
|
grid-area: label;
|
|
309
307
|
}
|
|
310
308
|
|
|
311
|
-
.ActionList-item-
|
|
309
|
+
.ActionList-item-visual--trailing {
|
|
312
310
|
grid-area: trailingVisual;
|
|
313
311
|
}
|
|
314
312
|
|
|
315
|
-
.ActionList-item-
|
|
313
|
+
.ActionList-item-action--trailing {
|
|
316
314
|
grid-area: trailingAction;
|
|
317
315
|
}
|
|
318
316
|
|
|
319
317
|
// wrapper span
|
|
320
|
-
.ActionList-item-
|
|
321
|
-
.ActionList-item-
|
|
318
|
+
.ActionList-item-blockDescription,
|
|
319
|
+
.ActionList-item-inlineDescription {
|
|
322
320
|
grid-area: label;
|
|
323
321
|
display: flex;
|
|
324
322
|
|
|
325
|
-
.ActionList-item-
|
|
323
|
+
.ActionList-item-label {
|
|
326
324
|
font-weight: $font-weight-bold;
|
|
327
325
|
}
|
|
328
326
|
}
|
|
329
327
|
|
|
330
328
|
// block
|
|
331
|
-
.ActionList-item-
|
|
329
|
+
.ActionList-item-blockDescription {
|
|
332
330
|
flex-direction: column;
|
|
333
331
|
|
|
334
|
-
.ActionList-item-
|
|
332
|
+
.ActionList-item-description {
|
|
335
333
|
margin-top: $spacer-1;
|
|
336
334
|
}
|
|
337
335
|
}
|
|
338
336
|
|
|
339
337
|
// inline
|
|
340
|
-
.ActionList-item-
|
|
338
|
+
.ActionList-item-inlineDescription {
|
|
341
339
|
flex-direction: row;
|
|
342
340
|
align-items: baseline;
|
|
343
341
|
|
|
344
|
-
.ActionList-item-
|
|
342
|
+
.ActionList-item-description {
|
|
345
343
|
margin-left: $actionList-item-padding-horizontal;
|
|
346
344
|
}
|
|
347
345
|
}
|
|
348
346
|
|
|
349
347
|
// description
|
|
350
|
-
.ActionList-item-
|
|
348
|
+
.ActionList-item-description {
|
|
351
349
|
font-size: $font-size-small;
|
|
352
350
|
line-height: $lh-default;
|
|
353
351
|
color: var(--color-fg-muted);
|
|
@@ -355,8 +353,8 @@
|
|
|
355
353
|
|
|
356
354
|
// helper for grid alignment with multi-line content
|
|
357
355
|
// span wrapping svg or text
|
|
358
|
-
.ActionList-item-
|
|
359
|
-
.ActionList-item-
|
|
356
|
+
.ActionList-item-visual,
|
|
357
|
+
.ActionList-item-action {
|
|
360
358
|
display: flex;
|
|
361
359
|
min-height: $actionList-item-height-sm;
|
|
362
360
|
color: var(--color-fg-muted); // if visual is text
|
|
@@ -365,43 +363,43 @@
|
|
|
365
363
|
}
|
|
366
364
|
|
|
367
365
|
// text
|
|
368
|
-
.ActionList-item-
|
|
366
|
+
.ActionList-item-label {
|
|
369
367
|
position: relative; // for pseudo dividers
|
|
370
368
|
font-weight: $font-weight-normal;
|
|
371
369
|
color: var(--color-fg-default);
|
|
372
370
|
}
|
|
373
371
|
|
|
374
372
|
// nested lists (only supports 1 level currently)
|
|
375
|
-
// target ActionList-item--
|
|
373
|
+
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
|
376
374
|
|
|
377
|
-
.ActionList-item--
|
|
375
|
+
.ActionList-item--subItem > .ActionList-content {
|
|
378
376
|
font-size: $font-size-small;
|
|
379
377
|
}
|
|
380
378
|
|
|
381
379
|
// no leading visual
|
|
382
|
-
.ActionList--
|
|
383
|
-
.ActionList-item--
|
|
380
|
+
.ActionList--subGroup {
|
|
381
|
+
.ActionList-item--subItem {
|
|
384
382
|
padding-left: $spacer-3;
|
|
385
383
|
}
|
|
386
384
|
}
|
|
387
385
|
|
|
388
386
|
// has 16px leading visual
|
|
389
|
-
.ActionList-
|
|
390
|
-
.ActionList-item--
|
|
387
|
+
.ActionList-content--visual16 + .ActionList--subGroup {
|
|
388
|
+
.ActionList-item--subItem {
|
|
391
389
|
padding-left: $spacer-4;
|
|
392
390
|
}
|
|
393
391
|
}
|
|
394
392
|
|
|
395
393
|
// has 20px leading visual
|
|
396
|
-
.ActionList-
|
|
397
|
-
.ActionList-item--
|
|
394
|
+
.ActionList-content--visual20 + .ActionList--subGroup {
|
|
395
|
+
.ActionList-item--subItem {
|
|
398
396
|
padding-left: $spacer-3 * 1.75;
|
|
399
397
|
}
|
|
400
398
|
}
|
|
401
399
|
|
|
402
400
|
// has 24px leading visual
|
|
403
|
-
.ActionList-
|
|
404
|
-
.ActionList-item--
|
|
401
|
+
.ActionList-content--visual24 + .ActionList--subGroup {
|
|
402
|
+
.ActionList-item--subItem {
|
|
405
403
|
padding-left: $spacer-5;
|
|
406
404
|
}
|
|
407
405
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
// dividers
|
|
10
10
|
|
|
11
11
|
.ActionList--divided {
|
|
12
|
-
.ActionList-item-
|
|
12
|
+
.ActionList-item-label::before {
|
|
13
13
|
position: absolute;
|
|
14
14
|
top: -$actionList-item-padding-vertical;
|
|
15
15
|
display: block;
|
|
@@ -20,16 +20,16 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
// hide divider if item is active
|
|
23
|
-
.ActionList-item--
|
|
24
|
-
.ActionList-item-
|
|
25
|
-
+ .ActionList-item .ActionList-item-
|
|
23
|
+
.ActionList-item--navActive {
|
|
24
|
+
.ActionList-item-label::before,
|
|
25
|
+
+ .ActionList-item .ActionList-item-label::before {
|
|
26
26
|
visibility: hidden;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.ActionList-item:first-of-type .ActionList-item-
|
|
32
|
-
.ActionList-sectionDivider + .ActionList-item .ActionList-item-
|
|
33
|
-
.ActionList-sectionHeader + .ActionList-item .ActionList-item-
|
|
31
|
+
.ActionList-item:first-of-type .ActionList-item-label::before,
|
|
32
|
+
.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before,
|
|
33
|
+
.ActionList-sectionHeader + .ActionList-item .ActionList-item-label::before {
|
|
34
34
|
visibility: hidden;
|
|
35
35
|
}
|
package/dist/actionlist.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.ActionList{padding:8px}.ActionList--divided .ActionList-item-content--label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--nav-active .ActionList-item-content--label::before,.ActionList--divided .ActionList-item--nav-active+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-content--label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-content--label::before,.ActionList-sectionHeader+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item{position:relative;list-style:none;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-item-content,.ActionList-item:active .ActionList-item-content{text-decoration:none}.ActionList-item:not(.ActionList-item--has-sub-item):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--has-sub-item):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--has-sub-item):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 0 0 rgba(0,0,0,.04);transform:scale(1)}100%{box-shadow:inset 0 3px 9px rgba(0,0,0,.04);transform:scale(0.97)}}.ActionList-item:not(.ActionList-item--has-sub-item):hover .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):hover+.ActionList-item .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):active .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):active+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item.ActionList-item--has-sub-item>.ActionList-item-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-expanded=true] .ActionList-item-content--collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--sub-group{display:block}.ActionList-item[aria-expanded=true].ActionList-item--has-sub-item>.ActionList-item-content>.ActionList-item-content--label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-content--collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--sub-group{display:none}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect-checkmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-checkmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-content--label{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-content--label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-item-content{position:relative;display:grid;padding:6px 8px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:minmax(20px, max-content);grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(min-content, auto) min-content min-content;align-items:center}.ActionList-item-content>:not(:last-child){margin-right:8px}.ActionList-item-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-item-content.ActionList-item-content--sizeMedium{grid-template-rows:minmax(28px, max-content)}.ActionList-item-content.ActionList-item-content--sizeLarge{grid-template-rows:minmax(36px, max-content)}@media(pointer: coarse){.ActionList-item-content{grid-template-rows:minmax(36px, max-content)}}.ActionList-item-content.ActionList-item-content--blockDescription .ActionList-item-content--visual{place-self:start}.ActionList-item-content--action-leading{grid-area:leadingAction}.ActionList-item-content--visual-leading{grid-area:leadingVisual}.ActionList-item-content--label{grid-area:label}.ActionList-item-content--visual-trailing{grid-area:trailingVisual}.ActionList-item-content--action-trailing{grid-area:trailingAction}.ActionList-item-content--label-blockDescription,.ActionList-item-content--label-inlineDescription{grid-area:label;display:flex}.ActionList-item-content--label-blockDescription .ActionList-item-content--label,.ActionList-item-content--label-inlineDescription .ActionList-item-content--label{font-weight:600}.ActionList-item-content--label-blockDescription{flex-direction:column}.ActionList-item-content--label-blockDescription .ActionList-item-content--description{margin-top:4px}.ActionList-item-content--label-inlineDescription{flex-direction:row;align-items:baseline}.ActionList-item-content--label-inlineDescription .ActionList-item-content--description{margin-left:8px}.ActionList-item-content--description{font-size:12px;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-content--visual,.ActionList-item-content--action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-content--label{position:relative;font-weight:400;color:var(--color-fg-default)}.ActionList-item--sub-item>.ActionList-item-content{font-size:12px}.ActionList--sub-group .ActionList-item--sub-item{padding-left:16px}.ActionList-item-content--visual--16+.ActionList--sub-group .ActionList-item--sub-item{padding-left:24px}.ActionList-item-content--visual--20+.ActionList--sub-group .ActionList-item--sub-item{padding-left:28px}.ActionList-item-content--visual--24+.ActionList--sub-group .ActionList-item--sub-item{padding-left:32px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider .ActionList-sectionDivider--description{font-size:12px;font-weight:400}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
|
|
1
|
+
.ActionList{padding:8px}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before,.ActionList-sectionHeader+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item{position:relative;list-style:none;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}.ActionList-item:not(.ActionList-item--hasSubItem):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 0 0 rgba(0,0,0,.04);transform:scale(1)}100%{box-shadow:inset 0 3px 9px rgba(0,0,0,.04);transform:scale(0.97)}}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{display:block}.ActionList-item[aria-expanded=true].ActionList-item--hasSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{display:none}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:minmax(20px, max-content);grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(min-content, auto) min-content min-content;align-items:center}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content.ActionList-content--sizeMedium{grid-template-rows:minmax(28px, max-content)}.ActionList-content.ActionList-content--sizeLarge{grid-template-rows:minmax(36px, max-content)}@media(pointer: coarse){.ActionList-content{grid-template-rows:minmax(36px, max-content)}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-blockDescription,.ActionList-item-inlineDescription{grid-area:label;display:flex}.ActionList-item-blockDescription .ActionList-item-label,.ActionList-item-inlineDescription .ActionList-item-label{font-weight:600}.ActionList-item-blockDescription{flex-direction:column}.ActionList-item-blockDescription .ActionList-item-description{margin-top:4px}.ActionList-item-inlineDescription{flex-direction:row;align-items:baseline}.ActionList-item-inlineDescription .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;color:var(--color-fg-default)}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList--subGroup .ActionList-item--subItem{padding-left:16px}.ActionList-content--visual16+.ActionList--subGroup .ActionList-item--subItem{padding-left:24px}.ActionList-content--visual20+.ActionList--subGroup .ActionList-item--subItem{padding-left:28px}.ActionList-content--visual24+.ActionList--subGroup .ActionList-item--subItem{padding-left:32px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider .ActionList-sectionDivider--description{font-size:12px;font-weight:400}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
|
|
2
2
|
/*# sourceMappingURL=actionlist.css.map */
|
package/dist/actionlist.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"AAmhBA,YAAA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
|