@primer/css 0.0.0-20219151218 → 0.0.0-202194215611

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-20219151218
3
+ ## 0.0.0-202194215611
4
4
 
5
5
  ### Major Changes
6
6
 
@@ -34,6 +34,12 @@
34
34
 
35
35
  - Fake entry to force publishing
36
36
 
37
+ * [#1628](https://github.com/primer/css/pull/1628) [`ce197c9f`](https://github.com/primer/css/commit/ce197c9ff18cedd842893186953b68805eed637d) Thanks [@edokoa](https://github.com/edokoa)! - Update flash alert icons
38
+
39
+ - [#1629](https://github.com/primer/css/pull/1629) [`54d3068b`](https://github.com/primer/css/commit/54d3068bd628f771aacae6b1ce269a5a2cc2d8a1) Thanks [@jdanyow](https://github.com/jdanyow)! - remove remaining color-border-primary refs
40
+
41
+ * [#1631](https://github.com/primer/css/pull/1631) [`5f3689b9`](https://github.com/primer/css/commit/5f3689b907163f7be9e78abb9fc762978beda06d) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config and @primer/primitives to 5.0
42
+
37
43
  ## 17.11.0
38
44
 
39
45
  ### Minor Changes
@@ -0,0 +1,527 @@
1
+ // Most of this file should be provided by primer/src/support already
2
+
3
+ $actionList-item-hover-bg: #f0f3f5;
4
+ $actionList-item-active-bg: #e8ebed;
5
+ $actionList-item-selected-bg: #f0f3f5;
6
+ $actionList-item-focus-bg: #e0e4e7;
7
+ $actionList-item-divider: #e9e9ed;
8
+
9
+ $actionList-item-danger-hover-bg: #fff0f2;
10
+ $actionList-item-danger-active-bg: #ffebed;
11
+ $actionList-item-danger-focus-bg: #ffdbe0;
12
+
13
+ // expanded from src/support/variables/misc.scss
14
+
15
+ $border-radius-1: 4px !default;
16
+ $border-radius-2: 6px !default;
17
+ $border-radius-3: 8px !default;
18
+ $border-radius-4: 12px !default;
19
+
20
+ $box-shadow-medium: 0 3px 6px rgba(#000, 0.12) !default;
21
+ $box-shadow-large: 0 6px 18px rgba(#000, 0.16) !default;
22
+ $box-shadow-extra-large: 0 12px 48px rgba(#000, 0.2) !default;
23
+
24
+ $overlay-shadow-popover: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 8px 24px rgba(149, 157, 165, 0.2);
25
+
26
+ // expanded from src/support/variables/layout.scss
27
+ // adds 12px to the scale as of https://github.com/github/design-systems/issues/992
28
+ //
29
+ // https://github.com/github/design-systems/issues/1272
30
+
31
+ $s-0: 0;
32
+ $s-4: 4px;
33
+ $s-8: 8px;
34
+ $s-12: 12px;
35
+ $s-16: 16px;
36
+ $s-20: 20px;
37
+ $s-24: 24px;
38
+ $s-28: 28px;
39
+ $s-32: 32px;
40
+ $s-40: 40px;
41
+ $s-48: 48px;
42
+
43
+ // pulled from src/support/variables/color-system.scss
44
+
45
+ // -------- Grays --------
46
+ $gray-000: #fafbfc !default;
47
+ $gray-100: #f6f8fa !default;
48
+ $gray-200: #e1e4e8 !default;
49
+ $gray-300: #d1d5da !default;
50
+ $gray-400: #959da5 !default;
51
+ $gray-500: #6a737d !default;
52
+ $gray-600: #586069 !default;
53
+ $gray-700: #444d56 !default;
54
+ $gray-800: #2f363d !default;
55
+ $gray-900: #24292e !default; // body font color
56
+
57
+ // -------- Accent -------
58
+ $blue-500: #0366d6;
59
+
60
+ // Typographic colors, from some color mode file
61
+
62
+ $text-primary: $gray-900;
63
+ $text-secondary: $gray-500;
64
+ $text-danger: #cb2431;
65
+
66
+ // CSS Easing
67
+
68
+ $ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
69
+ $ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
70
+ $ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
71
+ /*
72
+
73
+
74
+ .actionList
75
+ =============
76
+
77
+
78
+ .actionList
79
+ & .actionList--sizeMedium
80
+ & .actionList--sizeLarge
81
+ & .actionList--divided
82
+ & .actionList--single-selection
83
+ & .actionList--multi-selection // just call these `.actionList--selection` since they behave the same?
84
+
85
+ - .actionList-item
86
+ & .actionList-item--sizeMedium
87
+ & .actionList-item--sizeLarge
88
+ & .actionList-item--divided
89
+ & .actionList-item--danger
90
+
91
+ - .actionList-item-content
92
+ - .actionList-item-check
93
+
94
+ - .actionList-item-leadingVisual
95
+ - .actionList-item-leadingVisual-20
96
+
97
+ - .actionList-item-label
98
+ - .actionList-item-trailingText
99
+ - .actionList-item-trailingVisual
100
+ - .actionList-item-inlineDescription
101
+ - .actionList-item-blockDescription
102
+
103
+ - .actionList-sectionDivider
104
+ & .actionList-sectionDivider--filled
105
+
106
+ - .actionList-sectionHeader
107
+ & .actionList-sectionHeader--filled
108
+
109
+
110
+
111
+ <ul class="actionList actionList--sizeMedium">
112
+ <li class="actionList-item">
113
+ <a class="actionList-item-content" href="#" role="menuitem">
114
+ <span class=".actionList-item-leadingVisual">
115
+ <svg />
116
+ </span>
117
+ <span class="actionList-item-label">
118
+ <span class="actionList-item-trailingText">
119
+ Ctrl+N
120
+ </span>
121
+ <span class="actionList-item-label">
122
+ New file
123
+ </span>
124
+ </span>
125
+ </a>
126
+ </li>
127
+
128
+ <li class="actionList-sectionDivider"></li>
129
+
130
+ <li class="actionList-item" role="option">
131
+ <a class="actionList-item-content" href="#" role="menuitem">
132
+ <span class="actionList-item-label">
133
+ Copy link
134
+ </span>
135
+ </a>
136
+ </li>
137
+ </ul>
138
+
139
+ */
140
+
141
+ .actionList {
142
+ padding: $s-8;
143
+ list-style: none;
144
+
145
+ ul,
146
+ li {
147
+ list-style: none;
148
+ }
149
+ }
150
+
151
+ .actionList-item {
152
+ // :before pseudo-element is used for the inline divider
153
+ // :after pseudo-element is used for selected accent line on the left
154
+
155
+ position: relative;
156
+
157
+ &.actionList-item--selected {
158
+ // Hide the inline divider for the current item and the sibling's
159
+
160
+ &:before,
161
+ + .actionList-item:before {
162
+ visibility: hidden;
163
+ }
164
+
165
+ .actionList-item-content {
166
+ background: $actionList-item-selected-bg;
167
+
168
+ @media (hover: hover) and (pointer: fine) {
169
+ &:hover {
170
+ background: $actionList-item-active-bg;
171
+ }
172
+ }
173
+ }
174
+
175
+ // Blue accent for selected item.
176
+
177
+ &:after {
178
+ content: '';
179
+ width: $s-4;
180
+ height: $s-24;
181
+ border-radius: 4px;
182
+ position: absolute;
183
+ left: -8px;
184
+ top: calc(50% - (24px / 2));
185
+
186
+ // I think this translates as fg-accent in color modes
187
+ background: $blue-500;
188
+ }
189
+ }
190
+
191
+ // Hides sibling's divider if item is :hover or :active
192
+
193
+ &:hover:before,
194
+ &:hover + .actionList-item:before {
195
+ visibility: hidden;
196
+ }
197
+
198
+ &:active:before,
199
+ &:active + .actionList-item:before {
200
+ visibility: hidden;
201
+ }
202
+ }
203
+
204
+ .actionList-item-content {
205
+ position: relative;
206
+ display: flex;
207
+ align-items: start;
208
+ border-radius: $border-radius-2;
209
+ font-weight: normal;
210
+ color: inherit;
211
+ text-decoration: none;
212
+ border: none;
213
+ background: none;
214
+ text-align: start;
215
+ margin: 0;
216
+ width: 100%;
217
+
218
+ // 32px total height considering 20px line-height
219
+ padding: (($s-32 - $s-20) / 2) $s-8;
220
+
221
+ // do we want this?
222
+ user-select: none;
223
+
224
+ // since we're already using an :active bg
225
+ -webkit-tap-highlight-color: transparent;
226
+
227
+ // 2 frames on a 60hz monitor
228
+ transition: background 33.333ms linear;
229
+
230
+ &:hover {
231
+ text-decoration: none;
232
+ }
233
+
234
+ &:focus-visible {
235
+ outline: none;
236
+ box-shadow: 0 0 0 2px $blue-500; // fg-accent
237
+ position: relative;
238
+ z-index: 1;
239
+ }
240
+
241
+ @media (hover: hover) and (pointer: fine) {
242
+ &:hover {
243
+ background: $actionList-item-hover-bg;
244
+ cursor: pointer;
245
+ }
246
+ }
247
+
248
+ &:active {
249
+ background: $actionList-item-active-bg;
250
+
251
+ @media screen and (prefers-reduced-motion: no-preference) {
252
+ animation: actionList-item-active-bg 4s forwards $ease-out-cubic;
253
+ }
254
+
255
+ @keyframes actionList-item-active-bg {
256
+ 0% {
257
+ }
258
+ 50% {
259
+ transform: scale(1);
260
+ box-shadow: inset 0 0 0 rgba(#000, 0.04);
261
+ }
262
+ 100% {
263
+ transform: scale(0.97);
264
+ box-shadow: inset 0 3px 9px rgba(#000, 0.04);
265
+ }
266
+ }
267
+ }
268
+
269
+ //a replacement for `gap: $s-8;` since its compatibility is a little shady
270
+
271
+ > * {
272
+ margin-right: $s-8;
273
+ }
274
+ > &:last-child {
275
+ margin-right: 0;
276
+ }
277
+ }
278
+
279
+ // size (default: small)
280
+ // small | medium | large
281
+
282
+ // Medium-sized items
283
+
284
+ .actionList--sizeMedium .actionList-item,
285
+ .actionList-item--sizeMedium {
286
+ // 40px total height considering 20px line-height
287
+ padding-top: (($s-40 - $s-20) / 2);
288
+ padding-bottom: (($s-40 - $s-20) / 2);
289
+ }
290
+
291
+ // Large-sized items
292
+
293
+ .actionList--sizeLarge .actionList-item .actionList-item-content,
294
+ .actionList-item--sizeLarge .actionList-item-content {
295
+ // 48px total height considering 20px line-height
296
+ padding-top: (($s-48 - $s-20) / 2);
297
+ padding-bottom: (($s-48 - $s-20) / 2);
298
+ }
299
+
300
+ // On pointer:coarse, all list items are large
301
+
302
+ @media (pointer: coarse) {
303
+ .actionList-item {
304
+ // 48px total height considering 20px line-height
305
+ padding-top: (($s-48 - $s-20) / 2);
306
+ padding-bottom: (($s-48 - $s-20) / 2);
307
+ }
308
+ }
309
+
310
+ // Danger listItem
311
+
312
+ // TODO: conflict with selected state
313
+ .actionList-item--danger {
314
+ .actionList-item-content {
315
+ color: $text-danger;
316
+
317
+ @media (hover: hover) and (pointer: fine) {
318
+ &:hover {
319
+ background: $actionList-item-danger-hover-bg;
320
+ }
321
+ }
322
+
323
+ &:active {
324
+ background: $actionList-item-danger-active-bg;
325
+ }
326
+ }
327
+ }
328
+
329
+ // listItem elements
330
+ // TODO: safegaurd against incorrect SVG sizes
331
+ .actionList-item-leadingVisual,
332
+ .actionList-item-leadingVisual-16,
333
+ .actionList-item-leadingVisual-20 {
334
+ width: $s-16;
335
+ height: $s-20;
336
+ display: flex;
337
+ flex-direction: column;
338
+ justify-content: center;
339
+
340
+ svg {
341
+ fill: $text-secondary;
342
+ }
343
+ }
344
+
345
+ .actionList-item-leadingVisual-20 {
346
+ width: $s-20;
347
+ }
348
+
349
+ .actionList-item-label {
350
+ flex: 1;
351
+ }
352
+
353
+ .actionList-item-inlineDescription {
354
+ align-self: baseline;
355
+ // text-small
356
+ font-size: 12px;
357
+ line-height: 18px;
358
+ color: $text-secondary;
359
+ }
360
+
361
+ // TODO: should label always be bold above a block description?
362
+ .actionList-item-blockDescription {
363
+ align-self: baseline;
364
+ display: block;
365
+
366
+ // text-small
367
+ font-size: 12px;
368
+ line-height: 18px;
369
+ color: $text-secondary;
370
+ margin-top: $s-4;
371
+ }
372
+
373
+ // child of .actionList-item-label, placed above everything
374
+ .actionList-item-trailingText {
375
+ margin-left: $s-16;
376
+ float: right;
377
+ color: $text-secondary;
378
+ }
379
+
380
+ // sibling of .actionList-item-label
381
+ .actionList-item-trailingVisual {
382
+ height: $s-20;
383
+ display: flex;
384
+ flex-direction: column;
385
+ justify-content: center;
386
+
387
+ svg {
388
+ fill: $text-secondary;
389
+ }
390
+ }
391
+
392
+ // Single-selection & Multi selection
393
+ // TODO: can this be simplified?
394
+ .actionList--single-selection .actionList-item > .actionList-item-content,
395
+ .actionList--multi-selection .actionList-item > .actionList-item-content,
396
+ .actionList-item--single-selection > .actionList-item-content,
397
+ .actionList-item--multi-selection > .actionList-item-content {
398
+ padding-left: ($s-16 + $s-16);
399
+ }
400
+
401
+ .actionList-item .actionList-item-check {
402
+ width: $s-16;
403
+ height: $s-20;
404
+ display: flex;
405
+ flex-direction: column;
406
+ justify-content: center;
407
+ margin-left: ($s-24 * -1);
408
+ align-items: center;
409
+
410
+ svg {
411
+ fill: $text-secondary;
412
+ }
413
+ input {
414
+ cursor: pointer;
415
+ }
416
+ }
417
+
418
+ // Dividers
419
+
420
+ .actionList--divided .actionList-item:before,
421
+ .actionList-item--divided:before {
422
+ content: '';
423
+ display: block;
424
+ position: absolute;
425
+ width: calc(100% - #{$s-16});
426
+ height: 1px;
427
+ background: $actionList-item-divider;
428
+ top: 0;
429
+ left: $s-8;
430
+ }
431
+
432
+ .actionList-item:first-child:before,
433
+ .actionList-sectionDivider + .actionList-item:before,
434
+ .actionList-sectionHeader + .actionList-item:before {
435
+ visibility: hidden;
436
+ }
437
+
438
+ .actionList--divided-indent-16 .actionList-item:before,
439
+ .actionList-item--divided-indent-16:before {
440
+ left: $s-16 + $s-16;
441
+ width: calc(100% - 40px) !important;
442
+ }
443
+
444
+ .actionList--divided-indent-20 .actionList-item:before,
445
+ .actionList-item--divided-indent-20:before {
446
+ left: $s-20 + $s-16;
447
+ width: calc(100% - 44px) !important;
448
+ }
449
+
450
+ .actionList--divided-indent-24 .actionList-item:before,
451
+ .actionList-item--divided-indent-24:before {
452
+ left: $s-24 + $s-16;
453
+ width: calc(100% - 48px) !important;
454
+ }
455
+
456
+ .actionList--divided-indent-32 .actionList-item:before,
457
+ .actionList-item--divided-indent-32:before {
458
+ left: $s-32 + $s-16;
459
+ width: calc(100% - 56px) !important;
460
+ }
461
+
462
+ .actionList--single-selection.actionList--divided .actionList-item:before,
463
+ .actionList--multi-selection.actionList--divided .actionList-item:before,
464
+ .actionList-item--single-selection.actionList-item--divided:before,
465
+ .actionList-item--multi-selection.actionList-item--divided:before {
466
+ left: $s-16 + $s-16;
467
+ width: calc(100% - 40px) !important;
468
+ }
469
+
470
+ .actionList--single-selection.actionList--divided-indent-20 .actionList-item:before,
471
+ .actionList--multi-selection.actionList--divided-indent-20 .actionList-item:before,
472
+ .actionList--single-selection .actionList-item--divided-indent-20:before,
473
+ .actionList--multi-selection .actionList-item--divided-indent-20:before {
474
+ left: $s-20 + $s-16;
475
+ width: calc(100% - 44px) !important;
476
+ }
477
+
478
+ // Section divider
479
+
480
+ .actionList-sectionDivider {
481
+ height: 1px;
482
+ background: $actionList-item-divider;
483
+ border: 0;
484
+ margin: ($s-8 - 1px) ($s-8 * -1) $s-8;
485
+ padding: 0;
486
+ }
487
+
488
+ .actionList-sectionDivider--filled {
489
+ height: $s-8;
490
+ border-top: 1px solid $gray-200;
491
+ border-bottom: 1px solid $gray-200;
492
+ background: $gray-100;
493
+ box-sizing: border-box;
494
+ margin: $s-8 ($s-8 * -1);
495
+ }
496
+
497
+ // Section header
498
+
499
+ .actionList-sectionHeader {
500
+ // 32px total height considering 20px line-height
501
+ padding: (($s-32 - $s-20) / 2) $s-8;
502
+ font-size: 12px; // text-small
503
+
504
+ // is this a variable in primer css?
505
+ font-weight: 600;
506
+
507
+ color: $text-secondary;
508
+ }
509
+
510
+ .actionList-sectionHeader--filled {
511
+ background: $gray-100;
512
+ margin: $s-8 ($s-8 * -1);
513
+ border-top: 1px solid $gray-200;
514
+ border-bottom: 1px solid $gray-200;
515
+
516
+ &:first-child {
517
+ margin-top: 0;
518
+ }
519
+ }
520
+
521
+ // Nested content
522
+ // Doesn't work with dividers
523
+
524
+ .actionList-item-nestedContent {
525
+ padding-left: $s-16;
526
+ padding-bottom: $s-8;
527
+ }
@@ -0,0 +1,2 @@
1
+ @import '../support/index.scss';
2
+ @import './actionlist.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;list-style:none}.actionList ul,.actionList li{list-style:none}.actionList-item{position:relative}.actionList-item.actionList-item--selected:before,.actionList-item.actionList-item--selected+.actionList-item:before{visibility:hidden}.actionList-item.actionList-item--selected .actionList-item-content{background:#f0f3f5}@media(hover: hover)and (pointer: fine){.actionList-item.actionList-item--selected .actionList-item-content:hover{background:#e8ebed}}.actionList-item.actionList-item--selected:after{content:"";width:4px;height:24px;border-radius:4px;position:absolute;left:-8px;top:calc(50% - 12px);background:#0366d6}.actionList-item:hover:before,.actionList-item:hover+.actionList-item:before{visibility:hidden}.actionList-item:active:before,.actionList-item:active+.actionList-item:before{visibility:hidden}.actionList-item-content{position:relative;display:flex;align-items:start;border-radius:6px;font-weight:normal;color:inherit;text-decoration:none;border:none;background:none;text-align:start;margin:0;width:100%;padding:6px 8px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background 33.333ms linear}.actionList-item-content:hover{text-decoration:none}.actionList-item-content:focus-visible{outline:none;box-shadow:0 0 0 2px #0366d6;position:relative;z-index:1}@media(hover: hover)and (pointer: fine){.actionList-item-content:hover{background:#f0f3f5;cursor:pointer}}.actionList-item-content:active{background:#e8ebed}@media screen and (prefers-reduced-motion: no-preference){.actionList-item-content: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-content>*{margin-right:8px}>.actionList-item-content:last-child{margin-right:0}.actionList--sizeMedium .actionList-item,.actionList-item--sizeMedium{padding-top:10px;padding-bottom:10px}.actionList--sizeLarge .actionList-item .actionList-item-content,.actionList-item--sizeLarge .actionList-item-content{padding-top:14px;padding-bottom:14px}@media(pointer: coarse){.actionList-item{padding-top:14px;padding-bottom:14px}}.actionList-item--danger .actionList-item-content{color:#cb2431}@media(hover: hover)and (pointer: fine){.actionList-item--danger .actionList-item-content:hover{background:#fff0f2}}.actionList-item--danger .actionList-item-content:active{background:#ffebed}.actionList-item-leadingVisual,.actionList-item-leadingVisual-16,.actionList-item-leadingVisual-20{width:16px;height:20px;display:flex;flex-direction:column;justify-content:center}.actionList-item-leadingVisual svg,.actionList-item-leadingVisual-16 svg,.actionList-item-leadingVisual-20 svg{fill:#6a737d}.actionList-item-leadingVisual-20{width:20px}.actionList-item-label{flex:1}.actionList-item-inlineDescription{align-self:baseline;font-size:12px;line-height:18px;color:#6a737d}.actionList-item-blockDescription{align-self:baseline;display:block;font-size:12px;line-height:18px;color:#6a737d;margin-top:4px}.actionList-item-trailingText{margin-left:16px;float:right;color:#6a737d}.actionList-item-trailingVisual{height:20px;display:flex;flex-direction:column;justify-content:center}.actionList-item-trailingVisual svg{fill:#6a737d}.actionList--single-selection .actionList-item>.actionList-item-content,.actionList--multi-selection .actionList-item>.actionList-item-content,.actionList-item--single-selection>.actionList-item-content,.actionList-item--multi-selection>.actionList-item-content{padding-left:32px}.actionList-item .actionList-item-check{width:16px;height:20px;display:flex;flex-direction:column;justify-content:center;margin-left:-24px;align-items:center}.actionList-item .actionList-item-check svg{fill:#6a737d}.actionList-item .actionList-item-check input{cursor:pointer}.actionList--divided .actionList-item:before,.actionList-item--divided:before{content:"";display:block;position:absolute;width:calc(100% - 16px);height:1px;background:#e9e9ed;top:0;left:8px}.actionList-item:first-child:before,.actionList-sectionDivider+.actionList-item:before,.actionList-sectionHeader+.actionList-item:before{visibility:hidden}.actionList--divided-indent-16 .actionList-item:before,.actionList-item--divided-indent-16:before{left:32px;width:calc(100% - 40px) !important}.actionList--divided-indent-20 .actionList-item:before,.actionList-item--divided-indent-20:before{left:36px;width:calc(100% - 44px) !important}.actionList--divided-indent-24 .actionList-item:before,.actionList-item--divided-indent-24:before{left:40px;width:calc(100% - 48px) !important}.actionList--divided-indent-32 .actionList-item:before,.actionList-item--divided-indent-32:before{left:48px;width:calc(100% - 56px) !important}.actionList--single-selection.actionList--divided .actionList-item:before,.actionList--multi-selection.actionList--divided .actionList-item:before,.actionList-item--single-selection.actionList-item--divided:before,.actionList-item--multi-selection.actionList-item--divided:before{left:32px;width:calc(100% - 40px) !important}.actionList--single-selection.actionList--divided-indent-20 .actionList-item:before,.actionList--multi-selection.actionList--divided-indent-20 .actionList-item:before,.actionList--single-selection .actionList-item--divided-indent-20:before,.actionList--multi-selection .actionList-item--divided-indent-20:before{left:36px;width:calc(100% - 44px) !important}.actionList-sectionDivider{height:1px;background:#e9e9ed;border:0;margin:7px -8px 8px;padding:0}.actionList-sectionDivider--filled{height:8px;border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;background:#f6f8fa;box-sizing:border-box;margin:8px -8px}.actionList-sectionHeader{padding:6px 8px;font-size:12px;font-weight:600;color:#6a737d}.actionList-sectionHeader--filled{background:#f6f8fa;margin:8px -8px;border-top:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8}.actionList-sectionHeader--filled:first-child{margin-top:0}.actionList-item-nestedContent{padding-left:16px;padding-bottom:8px}
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":"AAsoBA,YAAA,WAAA,CAAA,eAAA,CAAA,8BAAA,eAAA,CAAA,iBAAA,iBAAA,CAAA,qHAAA,iBAAA,CAAA,oEAAA,kBAAA,CAAA,wCAAA,0EAAA,kBAAA,CAAA,CAAA,iDAAA,UAAA,CAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,6EAAA,iBAAA,CAAA,+EAAA,iBAAA,CAAA,yBAAA,iBAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,UAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,uCAAA,CAAA,qCAAA,CAAA,+BAAA,oBAAA,CAAA,uCAAA,YAAA,CAAA,4BAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,wCAAA,+BAAA,kBAAA,CAAA,cAAA,CAAA,CAAA,gCAAA,kBAAA,CAAA,0DAAA,gCAAA,8EAAA,CAAA,CAAA,qCAAA,IAAA,kBAAA,CAAA,sCAAA,CAAA,KAAA,qBAAA,CAAA,0CAAA,CAAA,CAAA,2BAAA,gBAAA,CAAA,qCAAA,cAAA,CAAA,sEAAA,gBAAA,CAAA,mBAAA,CAAA,sHAAA,gBAAA,CAAA,mBAAA,CAAA,wBAAA,iBAAA,gBAAA,CAAA,mBAAA,CAAA,CAAA,kDAAA,aAAA,CAAA,wCAAA,wDAAA,kBAAA,CAAA,CAAA,yDAAA,kBAAA,CAAA,mGAAA,UAAA,CAAA,WAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,sBAAA,CAAA,+GAAA,YAAA,CAAA,kCAAA,UAAA,CAAA,uBAAA,MAAA,CAAA,mCAAA,mBAAA,CAAA,cAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,kCAAA,mBAAA,CAAA,aAAA,CAAA,cAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,cAAA,CAAA,8BAAA,gBAAA,CAAA,WAAA,CAAA,aAAA,CAAA,gCAAA,WAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,sBAAA,CAAA,oCAAA,YAAA,CAAA,sQAAA,iBAAA,CAAA,wCAAA,UAAA,CAAA,WAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,sBAAA,CAAA,iBAAA,CAAA,kBAAA,CAAA,4CAAA,YAAA,CAAA,8CAAA,cAAA,CAAA,8EAAA,UAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,uBAAA,CAAA,UAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,QAAA,CAAA,yIAAA,iBAAA,CAAA,kGAAA,SAAA,CAAA,kCAAA,CAAA,kGAAA,SAAA,CAAA,kCAAA,CAAA,kGAAA,SAAA,CAAA,kCAAA,CAAA,kGAAA,SAAA,CAAA,kCAAA,CAAA,wRAAA,SAAA,CAAA,kCAAA,CAAA,wTAAA,SAAA,CAAA,kCAAA,CAAA,2BAAA,UAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mCAAA,UAAA,CAAA,4BAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,qBAAA,CAAA,eAAA,CAAA,0BAAA,eAAA,CAAA,cAAA,CAAA,eAAA,CAAA,aAAA,CAAA,kCAAA,kBAAA,CAAA,eAAA,CAAA,4BAAA,CAAA,+BAAA,CAAA,8CAAA,YAAA,CAAA,+BAAA,iBAAA,CAAA,kBAAA","file":"actionlist.css"}
@@ -0,0 +1 @@
1
+ export {cssstats: require('./stats/actionlist.json')}