@primer/css 0.0.0-202192084348 → 0.0.0-202192105746

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,12 +1,10 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-202192084348
3
+ ## 0.0.0-202192105746
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - [#1680](https://github.com/primer/css/pull/1680) [`f013be66`](https://github.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://github.com/privatenumber)! - Fixing broken close span tag in the docs.
8
-
9
- * Fake entry to force publishing
7
+ - Fake entry to force publishing
10
8
 
11
9
  ## 18.0.1
12
10
 
@@ -0,0 +1,35 @@
1
+ // expanded from src/support/variables/layout.scss
2
+ // adds 12px to the scale as of https://github.com/github/design-systems/issues/992
3
+ //
4
+ // https://github.com/github/design-systems/issues/1272
5
+
6
+ $s-20: 20px;
7
+ $s-28: 28px;
8
+
9
+ // CSS Easing
10
+
11
+ $ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
12
+ $ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
13
+ $ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
14
+ // $actionList-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
15
+ $actionList-item-padding-vertical: 6px;
16
+ $actionList-item-padding-horizontal: $spacer-2;
17
+ $actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
18
+ $actionList-item-checkmark-transition-timing: 50ms;
19
+
20
+ // waiting on https://github.com/primer/primitives/pull/256 for these primitives
21
+ $actionList-item-hover-bg: #f0f3f5;
22
+ $actionList-item-active-bg: #e8ebed;
23
+ $actionList-item-selected-bg: #f0f3f5;
24
+ $actionList-item-focus-bg: #e0e4e7;
25
+ $actionList-item-divider: #e9e9ed;
26
+ $actionList-item-danger-hover-bg: #fff0f2;
27
+ $actionList-item-danger-active-bg: #ffebed;
28
+ $actionList-item-danger-focus-bg: #ffdbe0;
29
+
30
+ // $actionList-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
31
+ $actionList-item-padding-vertical: 6px;
32
+ $actionList-item-padding-horizontal: $spacer-2;
33
+ $actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
34
+
35
+ $actionList-padding: $spacer-2;
@@ -0,0 +1,46 @@
1
+ @import './action-list-helpers-temporary.scss';
2
+
3
+ // emtpy divider
4
+
5
+ .ActionList-sectionDivider {
6
+ height: 1px;
7
+ background: $actionList-item-divider;
8
+ border: 0;
9
+ margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
10
+ padding: 0;
11
+ list-style: none;
12
+ }
13
+
14
+ .ActionList-sectionDivider--filled {
15
+ margin: $spacer-2 ($spacer-2 * -1);
16
+ background: var(--color-canvas-subtle);
17
+ border-top: 1px solid var(--color-scale-gray-2);
18
+ border-bottom: 1px solid var(--color-scale-gray-2);
19
+
20
+ // if no children, treat as divider
21
+ &:empty {
22
+ height: $spacer-2;
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ &:first-child {
27
+ margin-top: 0;
28
+ }
29
+ }
30
+
31
+ // section header
32
+
33
+ .ActionList-sectionHeader {
34
+ // 32px total height considering 20px line-height
35
+ padding: (($spacer-5 - $s-20) / 2) $spacer-2;
36
+ font-size: $font-size-small;
37
+ font-weight: $font-weight-bold;
38
+ color: var(--color-fg-muted);
39
+ display: flex;
40
+ flex-direction: column;
41
+
42
+ .ActionList-sectionHeader--description {
43
+ font-size: $font-size-small;
44
+ font-weight: $font-weight-normal;
45
+ }
46
+ }
@@ -0,0 +1,394 @@
1
+ @import './action-list-helpers-temporary.scss';
2
+
3
+ @mixin focusOutline {
4
+ outline: none;
5
+ box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
6
+ position: relative;
7
+ z-index: 1;
8
+ }
9
+
10
+ // <li>
11
+ .ActionList-item {
12
+ list-style: none;
13
+ position: relative;
14
+ border-radius: $border-radius-2;
15
+
16
+ &:hover,
17
+ &:active {
18
+ cursor: pointer;
19
+
20
+ // a href
21
+ .ActionList-item-content {
22
+ text-decoration: none;
23
+ }
24
+ }
25
+
26
+ // only hover li without list as children
27
+ &:not(.ActionList-item--has-sub-item) {
28
+ &:hover {
29
+ background-color: $actionList-item-hover-bg;
30
+ cursor: pointer;
31
+ }
32
+
33
+ &:active {
34
+ background: $actionList-item-active-bg;
35
+
36
+ @media screen and (prefers-reduced-motion: no-preference) {
37
+ animation: ActionList-item-active-bg 4s forwards $ease-out-cubic;
38
+ }
39
+
40
+ @keyframes ActionList-item-active-bg {
41
+ 0% {
42
+ }
43
+ 50% {
44
+ transform: scale(1);
45
+ box-shadow: inset 0 0 0 rgba(#000, 0.04);
46
+ }
47
+ 100% {
48
+ transform: scale(0.97);
49
+ box-shadow: inset 0 3px 9px rgba(#000, 0.04);
50
+ }
51
+ }
52
+ }
53
+
54
+ &:hover,
55
+ &:active {
56
+ // hide dividers
57
+ .ActionList-item-content--label:before,
58
+ + .ActionList-item .ActionList-item-content--label:before {
59
+ visibility: hidden;
60
+ }
61
+ }
62
+ }
63
+
64
+ // target contents of li if sub-item (li wraps item label + nested ul)
65
+ // collapse styles here
66
+ &.ActionList-item--has-sub-item {
67
+ // first child
68
+ > .ActionList-item-content {
69
+ &:hover {
70
+ background-color: $actionList-item-hover-bg;
71
+ }
72
+ }
73
+ }
74
+
75
+ // active state [aria-current]
76
+
77
+ &.ActionList-item--nav-active:not(.ActionList-item--danger) {
78
+ background: $actionList-item-selected-bg;
79
+ &:before,
80
+ + .ActionList-item:before {
81
+ visibility: hidden;
82
+ }
83
+
84
+ // blue accent line
85
+ &:after {
86
+ content: '';
87
+ width: $spacer-1;
88
+ height: $spacer-4;
89
+ border-radius: $border-radius-1;
90
+ position: absolute;
91
+ left: -$actionList-item-padding-horizontal;
92
+ top: calc(50% - (24px / 2));
93
+ background: var(--color-accent-fg);
94
+ }
95
+ }
96
+
97
+ // collapsible item [aria-expanded]
98
+
99
+ &[aria-expanded='true'] {
100
+ .ActionList-item-content--collapseIcon {
101
+ transform: scaleY(-1);
102
+ transition: transform 120ms linear;
103
+ }
104
+
105
+ .ActionList--sub-group {
106
+ display: block;
107
+ }
108
+
109
+ &.ActionList-item--has-sub-item {
110
+ > .ActionList-item-content > .ActionList-item-content--label {
111
+ font-weight: $font-weight-bold;
112
+ }
113
+ }
114
+ }
115
+
116
+ &[aria-expanded='false'] {
117
+ .ActionList-item-content--collapseIcon {
118
+ transform: scaleY(1);
119
+ transition: transform 120ms linear;
120
+ }
121
+
122
+ .ActionList--sub-group {
123
+ display: none;
124
+ }
125
+ }
126
+
127
+ // checkbox item [aria-checked]
128
+
129
+ &[aria-checked='true'] {
130
+ // multiselect checkmark
131
+ .ActionList-item-content--multiSelect-checkmark {
132
+ visibility: visible;
133
+ opacity: 1;
134
+ transition: visibility 0s linear 0s, opacity $actionList-item-checkmark-transition-timing;
135
+ }
136
+
137
+ // singleselect checkmark
138
+ .ActionList-item-content--singleSelect {
139
+ visibility: visible;
140
+
141
+ @media screen and (prefers-reduced-motion: no-preference) {
142
+ animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
143
+ }
144
+ }
145
+
146
+ // checkbox
147
+ .ActionList-item-content--multiSelect {
148
+ .ActionList-item-content--multiSelect-rectangle {
149
+ fill: var(--color-accent-fg);
150
+ stroke: var(--color-accent-fg);
151
+ stroke-width: $border-width;
152
+ }
153
+
154
+ .ActionList-item-content--multiSelect-checkmark {
155
+ fill: var(--color-fg-on-emphasis);
156
+ }
157
+ }
158
+ }
159
+
160
+ &[aria-checked='false'] {
161
+ // multiselect checkmark
162
+ .ActionList-item-content--multiSelect-checkmark {
163
+ visibility: hidden;
164
+ opacity: 0;
165
+ transition: visibility 0s linear $actionList-item-checkmark-transition-timing,
166
+ opacity $actionList-item-checkmark-transition-timing;
167
+ }
168
+
169
+ // singleselect checkmark
170
+ .ActionList-item-content--singleSelect {
171
+ visibility: hidden;
172
+ clip-path: inset(16px 0 0 0);
173
+ transition: visibility 0s linear 200ms;
174
+
175
+ @media screen and (prefers-reduced-motion: no-preference) {
176
+ animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
177
+ }
178
+ }
179
+
180
+ // checkbox
181
+ .ActionList-item-content--multiSelect {
182
+ .ActionList-item-content--multiSelect-rectangle {
183
+ fill: var(--color-canvas-default);
184
+ stroke: var(--color-border-default);
185
+ stroke-width: $border-width;
186
+ }
187
+ }
188
+
189
+ .ActionList-item-content--multiSelect-rectangle {
190
+ fill: var(--color-canvas-default);
191
+ border: $border-width $border-style var(--color-border-default);
192
+ }
193
+ }
194
+
195
+ @keyframes checkmarkIn {
196
+ from {
197
+ clip-path: inset(16px 0 0 0);
198
+ }
199
+ to {
200
+ clip-path: inset(0 0 0 0);
201
+ }
202
+ }
203
+
204
+ @keyframes checkmarkOut {
205
+ from {
206
+ clip-path: inset(0 0 0 0);
207
+ }
208
+ to {
209
+ clip-path: inset(16px 0 0 0);
210
+ }
211
+ }
212
+
213
+ // variants
214
+
215
+ &.ActionList-item--danger {
216
+ .ActionList-item-content--label {
217
+ color: var(--color-danger-fg);
218
+ }
219
+
220
+ @media (hover: hover) and (pointer: fine) {
221
+ &:hover {
222
+ background: var(--color-danger-subtle);
223
+ }
224
+ }
225
+
226
+ &:active {
227
+ background: var(--color-danger-subtle);
228
+ }
229
+ }
230
+
231
+ // if nested list exists, remove default padding
232
+ .ActionList {
233
+ padding: unset;
234
+ }
235
+ }
236
+
237
+ // span or a href
238
+ .ActionList-item-content {
239
+ display: grid;
240
+ grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
241
+ grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
242
+ grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
243
+ align-items: center;
244
+ padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
245
+ position: relative;
246
+ border-radius: $border-radius-2;
247
+ font-weight: $font-weight-normal;
248
+ color: var(--color-fg-default);
249
+ user-select: none;
250
+ transition: $actionList-item-bg-transition;
251
+
252
+ // column-gap persists with empty grid-areas, margin applies only when children exist
253
+ & > :not(:last-child) {
254
+ margin-right: $spacer-2;
255
+ }
256
+
257
+ &:focus-visible {
258
+ @include focusOutline;
259
+ }
260
+
261
+ // sizes
262
+
263
+ &.ActionList-item-content--sizeMedium {
264
+ grid-template-rows: minmax(28px, max-content); // 28px + 12px padding [40]
265
+ }
266
+
267
+ &.ActionList-item-content--sizeLarge {
268
+ grid-template-rows: minmax(36px, max-content); // 36px + 12px padding [48]
269
+ }
270
+
271
+ // On pointer:coarse (mobile), all list items are large
272
+ @media (pointer: coarse) {
273
+ grid-template-rows: minmax(36px, max-content);
274
+ }
275
+
276
+ &.ActionList-item-content--blockDescription {
277
+ // if leading/trailing visual, align with first line of content
278
+ .ActionList-item-content--visual {
279
+ place-self: start;
280
+ }
281
+ }
282
+ }
283
+
284
+ // place children on grid
285
+
286
+ .ActionList-item-content--action-leading {
287
+ grid-area: leadingAction;
288
+ }
289
+
290
+ .ActionList-item-content--visual-leading {
291
+ grid-area: leadingVisual;
292
+ }
293
+
294
+ .ActionList-item-content--label {
295
+ grid-area: label;
296
+ }
297
+
298
+ .ActionList-item-content--visual-trailing {
299
+ grid-area: trailingVisual;
300
+ }
301
+
302
+ .ActionList-item-content--action-trailing {
303
+ grid-area: trailingAction;
304
+ }
305
+
306
+ // wrapper span
307
+ .ActionList-item-content--label-blockDescription,
308
+ .ActionList-item-content--label-inlineDescription {
309
+ grid-area: label;
310
+ display: flex;
311
+
312
+ .ActionList-item-content--label {
313
+ font-weight: $font-weight-bold;
314
+ }
315
+ }
316
+
317
+ // block
318
+ .ActionList-item-content--label-blockDescription {
319
+ flex-direction: column;
320
+
321
+ .ActionList-item-content--description {
322
+ margin-top: $spacer-1;
323
+ }
324
+ }
325
+
326
+ // inline
327
+ .ActionList-item-content--label-inlineDescription {
328
+ flex-direction: row;
329
+ align-items: baseline;
330
+
331
+ .ActionList-item-content--description {
332
+ margin-left: $actionList-item-padding-horizontal;
333
+ }
334
+ }
335
+
336
+ // description
337
+ .ActionList-item-content--description {
338
+ font-size: $font-size-small;
339
+ line-height: $lh-default;
340
+ color: var(--color-fg-muted);
341
+ }
342
+
343
+ // helper for grid alignment with multi-line content
344
+ // span wrapping svg or text
345
+ .ActionList-item-content--visual,
346
+ .ActionList-item-content--action {
347
+ min-height: 20px;
348
+ display: flex;
349
+ align-items: center;
350
+ fill: var(--color-fg-muted);
351
+ color: var(--color-fg-muted); // if visual is text
352
+ }
353
+
354
+ // text
355
+ .ActionList-item-content--label {
356
+ font-weight: $font-weight-normal;
357
+ color: var(--color-fg-default);
358
+ position: relative; // for pseudo dividers
359
+ }
360
+
361
+ // nested lists (only supports 1 level currently)
362
+ // target ActionList-item--sub-item for padding-left to maintain :active :after state
363
+
364
+ .ActionList-item--sub-item > .ActionList-item-content {
365
+ font-size: $font-size-small;
366
+ }
367
+
368
+ // no leading visual
369
+ .ActionList--sub-group {
370
+ .ActionList-item--sub-item {
371
+ padding-left: 16px;
372
+ }
373
+ }
374
+
375
+ // has 16px leading visual
376
+ .ActionList-item-content--visual--16 + .ActionList--sub-group {
377
+ .ActionList-item--sub-item {
378
+ padding-left: 24px;
379
+ }
380
+ }
381
+
382
+ // has 20px leading visual
383
+ .ActionList-item-content--visual--20 + .ActionList--sub-group {
384
+ .ActionList-item--sub-item {
385
+ padding-left: 28px;
386
+ }
387
+ }
388
+
389
+ // has 24px leading visual
390
+ .ActionList-item-content--visual--24 + .ActionList--sub-group {
391
+ .ActionList-item--sub-item {
392
+ padding-left: 32px;
393
+ }
394
+ }
@@ -0,0 +1,34 @@
1
+ @import './action-list-helpers-temporary.scss';
2
+
3
+ // <ul>
4
+ .ActionList {
5
+ padding: $actionList-padding;
6
+ }
7
+
8
+ // dividers
9
+
10
+ .ActionList--divided {
11
+ .ActionList-item-content--label:before {
12
+ content: '';
13
+ display: block;
14
+ position: absolute;
15
+ width: 100%;
16
+ height: 1px;
17
+ background: $actionList-item-divider;
18
+ top: -$actionList-item-padding-vertical;
19
+ }
20
+
21
+ // hide divider if item is active
22
+ .ActionList-item--nav-active {
23
+ .ActionList-item-content--label:before,
24
+ + .ActionList-item .ActionList-item-content--label:before {
25
+ visibility: hidden;
26
+ }
27
+ }
28
+ }
29
+
30
+ .ActionList-item:first-of-type .ActionList-item-content--label:before,
31
+ .ActionList-sectionDivider + .ActionList-item .ActionList-item-content--label:before,
32
+ .ActionList-sectionHeader + .ActionList-item .ActionList-item-content--label:before {
33
+ visibility: hidden;
34
+ }
@@ -0,0 +1,4 @@
1
+ @import '../support/index.scss';
2
+ @import './action-list.scss';
3
+ @import './action-list-item.scss';
4
+ @import './action-list-item-divider.scss';
package/core/index.scss CHANGED
@@ -6,23 +6,24 @@
6
6
  */
7
7
 
8
8
  // Global requirements
9
- @import "../support/index.scss";
9
+ @import '../support/index.scss';
10
10
 
11
11
  // Color modes
12
12
 
13
13
  // Core modules
14
- @import "../base/index.scss";
15
- @import "../box/index.scss";
16
- @import "../breadcrumb/index.scss";
17
- @import "../buttons/index.scss";
18
- @import "../table-object/index.scss";
19
- @import "../forms/index.scss";
20
- @import "../layout/index.scss";
21
- @import "../links/index.scss";
22
- @import "../navigation/index.scss";
23
- @import "../pagination/index.scss";
24
- @import "../tooltips/index.scss";
25
- @import "../truncate/index.scss";
14
+ @import '../actionlist/index.scss';
15
+ @import '../base/index.scss';
16
+ @import '../box/index.scss';
17
+ @import '../breadcrumb/index.scss';
18
+ @import '../buttons/index.scss';
19
+ @import '../table-object/index.scss';
20
+ @import '../forms/index.scss';
21
+ @import '../layout/index.scss';
22
+ @import '../links/index.scss';
23
+ @import '../navigation/index.scss';
24
+ @import '../pagination/index.scss';
25
+ @import '../tooltips/index.scss';
26
+ @import '../truncate/index.scss';
26
27
 
27
28
  // Utilities always go last so that they can override components
28
- @import "../utilities/index.scss";
29
+ @import '../utilities/index.scss';
@@ -0,0 +1,2 @@
1
+ .ActionList{padding:8px}.ActionList--divided .ActionList-item-content--label:before{content:"";display:block;position:absolute;width:100%;height:1px;background:#e9e9ed;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:#f0f3f5;cursor:pointer}.ActionList-item:not(.ActionList-item--has-sub-item):active{background:#e8ebed}@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:#f0f3f5}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger){background:#f0f3f5}.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{visibility:visible;opacity:1;transition:visibility 0s linear 0s,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=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{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{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=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{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{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{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=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-danger-subtle)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-danger-subtle)}.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{height:1px;background:#e9e9ed;border:0;margin:7px -8px 8px;padding:0;list-style:none}.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}.ActionList-sectionHeader{padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);display:flex;flex-direction:column}.ActionList-sectionHeader .ActionList-sectionHeader--description{font-size:12px;font-weight:400}
2
+ /*# sourceMappingURL=actionlist.css.map */
@@ -0,0 +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"}
@@ -0,0 +1 @@
1
+ export {cssstats: require('./stats/actionlist.json')}