@primer/css 0.0.0-202192617029 → 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-divider.scss +8 -8
- package/actionlist/action-list-item.scss +103 -99
- package/actionlist/action-list-variables.scss +7 -0
- package/actionlist/action-list.scss +13 -12
- package/actionlist/index.scss +1 -0
- 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 +100 -100
- 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 +2 -1
- package/actionlist/action-list-helpers-temporary.scss +0 -25
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
// stylelint-disable primer/spacing
|
|
2
2
|
|
|
3
3
|
// emtpy divider
|
|
4
4
|
|
|
5
5
|
.ActionList-sectionDivider {
|
|
6
6
|
// has children
|
|
7
7
|
&:not(:empty) {
|
|
8
|
-
|
|
8
|
+
display: flex;
|
|
9
|
+
padding: ($spacer-1 * 1.5) $spacer-2;
|
|
9
10
|
font-size: $font-size-small;
|
|
10
11
|
font-weight: $font-weight-bold;
|
|
11
12
|
color: var(--color-fg-muted);
|
|
12
|
-
display: flex;
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
// no children
|
|
17
17
|
&:empty {
|
|
18
18
|
height: 1px;
|
|
19
|
-
background: var(--color-action-list-item-inline-divider);
|
|
20
|
-
border: 0;
|
|
21
|
-
margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
|
|
22
19
|
padding: 0;
|
|
20
|
+
margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
|
|
23
21
|
list-style: none;
|
|
22
|
+
background: var(--color-action-list-item-inline-divider);
|
|
23
|
+
border: 0;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
// secondary description text
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
.ActionList-sectionDivider--filled {
|
|
34
34
|
margin: $spacer-2 ($spacer-2 * -1);
|
|
35
35
|
background: var(--color-canvas-subtle);
|
|
36
|
-
border-top:
|
|
37
|
-
border-bottom:
|
|
36
|
+
border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
|
|
37
|
+
border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
|
|
38
38
|
|
|
39
39
|
// if no children, treat as divider
|
|
40
40
|
&:empty {
|
|
@@ -1,61 +1,63 @@
|
|
|
1
|
-
|
|
1
|
+
// stylelint-disable selector-max-specificity, max-nesting-depth, primer/spacing, no-duplicate-selectors
|
|
2
|
+
@import './action-list-variables.scss';
|
|
2
3
|
|
|
3
4
|
@mixin focusOutline {
|
|
4
|
-
outline: none;
|
|
5
|
-
box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
|
|
6
5
|
position: relative;
|
|
7
6
|
z-index: 1;
|
|
7
|
+
outline: none;
|
|
8
|
+
box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
// <li>
|
|
11
12
|
.ActionList-item {
|
|
12
|
-
list-style: none;
|
|
13
13
|
position: relative;
|
|
14
|
-
|
|
14
|
+
list-style: none;
|
|
15
|
+
border-radius: $border-radius;
|
|
15
16
|
|
|
16
17
|
&:hover,
|
|
17
18
|
&:active {
|
|
18
19
|
cursor: pointer;
|
|
19
20
|
|
|
20
21
|
// a href
|
|
21
|
-
.ActionList-
|
|
22
|
+
.ActionList-content {
|
|
22
23
|
text-decoration: none;
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
// only hover li without list as children
|
|
27
|
-
&:not(.ActionList-item--
|
|
28
|
+
&:not(.ActionList-item--hasSubItem) {
|
|
28
29
|
&:hover {
|
|
29
|
-
background-color: var(--color-action-list-item-default-hover-bg);
|
|
30
30
|
cursor: pointer;
|
|
31
|
+
background-color: var(--color-action-list-item-default-hover-bg);
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
&:active {
|
|
34
35
|
background: var(--color-action-list-item-default-active-bg);
|
|
35
36
|
|
|
36
37
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
37
|
-
animation: ActionList-item-active-bg 4s forwards
|
|
38
|
+
animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
|
|
38
39
|
}
|
|
39
40
|
|
|
41
|
+
// stylelint-disable primer/box-shadow
|
|
40
42
|
@keyframes ActionList-item-active-bg {
|
|
41
|
-
0% {
|
|
42
|
-
}
|
|
43
43
|
50% {
|
|
44
|
-
transform: scale(1);
|
|
45
44
|
box-shadow: inset 0 0 0 rgba(#000, 0.04);
|
|
45
|
+
transform: scale(1);
|
|
46
46
|
}
|
|
47
|
+
|
|
47
48
|
100% {
|
|
48
|
-
transform: scale(0.97);
|
|
49
49
|
box-shadow: inset 0 3px 9px rgba(#000, 0.04);
|
|
50
|
+
transform: scale(0.97);
|
|
50
51
|
}
|
|
51
52
|
}
|
|
53
|
+
// stylelint-enable primer/box-shadow
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
&:hover,
|
|
55
57
|
&:active {
|
|
56
58
|
// hide dividers
|
|
57
|
-
.ActionList-item-
|
|
58
|
-
+ .ActionList-item .ActionList-item-
|
|
59
|
+
.ActionList-item-label::before,
|
|
60
|
+
+ .ActionList-item .ActionList-item-label::before {
|
|
59
61
|
visibility: hidden;
|
|
60
62
|
}
|
|
61
63
|
}
|
|
@@ -63,9 +65,9 @@
|
|
|
63
65
|
|
|
64
66
|
// target contents of li if sub-item (li wraps item label + nested ul)
|
|
65
67
|
// collapse styles here
|
|
66
|
-
&.ActionList-item--
|
|
68
|
+
&.ActionList-item--hasSubItem {
|
|
67
69
|
// first child
|
|
68
|
-
> .ActionList-
|
|
70
|
+
> .ActionList-content {
|
|
69
71
|
&:hover {
|
|
70
72
|
background-color: var(--color-action-list-item-default-hover-bg);
|
|
71
73
|
}
|
|
@@ -74,52 +76,53 @@
|
|
|
74
76
|
|
|
75
77
|
// active state [aria-current]
|
|
76
78
|
|
|
77
|
-
&.ActionList-item--
|
|
79
|
+
&.ActionList-item--navActive:not(.ActionList-item--danger) {
|
|
78
80
|
background: var(--color-action-list-item-default-selected-bg);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
|
|
82
|
+
&::before,
|
|
83
|
+
+ .ActionList-item::before {
|
|
81
84
|
visibility: hidden;
|
|
82
85
|
}
|
|
83
86
|
|
|
84
87
|
// blue accent line
|
|
85
|
-
|
|
86
|
-
content: '';
|
|
87
|
-
width: $spacer-1;
|
|
88
|
-
height: $spacer-4;
|
|
89
|
-
border-radius: $border-radius-1;
|
|
88
|
+
&::after {
|
|
90
89
|
position: absolute;
|
|
90
|
+
top: calc(50% - ($spacer-4 * 0.5));
|
|
91
91
|
left: -$actionList-item-padding-horizontal;
|
|
92
|
-
|
|
92
|
+
width: $spacer-1;
|
|
93
|
+
height: $spacer-4;
|
|
94
|
+
content: '';
|
|
93
95
|
background: var(--color-accent-fg);
|
|
96
|
+
border-radius: $border-radius;
|
|
94
97
|
}
|
|
95
98
|
}
|
|
96
99
|
|
|
97
100
|
// collapsible item [aria-expanded]
|
|
98
101
|
|
|
99
102
|
&[aria-expanded='true'] {
|
|
100
|
-
.ActionList-item-
|
|
101
|
-
transform: scaleY(-1);
|
|
103
|
+
.ActionList-item-collapseIcon {
|
|
102
104
|
transition: transform 120ms linear;
|
|
105
|
+
transform: scaleY(-1);
|
|
103
106
|
}
|
|
104
107
|
|
|
105
|
-
.ActionList--
|
|
108
|
+
.ActionList--subGroup {
|
|
106
109
|
display: block;
|
|
107
110
|
}
|
|
108
111
|
|
|
109
|
-
&.ActionList-item--
|
|
110
|
-
> .ActionList-
|
|
112
|
+
&.ActionList-item--hasSubItem {
|
|
113
|
+
> .ActionList-content > .ActionList-item-label {
|
|
111
114
|
font-weight: $font-weight-bold;
|
|
112
115
|
}
|
|
113
116
|
}
|
|
114
117
|
}
|
|
115
118
|
|
|
116
119
|
&[aria-expanded='false'] {
|
|
117
|
-
.ActionList-item-
|
|
118
|
-
transform: scaleY(1);
|
|
120
|
+
.ActionList-item-collapseIcon {
|
|
119
121
|
transition: transform 120ms linear;
|
|
122
|
+
transform: scaleY(1);
|
|
120
123
|
}
|
|
121
124
|
|
|
122
|
-
.ActionList--
|
|
125
|
+
.ActionList--subGroup {
|
|
123
126
|
display: none;
|
|
124
127
|
}
|
|
125
128
|
}
|
|
@@ -130,14 +133,14 @@
|
|
|
130
133
|
&[aria-checked='true'],
|
|
131
134
|
&[aria-selected='true'] {
|
|
132
135
|
// multiselect checkmark
|
|
133
|
-
.ActionList-item-
|
|
136
|
+
.ActionList-item-multiSelectCheckmark {
|
|
134
137
|
visibility: visible;
|
|
135
138
|
opacity: 1;
|
|
136
|
-
transition: visibility
|
|
139
|
+
transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
|
|
137
140
|
}
|
|
138
141
|
|
|
139
142
|
// singleselect checkmark
|
|
140
|
-
.ActionList-item-
|
|
143
|
+
.ActionList-item-singleSelectCheckmark {
|
|
141
144
|
visibility: visible;
|
|
142
145
|
|
|
143
146
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
@@ -146,14 +149,14 @@
|
|
|
146
149
|
}
|
|
147
150
|
|
|
148
151
|
// checkbox
|
|
149
|
-
.ActionList-item-
|
|
150
|
-
.ActionList-item-
|
|
152
|
+
.ActionList-item-multiSelectIcon {
|
|
153
|
+
.ActionList-item-multiSelectIconRect {
|
|
151
154
|
fill: var(--color-accent-fg);
|
|
152
155
|
stroke: var(--color-accent-fg);
|
|
153
156
|
stroke-width: $border-width;
|
|
154
157
|
}
|
|
155
158
|
|
|
156
|
-
.ActionList-item-
|
|
159
|
+
.ActionList-item-multiSelectCheckmark {
|
|
157
160
|
fill: var(--color-fg-on-emphasis);
|
|
158
161
|
}
|
|
159
162
|
}
|
|
@@ -162,18 +165,17 @@
|
|
|
162
165
|
&[aria-checked='false'],
|
|
163
166
|
&[aria-selected='false'] {
|
|
164
167
|
// multiselect checkmark
|
|
165
|
-
.ActionList-item-
|
|
168
|
+
.ActionList-item-multiSelectCheckmark {
|
|
166
169
|
visibility: hidden;
|
|
167
170
|
opacity: 0;
|
|
168
|
-
transition: visibility
|
|
169
|
-
opacity $actionList-item-checkmark-transition-timing;
|
|
171
|
+
transition: visibility 0 linear $actionList-item-checkmark-transition-timing, opacity $actionList-item-checkmark-transition-timing;
|
|
170
172
|
}
|
|
171
173
|
|
|
172
174
|
// singleselect checkmark
|
|
173
|
-
.ActionList-item-
|
|
175
|
+
.ActionList-item-singleSelectCheckmark {
|
|
174
176
|
visibility: hidden;
|
|
175
|
-
clip-path: inset(16px 0 0 0);
|
|
176
177
|
transition: visibility 0s linear 200ms;
|
|
178
|
+
clip-path: inset(16px 0 0 0);
|
|
177
179
|
|
|
178
180
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
179
181
|
animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
|
@@ -181,15 +183,15 @@
|
|
|
181
183
|
}
|
|
182
184
|
|
|
183
185
|
// checkbox
|
|
184
|
-
.ActionList-item-
|
|
185
|
-
.ActionList-item-
|
|
186
|
+
.ActionList-item-multiSelectIcon {
|
|
187
|
+
.ActionList-item-multiSelectIconRect {
|
|
186
188
|
fill: var(--color-canvas-default);
|
|
187
189
|
stroke: var(--color-border-default);
|
|
188
190
|
stroke-width: $border-width;
|
|
189
191
|
}
|
|
190
192
|
}
|
|
191
193
|
|
|
192
|
-
.ActionList-item-
|
|
194
|
+
.ActionList-item-multiSelectIconRect {
|
|
193
195
|
fill: var(--color-canvas-default);
|
|
194
196
|
border: $border-width $border-style var(--color-border-default);
|
|
195
197
|
}
|
|
@@ -199,6 +201,7 @@
|
|
|
199
201
|
from {
|
|
200
202
|
clip-path: inset(16px 0 0 0);
|
|
201
203
|
}
|
|
204
|
+
|
|
202
205
|
to {
|
|
203
206
|
clip-path: inset(0 0 0 0);
|
|
204
207
|
}
|
|
@@ -208,6 +211,7 @@
|
|
|
208
211
|
from {
|
|
209
212
|
clip-path: inset(0 0 0 0);
|
|
210
213
|
}
|
|
214
|
+
|
|
211
215
|
to {
|
|
212
216
|
clip-path: inset(16px 0 0 0);
|
|
213
217
|
}
|
|
@@ -216,7 +220,7 @@
|
|
|
216
220
|
// variants
|
|
217
221
|
|
|
218
222
|
&.ActionList-item--danger {
|
|
219
|
-
.ActionList-item-
|
|
223
|
+
.ActionList-item-label {
|
|
220
224
|
color: var(--color-danger-fg);
|
|
221
225
|
}
|
|
222
226
|
|
|
@@ -224,7 +228,7 @@
|
|
|
224
228
|
&:hover {
|
|
225
229
|
background: var(--color-action-list-item-danger-hover-bg);
|
|
226
230
|
|
|
227
|
-
.ActionList-item-
|
|
231
|
+
.ActionList-item-label {
|
|
228
232
|
color: var(--color-action-list-item-danger-hover-text);
|
|
229
233
|
}
|
|
230
234
|
}
|
|
@@ -242,22 +246,22 @@
|
|
|
242
246
|
}
|
|
243
247
|
|
|
244
248
|
// span or a href
|
|
245
|
-
.ActionList-
|
|
249
|
+
.ActionList-content {
|
|
250
|
+
position: relative;
|
|
246
251
|
display: grid;
|
|
247
|
-
grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
|
|
248
|
-
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
|
249
|
-
grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
|
|
250
|
-
align-items: center;
|
|
251
252
|
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
|
252
|
-
position: relative;
|
|
253
|
-
border-radius: $border-radius-2;
|
|
254
253
|
font-weight: $font-weight-normal;
|
|
255
254
|
color: var(--color-fg-default);
|
|
256
255
|
user-select: none;
|
|
256
|
+
border-radius: $border-radius;
|
|
257
257
|
transition: $actionList-item-bg-transition;
|
|
258
|
+
grid-template-rows: minmax($actionList-item-height-sm, max-content); // 20px with 12px padding = [32px total]
|
|
259
|
+
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
|
260
|
+
grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
|
|
261
|
+
align-items: center;
|
|
258
262
|
|
|
259
263
|
// column-gap persists with empty grid-areas, margin applies only when children exist
|
|
260
|
-
|
|
264
|
+
> :not(:last-child) {
|
|
261
265
|
margin-right: $spacer-2;
|
|
262
266
|
}
|
|
263
267
|
|
|
@@ -267,22 +271,22 @@
|
|
|
267
271
|
|
|
268
272
|
// sizes
|
|
269
273
|
|
|
270
|
-
&.ActionList-
|
|
271
|
-
grid-template-rows: minmax(
|
|
274
|
+
&.ActionList-content--sizeMedium {
|
|
275
|
+
grid-template-rows: minmax($actionList-item-height-md, max-content); // 28px with 12px padding = [40px total]
|
|
272
276
|
}
|
|
273
277
|
|
|
274
|
-
&.ActionList-
|
|
275
|
-
grid-template-rows: minmax(
|
|
278
|
+
&.ActionList-content--sizeLarge {
|
|
279
|
+
grid-template-rows: minmax($actionList-item-height-lg, max-content); // 36px with 12px padding = [48px total]
|
|
276
280
|
}
|
|
277
281
|
|
|
278
282
|
// On pointer:coarse (mobile), all list items are large
|
|
279
283
|
@media (pointer: coarse) {
|
|
280
|
-
grid-template-rows: minmax(
|
|
284
|
+
grid-template-rows: minmax($actionList-item-height-lg, max-content);
|
|
281
285
|
}
|
|
282
286
|
|
|
283
|
-
&.ActionList-
|
|
287
|
+
&.ActionList-content--blockDescription {
|
|
284
288
|
// if leading/trailing visual, align with first line of content
|
|
285
|
-
.ActionList-item-
|
|
289
|
+
.ActionList-item-visual {
|
|
286
290
|
place-self: start;
|
|
287
291
|
}
|
|
288
292
|
}
|
|
@@ -290,58 +294,58 @@
|
|
|
290
294
|
|
|
291
295
|
// place children on grid
|
|
292
296
|
|
|
293
|
-
.ActionList-item-
|
|
297
|
+
.ActionList-item-action--leading {
|
|
294
298
|
grid-area: leadingAction;
|
|
295
299
|
}
|
|
296
300
|
|
|
297
|
-
.ActionList-item-
|
|
301
|
+
.ActionList-item-visual--leading {
|
|
298
302
|
grid-area: leadingVisual;
|
|
299
303
|
}
|
|
300
304
|
|
|
301
|
-
.ActionList-item-
|
|
305
|
+
.ActionList-item-label {
|
|
302
306
|
grid-area: label;
|
|
303
307
|
}
|
|
304
308
|
|
|
305
|
-
.ActionList-item-
|
|
309
|
+
.ActionList-item-visual--trailing {
|
|
306
310
|
grid-area: trailingVisual;
|
|
307
311
|
}
|
|
308
312
|
|
|
309
|
-
.ActionList-item-
|
|
313
|
+
.ActionList-item-action--trailing {
|
|
310
314
|
grid-area: trailingAction;
|
|
311
315
|
}
|
|
312
316
|
|
|
313
317
|
// wrapper span
|
|
314
|
-
.ActionList-item-
|
|
315
|
-
.ActionList-item-
|
|
318
|
+
.ActionList-item-blockDescription,
|
|
319
|
+
.ActionList-item-inlineDescription {
|
|
316
320
|
grid-area: label;
|
|
317
321
|
display: flex;
|
|
318
322
|
|
|
319
|
-
.ActionList-item-
|
|
323
|
+
.ActionList-item-label {
|
|
320
324
|
font-weight: $font-weight-bold;
|
|
321
325
|
}
|
|
322
326
|
}
|
|
323
327
|
|
|
324
328
|
// block
|
|
325
|
-
.ActionList-item-
|
|
329
|
+
.ActionList-item-blockDescription {
|
|
326
330
|
flex-direction: column;
|
|
327
331
|
|
|
328
|
-
.ActionList-item-
|
|
332
|
+
.ActionList-item-description {
|
|
329
333
|
margin-top: $spacer-1;
|
|
330
334
|
}
|
|
331
335
|
}
|
|
332
336
|
|
|
333
337
|
// inline
|
|
334
|
-
.ActionList-item-
|
|
338
|
+
.ActionList-item-inlineDescription {
|
|
335
339
|
flex-direction: row;
|
|
336
340
|
align-items: baseline;
|
|
337
341
|
|
|
338
|
-
.ActionList-item-
|
|
342
|
+
.ActionList-item-description {
|
|
339
343
|
margin-left: $actionList-item-padding-horizontal;
|
|
340
344
|
}
|
|
341
345
|
}
|
|
342
346
|
|
|
343
347
|
// description
|
|
344
|
-
.ActionList-item-
|
|
348
|
+
.ActionList-item-description {
|
|
345
349
|
font-size: $font-size-small;
|
|
346
350
|
line-height: $lh-default;
|
|
347
351
|
color: var(--color-fg-muted);
|
|
@@ -349,53 +353,53 @@
|
|
|
349
353
|
|
|
350
354
|
// helper for grid alignment with multi-line content
|
|
351
355
|
// span wrapping svg or text
|
|
352
|
-
.ActionList-item-
|
|
353
|
-
.ActionList-item-
|
|
354
|
-
min-height: 20px;
|
|
356
|
+
.ActionList-item-visual,
|
|
357
|
+
.ActionList-item-action {
|
|
355
358
|
display: flex;
|
|
356
|
-
|
|
357
|
-
fill: var(--color-fg-muted);
|
|
359
|
+
min-height: $actionList-item-height-sm;
|
|
358
360
|
color: var(--color-fg-muted); // if visual is text
|
|
361
|
+
fill: var(--color-fg-muted);
|
|
362
|
+
align-items: center;
|
|
359
363
|
}
|
|
360
364
|
|
|
361
365
|
// text
|
|
362
|
-
.ActionList-item-
|
|
366
|
+
.ActionList-item-label {
|
|
367
|
+
position: relative; // for pseudo dividers
|
|
363
368
|
font-weight: $font-weight-normal;
|
|
364
369
|
color: var(--color-fg-default);
|
|
365
|
-
position: relative; // for pseudo dividers
|
|
366
370
|
}
|
|
367
371
|
|
|
368
372
|
// nested lists (only supports 1 level currently)
|
|
369
|
-
// target ActionList-item--
|
|
373
|
+
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
|
370
374
|
|
|
371
|
-
.ActionList-item--
|
|
375
|
+
.ActionList-item--subItem > .ActionList-content {
|
|
372
376
|
font-size: $font-size-small;
|
|
373
377
|
}
|
|
374
378
|
|
|
375
379
|
// no leading visual
|
|
376
|
-
.ActionList--
|
|
377
|
-
.ActionList-item--
|
|
378
|
-
padding-left:
|
|
380
|
+
.ActionList--subGroup {
|
|
381
|
+
.ActionList-item--subItem {
|
|
382
|
+
padding-left: $spacer-3;
|
|
379
383
|
}
|
|
380
384
|
}
|
|
381
385
|
|
|
382
386
|
// has 16px leading visual
|
|
383
|
-
.ActionList-
|
|
384
|
-
.ActionList-item--
|
|
385
|
-
padding-left:
|
|
387
|
+
.ActionList-content--visual16 + .ActionList--subGroup {
|
|
388
|
+
.ActionList-item--subItem {
|
|
389
|
+
padding-left: $spacer-4;
|
|
386
390
|
}
|
|
387
391
|
}
|
|
388
392
|
|
|
389
393
|
// has 20px leading visual
|
|
390
|
-
.ActionList-
|
|
391
|
-
.ActionList-item--
|
|
392
|
-
padding-left:
|
|
394
|
+
.ActionList-content--visual20 + .ActionList--subGroup {
|
|
395
|
+
.ActionList-item--subItem {
|
|
396
|
+
padding-left: $spacer-3 * 1.75;
|
|
393
397
|
}
|
|
394
398
|
}
|
|
395
399
|
|
|
396
400
|
// has 24px leading visual
|
|
397
|
-
.ActionList-
|
|
398
|
-
.ActionList-item--
|
|
399
|
-
padding-left:
|
|
401
|
+
.ActionList-content--visual24 + .ActionList--subGroup {
|
|
402
|
+
.ActionList-item--subItem {
|
|
403
|
+
padding-left: $spacer-5;
|
|
400
404
|
}
|
|
401
405
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
$actionList-item-height-sm: 20px !default;
|
|
2
|
+
$actionList-item-height-md: 28px !default;
|
|
3
|
+
$actionList-item-height-lg: 36px !default;
|
|
4
|
+
$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
|
|
5
|
+
$actionList-item-padding-horizontal: $spacer-2 !default;
|
|
6
|
+
$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
|
|
7
|
+
$actionList-item-checkmark-transition-timing: 50ms !default;
|
|
@@ -1,34 +1,35 @@
|
|
|
1
|
-
|
|
1
|
+
// stylelint-disable selector-max-specificity, selector-max-compound-selectors
|
|
2
|
+
@import './action-list-variables.scss';
|
|
2
3
|
|
|
3
4
|
// <ul>
|
|
4
5
|
.ActionList {
|
|
5
|
-
padding: $
|
|
6
|
+
padding: $spacer-2;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
// dividers
|
|
9
10
|
|
|
10
11
|
.ActionList--divided {
|
|
11
|
-
.ActionList-item-
|
|
12
|
-
content: '';
|
|
13
|
-
display: block;
|
|
12
|
+
.ActionList-item-label::before {
|
|
14
13
|
position: absolute;
|
|
14
|
+
top: -$actionList-item-padding-vertical;
|
|
15
|
+
display: block;
|
|
15
16
|
width: 100%;
|
|
16
17
|
height: 1px;
|
|
18
|
+
content: '';
|
|
17
19
|
background: var(--color-action-list-item-inline-divider);
|
|
18
|
-
top: -$actionList-item-padding-vertical;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
// hide divider if item is active
|
|
22
|
-
.ActionList-item--
|
|
23
|
-
.ActionList-item-
|
|
24
|
-
+ .ActionList-item .ActionList-item-
|
|
23
|
+
.ActionList-item--navActive {
|
|
24
|
+
.ActionList-item-label::before,
|
|
25
|
+
+ .ActionList-item .ActionList-item-label::before {
|
|
25
26
|
visibility: hidden;
|
|
26
27
|
}
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
.ActionList-item:first-of-type .ActionList-item-
|
|
31
|
-
.ActionList-sectionDivider + .ActionList-item .ActionList-item-
|
|
32
|
-
.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 {
|
|
33
34
|
visibility: hidden;
|
|
34
35
|
}
|
package/actionlist/index.scss
CHANGED
package/dist/actionlist.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.ActionList{padding:8px}.ActionList--divided .ActionList-item-content--label:before{content:"";display:block;position:absolute;width:100%;height:1px;background:var(--color-action-list-item-inline-divider);top:-6px}.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{list-style:none;position:relative;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{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.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%{transform:scale(1);box-shadow:inset 0 0 0 rgba(0,0,0,.04)}100%{transform:scale(0.97);box-shadow:inset 0 3px 9px rgba(0,0,0,.04)}}.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{content:"";width:4px;height:24px;border-radius:4px;position:absolute;left:-8px;top:calc(50% - 12px);background:var(--color-accent-fg)}.ActionList-item[aria-expanded=true] .ActionList-item-content--collapseIcon{transform:scaleY(-1);transition:transform 120ms linear}.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{transform:scaleY(1);transition:transform 120ms linear}.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 0s linear 0s,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 0s linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{visibility:hidden;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0);transition:visibility 0s linear 200ms}@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{display:grid;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;padding:6px 8px;position:relative;border-radius:6px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;transition:background 33.333ms linear}.ActionList-item-content>:not(:last-child){margin-right:8px}.ActionList-item-content:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-fg);position:relative;z-index:1}.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{min-height:20px;display:flex;align-items:center;fill:var(--color-fg-muted);color:var(--color-fg-muted)}.ActionList-item-content--label{font-weight:400;color:var(--color-fg-default);position:relative}.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){padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);display:flex;flex-direction:column}.ActionList-sectionDivider:empty{height:1px;background:var(--color-action-list-item-inline-divider);border:0;margin:7px -8px 8px;padding:0;list-style:none}.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-scale-gray-2);border-bottom:1px solid var(--color-scale-gray-2)}.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":"
|
|
1
|
+
{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
|