@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 CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-2021926222917
3
+ ## 0.0.0-2021926234650
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -19,13 +19,13 @@
19
19
  cursor: pointer;
20
20
 
21
21
  // a href
22
- .ActionList-item-content {
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--has-sub-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-content--label::before,
60
- + .ActionList-item .ActionList-item-content--label::before {
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--has-sub-item {
68
+ &.ActionList-item--hasSubItem {
69
69
  // first child
70
- > .ActionList-item-content {
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--nav-active:not(.ActionList-item--danger) {
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-content--collapseIcon {
103
+ .ActionList-item-collapseIcon {
104
104
  transition: transform 120ms linear;
105
105
  transform: scaleY(-1);
106
106
  }
107
107
 
108
- .ActionList--sub-group {
108
+ .ActionList--subGroup {
109
109
  display: block;
110
110
  }
111
111
 
112
- &.ActionList-item--has-sub-item {
113
- > .ActionList-item-content > .ActionList-item-content--label {
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-content--collapseIcon {
120
+ .ActionList-item-collapseIcon {
121
121
  transition: transform 120ms linear;
122
122
  transform: scaleY(1);
123
123
  }
124
124
 
125
- .ActionList--sub-group {
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-content--multiSelect-checkmark {
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-content--singleSelect {
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-content--multiSelect {
153
- .ActionList-item-content--multiSelect-rectangle {
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-content--multiSelect-checkmark {
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-content--multiSelect-checkmark {
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-content--singleSelect {
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-content--multiSelect {
189
- .ActionList-item-content--multiSelect-rectangle {
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-content--multiSelect-rectangle {
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-content--label {
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-content--label {
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-item-content {
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-item-content--sizeMedium {
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-item-content--sizeLarge {
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-item-content--blockDescription {
287
+ &.ActionList-content--blockDescription {
290
288
  // if leading/trailing visual, align with first line of content
291
- .ActionList-item-content--visual {
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-content--action-leading {
297
+ .ActionList-item-action--leading {
300
298
  grid-area: leadingAction;
301
299
  }
302
300
 
303
- .ActionList-item-content--visual-leading {
301
+ .ActionList-item-visual--leading {
304
302
  grid-area: leadingVisual;
305
303
  }
306
304
 
307
- .ActionList-item-content--label {
305
+ .ActionList-item-label {
308
306
  grid-area: label;
309
307
  }
310
308
 
311
- .ActionList-item-content--visual-trailing {
309
+ .ActionList-item-visual--trailing {
312
310
  grid-area: trailingVisual;
313
311
  }
314
312
 
315
- .ActionList-item-content--action-trailing {
313
+ .ActionList-item-action--trailing {
316
314
  grid-area: trailingAction;
317
315
  }
318
316
 
319
317
  // wrapper span
320
- .ActionList-item-content--label-blockDescription,
321
- .ActionList-item-content--label-inlineDescription {
318
+ .ActionList-item-blockDescription,
319
+ .ActionList-item-inlineDescription {
322
320
  grid-area: label;
323
321
  display: flex;
324
322
 
325
- .ActionList-item-content--label {
323
+ .ActionList-item-label {
326
324
  font-weight: $font-weight-bold;
327
325
  }
328
326
  }
329
327
 
330
328
  // block
331
- .ActionList-item-content--label-blockDescription {
329
+ .ActionList-item-blockDescription {
332
330
  flex-direction: column;
333
331
 
334
- .ActionList-item-content--description {
332
+ .ActionList-item-description {
335
333
  margin-top: $spacer-1;
336
334
  }
337
335
  }
338
336
 
339
337
  // inline
340
- .ActionList-item-content--label-inlineDescription {
338
+ .ActionList-item-inlineDescription {
341
339
  flex-direction: row;
342
340
  align-items: baseline;
343
341
 
344
- .ActionList-item-content--description {
342
+ .ActionList-item-description {
345
343
  margin-left: $actionList-item-padding-horizontal;
346
344
  }
347
345
  }
348
346
 
349
347
  // description
350
- .ActionList-item-content--description {
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-content--visual,
359
- .ActionList-item-content--action {
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-content--label {
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--sub-item for padding-left to maintain :active :after state
373
+ // target ActionList-item--subItem for padding-left to maintain :active :after state
376
374
 
377
- .ActionList-item--sub-item > .ActionList-item-content {
375
+ .ActionList-item--subItem > .ActionList-content {
378
376
  font-size: $font-size-small;
379
377
  }
380
378
 
381
379
  // no leading visual
382
- .ActionList--sub-group {
383
- .ActionList-item--sub-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-item-content--visual--16 + .ActionList--sub-group {
390
- .ActionList-item--sub-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-item-content--visual--20 + .ActionList--sub-group {
397
- .ActionList-item--sub-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-item-content--visual--24 + .ActionList--sub-group {
404
- .ActionList-item--sub-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-content--label::before {
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--nav-active {
24
- .ActionList-item-content--label::before,
25
- + .ActionList-item .ActionList-item-content--label::before {
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-content--label::before,
32
- .ActionList-sectionDivider + .ActionList-item .ActionList-item-content--label::before,
33
- .ActionList-sectionHeader + .ActionList-item .ActionList-item-content--label::before {
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
  }
@@ -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 */
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"AAmhBA,YAAA,WAAA,CAAA,oDAAA,iBAAA,CAAA,QAAA,CAAA,aAAA,CAAA,UAAA,CAAA,UAAA,CAAA,UAAA,CAAA,uDAAA,CAAA,iLAAA,iBAAA,CAAA,mNAAA,iBAAA,CAAA,iBAAA,iBAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,+CAAA,cAAA,CAAA,uFAAA,oBAAA,CAAA,yDAAA,cAAA,CAAA,+DAAA,CAAA,0DAAA,0DAAA,CAAA,0DAAA,0DAAA,8EAAA,CAAA,CAAA,qCAAA,IAAA,sCAAA,CAAA,kBAAA,CAAA,KAAA,0CAAA,CAAA,qBAAA,CAAA,CAAA,oYAAA,iBAAA,CAAA,uEAAA,+DAAA,CAAA,0EAAA,4DAAA,CAAA,qLAAA,iBAAA,CAAA,iFAAA,iBAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,SAAA,CAAA,WAAA,CAAA,UAAA,CAAA,iCAAA,CAAA,iBAAA,CAAA,mEAAA,iCAAA,CAAA,oBAAA,CAAA,2DAAA,aAAA,CAAA,4GAAA,eAAA,CAAA,oEAAA,iCAAA,CAAA,mBAAA,CAAA,4DAAA,YAAA,CAAA,qJAAA,kBAAA,CAAA,SAAA,CAAA,6CAAA,CAAA,uJAAA,kBAAA,CAAA,0DAAA,uJAAA,kEAAA,CAAA,CAAA,qNAAA,2BAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,uNAAA,gCAAA,CAAA,uJAAA,iBAAA,CAAA,SAAA,CAAA,gDAAA,CAAA,yJAAA,iBAAA,CAAA,qCAAA,CAAA,mCAAA,CAAA,2BAAA,CAAA,0DAAA,yJAAA,mEAAA,CAAA,CAAA,uNAAA,gCAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,qJAAA,gCAAA,CAAA,4CAAA,CAAA,uBAAA,KAAA,mCAAA,CAAA,2BAAA,CAAA,GAAA,gCAAA,CAAA,wBAAA,CAAA,CAAA,wBAAA,KAAA,gCAAA,CAAA,wBAAA,CAAA,GAAA,mCAAA,CAAA,2BAAA,CAAA,CAAA,gEAAA,4BAAA,CAAA,wCAAA,+CAAA,wDAAA,CAAA,sEAAA,qDAAA,CAAA,CAAA,gDAAA,yDAAA,CAAA,6BAAA,aAAA,CAAA,oBAAA,iBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,qCAAA,CAAA,4CAAA,CAAA,qFAAA,CAAA,+FAAA,CAAA,kBAAA,CAAA,sCAAA,gBAAA,CAAA,kCAAA,iBAAA,CAAA,SAAA,CAAA,YAAA,CAAA,2CAAA,CAAA,mDAAA,4CAAA,CAAA,kDAAA,4CAAA,CAAA,wBAAA,oBAAA,4CAAA,CAAA,CAAA,iFAAA,gBAAA,CAAA,iCAAA,uBAAA,CAAA,iCAAA,uBAAA,CAAA,uBAAA,eAAA,CAAA,kCAAA,wBAAA,CAAA,kCAAA,wBAAA,CAAA,qEAAA,eAAA,CAAA,YAAA,CAAA,mHAAA,eAAA,CAAA,kCAAA,qBAAA,CAAA,+DAAA,cAAA,CAAA,mCAAA,kBAAA,CAAA,oBAAA,CAAA,gEAAA,eAAA,CAAA,6BAAA,cAAA,CAAA,eAAA,CAAA,2BAAA,CAAA,gDAAA,YAAA,CAAA,eAAA,CAAA,2BAAA,CAAA,0BAAA,CAAA,kBAAA,CAAA,uBAAA,iBAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,8CAAA,cAAA,CAAA,gDAAA,iBAAA,CAAA,8EAAA,iBAAA,CAAA,8EAAA,iBAAA,CAAA,8EAAA,iBAAA,CAAA,uCAAA,YAAA,CAAA,eAAA,CAAA,cAAA,CAAA,eAAA,CAAA,2BAAA,CAAA,qBAAA,CAAA,iCAAA,UAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,eAAA,CAAA,uDAAA,CAAA,QAAA,CAAA,mEAAA,cAAA,CAAA,eAAA,CAAA,mCAAA,eAAA,CAAA,qCAAA,CAAA,iEAAA,CAAA,oEAAA,CAAA,yCAAA,UAAA,CAAA,qBAAA,CAAA,+CAAA,YAAA","file":"actionlist.css"}