@primer/css 0.0.0-2021111423737 → 0.0.0-202111151281
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 +4 -5
- package/actionlist/action-list-item.scss +61 -37
- package/actionlist/action-list-tree.scss +91 -0
- package/actionlist/index.scss +1 -0
- package/base/base.scss +2 -47
- package/base/normalize.scss +52 -12
- package/buttons/button.scss +25 -0
- package/buttons/misc.scss +19 -12
- package/dist/actionlist.css +1 -1
- package/dist/actionlist.css.map +1 -1
- package/dist/alerts.css.map +1 -1
- package/dist/autocomplete.css.map +1 -1
- package/dist/avatars.css.map +1 -1
- package/dist/base.css +1 -1
- package/dist/base.css.map +1 -1
- package/dist/blankslate.css.map +1 -1
- package/dist/box.css.map +1 -1
- package/dist/branch-name.css.map +1 -1
- package/dist/breadcrumb.css.map +1 -1
- package/dist/buttons.css +1 -1
- package/dist/buttons.css.map +1 -1
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/dropdown.css +1 -1
- package/dist/dropdown.css.map +1 -1
- package/dist/forms.css +1 -1
- package/dist/forms.css.map +1 -1
- package/dist/header.css.map +1 -1
- package/dist/labels.css.map +1 -1
- package/dist/layout.css.map +1 -1
- package/dist/links.css.map +1 -1
- package/dist/loaders.css.map +1 -1
- package/dist/markdown.css.map +1 -1
- package/dist/marketing-buttons.css +1 -1
- package/dist/marketing-buttons.css.map +1 -1
- package/dist/marketing-links.css +1 -1
- package/dist/marketing-links.css.map +1 -1
- package/dist/marketing-type.css.map +1 -1
- package/dist/marketing-utilities.css.map +1 -1
- package/dist/marketing.css +1 -1
- package/dist/marketing.css.map +1 -1
- package/dist/meta.json +55 -55
- package/dist/navigation.css +1 -1
- package/dist/navigation.css.map +1 -1
- package/dist/pagination.css.map +1 -1
- package/dist/popover.css.map +1 -1
- package/dist/primer.css +3 -3
- package/dist/primer.css.map +1 -1
- package/dist/product.css +1 -1
- package/dist/product.css.map +1 -1
- package/dist/progress.css.map +1 -1
- package/dist/select-menu.css.map +1 -1
- package/dist/stats/actionlist.json +1 -1
- package/dist/stats/base.json +1 -1
- package/dist/stats/buttons.json +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/dropdown.json +1 -1
- package/dist/stats/forms.json +1 -1
- package/dist/stats/marketing-buttons.json +1 -1
- package/dist/stats/marketing-links.json +1 -1
- package/dist/stats/marketing.json +1 -1
- package/dist/stats/navigation.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/dist/stats/product.json +1 -1
- package/dist/stats/toasts.json +1 -1
- package/dist/stats/utilities.json +1 -1
- package/dist/subhead.css.map +1 -1
- package/dist/timeline.css.map +1 -1
- package/dist/toasts.css +1 -1
- package/dist/toasts.css.map +1 -1
- package/dist/tooltips.css.map +1 -1
- package/dist/truncate.css.map +1 -1
- package/dist/utilities.css +1 -1
- package/dist/utilities.css.map +1 -1
- package/dropdown/dropdown.scss +2 -0
- package/forms/form-control.scss +8 -0
- package/forms/form-group.scss +13 -38
- package/forms/input-group.scss +0 -8
- package/marketing/buttons/button.scss +30 -3
- package/marketing/links/link.scss +4 -1
- package/navigation/menu.scss +8 -6
- package/navigation/sidenav.scss +10 -1
- package/package.json +1 -1
- package/support/mixins/misc.scss +0 -9
- package/toasts/toasts.scss +4 -7
- package/utilities/details.scss +3 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
# @primer/css
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
4
|
-
|
|
5
|
-
### Major Changes
|
|
6
|
-
|
|
7
|
-
- [#1744](https://github.com/primer/css/pull/1744) [`d0425dcd`](https://github.com/primer/css/commit/d0425dcddb801260aaae7dbcc75acaeecdfbeb6a) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
|
|
3
|
+
## 0.0.0-202111151281
|
|
8
4
|
|
|
9
5
|
### Patch Changes
|
|
10
6
|
|
|
11
7
|
- Fake entry to force publishing
|
|
12
8
|
|
|
9
|
+
* [#1803](https://github.com/primer/css/pull/1803) [`a83249fc`](https://github.com/primer/css/commit/a83249fc4a3ed872bd2813719345b7f0a4975a4b) Thanks [@langermank](https://github.com/langermank)! - - Adds ActionList tree-view specific CSS
|
|
10
|
+
- Minor bug fixes for ActionList default
|
|
11
|
+
|
|
13
12
|
## 19.1.0
|
|
14
13
|
|
|
15
14
|
### Minor Changes
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
@mixin focusOutline {
|
|
2
|
+
position: relative;
|
|
3
|
+
z-index: 1;
|
|
4
|
+
outline: none;
|
|
5
|
+
box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
@mixin activeIndicatorLine {
|
|
2
9
|
position: absolute;
|
|
3
10
|
top: calc(50% - 12px);
|
|
@@ -26,12 +33,6 @@
|
|
|
26
33
|
}
|
|
27
34
|
}
|
|
28
35
|
|
|
29
|
-
// li only: focus, a href: focus-within on li
|
|
30
|
-
&:focus,
|
|
31
|
-
&:focus-within {
|
|
32
|
-
@include focusOutline;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
36
|
// only hover li without list as children
|
|
36
37
|
&:not(.ActionList-item--hasSubItem) {
|
|
37
38
|
&:hover {
|
|
@@ -112,6 +113,40 @@
|
|
|
112
113
|
|
|
113
114
|
// collapsible item [aria-expanded]
|
|
114
115
|
|
|
116
|
+
// nesting (single level)
|
|
117
|
+
// target items inside expanded subgroups
|
|
118
|
+
&[aria-expanded] {
|
|
119
|
+
.ActionList--subGroup {
|
|
120
|
+
.ActionList-content {
|
|
121
|
+
padding-left: $spacer-4;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// has 16px leading visual
|
|
126
|
+
.ActionList-content--visual16 + .ActionList--subGroup {
|
|
127
|
+
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
|
128
|
+
.ActionList-content {
|
|
129
|
+
padding-left: $spacer-5;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// has 20px leading visual
|
|
134
|
+
.ActionList-content--visual20 + .ActionList--subGroup {
|
|
135
|
+
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
|
136
|
+
.ActionList-content {
|
|
137
|
+
padding-left: $spacer-2 * 4.5; // 36px
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// has 24px leading visual
|
|
142
|
+
.ActionList-content--visual24 + .ActionList--subGroup {
|
|
143
|
+
// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
|
|
144
|
+
.ActionList-content {
|
|
145
|
+
padding-left: $spacer-6;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
115
150
|
&[aria-expanded='true'] {
|
|
116
151
|
.ActionList-item-collapseIcon {
|
|
117
152
|
transition: transform 120ms linear;
|
|
@@ -202,7 +237,8 @@
|
|
|
202
237
|
.ActionList-item-multiSelectCheckmark {
|
|
203
238
|
visibility: hidden;
|
|
204
239
|
opacity: 0;
|
|
205
|
-
transition:
|
|
240
|
+
transition:
|
|
241
|
+
visibility 0 linear $actionList-item-checkmark-transition-timing,
|
|
206
242
|
opacity $actionList-item-checkmark-transition-timing;
|
|
207
243
|
}
|
|
208
244
|
|
|
@@ -312,6 +348,7 @@
|
|
|
312
348
|
display: grid;
|
|
313
349
|
// stylelint-disable-next-line primer/spacing
|
|
314
350
|
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
|
351
|
+
font-size: $body-font-size;
|
|
315
352
|
font-weight: $font-weight-normal;
|
|
316
353
|
color: var(--color-fg-default);
|
|
317
354
|
user-select: none;
|
|
@@ -319,14 +356,18 @@
|
|
|
319
356
|
transition: $actionList-item-bg-transition;
|
|
320
357
|
grid-template-rows: min-content;
|
|
321
358
|
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
|
322
|
-
grid-template-columns: min-content min-content minmax(
|
|
323
|
-
align-items:
|
|
359
|
+
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
|
360
|
+
align-items: start;
|
|
324
361
|
|
|
325
362
|
// column-gap persists with empty grid-areas, margin applies only when children exist
|
|
326
363
|
> :not(:last-child) {
|
|
327
364
|
margin-right: $spacer-2;
|
|
328
365
|
}
|
|
329
366
|
|
|
367
|
+
&:focus-visible {
|
|
368
|
+
@include focusOutline;
|
|
369
|
+
}
|
|
370
|
+
|
|
330
371
|
// sizes
|
|
331
372
|
|
|
332
373
|
&.ActionList-content--sizeMedium {
|
|
@@ -341,6 +382,10 @@
|
|
|
341
382
|
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
|
342
383
|
}
|
|
343
384
|
|
|
385
|
+
&.ActionList-content--fontSmall {
|
|
386
|
+
font-size: $font-size-small;
|
|
387
|
+
}
|
|
388
|
+
|
|
344
389
|
// On pointer:coarse (mobile), all list items are large
|
|
345
390
|
@media (pointer: coarse) {
|
|
346
391
|
// stylelint-disable-next-line primer/spacing
|
|
@@ -434,37 +479,16 @@
|
|
|
434
479
|
color: var(--color-fg-default);
|
|
435
480
|
}
|
|
436
481
|
|
|
482
|
+
.ActionList-item-label--truncate {
|
|
483
|
+
overflow: hidden;
|
|
484
|
+
text-overflow: ellipsis;
|
|
485
|
+
white-space: nowrap;
|
|
486
|
+
}
|
|
487
|
+
|
|
437
488
|
// nested lists (only supports 1 level currently)
|
|
438
489
|
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
|
439
490
|
|
|
491
|
+
// TODO: remove with PVC implementation
|
|
440
492
|
.ActionList-item--subItem > .ActionList-content {
|
|
441
493
|
font-size: $font-size-small;
|
|
442
494
|
}
|
|
443
|
-
|
|
444
|
-
// no leading visual
|
|
445
|
-
.ActionList--subGroup {
|
|
446
|
-
.ActionList-item--subItem {
|
|
447
|
-
padding-left: $spacer-3;
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
// has 16px leading visual
|
|
452
|
-
.ActionList-content--visual16 + .ActionList--subGroup {
|
|
453
|
-
.ActionList-item--subItem {
|
|
454
|
-
padding-left: $spacer-4;
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
// has 20px leading visual
|
|
459
|
-
.ActionList-content--visual20 + .ActionList--subGroup {
|
|
460
|
-
.ActionList-item--subItem {
|
|
461
|
-
padding-left: $spacer-3 * 1.75;
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
// has 24px leading visual
|
|
466
|
-
.ActionList-content--visual24 + .ActionList--subGroup {
|
|
467
|
-
.ActionList-item--subItem {
|
|
468
|
-
padding-left: $spacer-5;
|
|
469
|
-
}
|
|
470
|
-
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// tree-view variant
|
|
2
|
+
// renders ActionList with default styling for tree-view
|
|
3
|
+
// collapse/expand icons presents as leadingActions, rotate 90deg
|
|
4
|
+
// connecting vertical lines between collapse groups
|
|
5
|
+
// consistent font-size between nested groups
|
|
6
|
+
|
|
7
|
+
@mixin treeConnectingLine($left) {
|
|
8
|
+
position: absolute;
|
|
9
|
+
left: $left;
|
|
10
|
+
width: 1px;
|
|
11
|
+
height: 100%;
|
|
12
|
+
content: '';
|
|
13
|
+
background: var(--color-action-list-item-inline-divider);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ActionList--tree {
|
|
17
|
+
--ActionList-tree-depth: 1;
|
|
18
|
+
// TODO: remove with PVC implementation
|
|
19
|
+
.ActionList-item--subItem > .ActionList-content {
|
|
20
|
+
font-size: $body-font-size;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ActionList-item {
|
|
24
|
+
// nesting (infinate levels)
|
|
25
|
+
// target items inside expanded subgroup
|
|
26
|
+
&[aria-expanded] {
|
|
27
|
+
.ActionList--subGroup {
|
|
28
|
+
position: relative;
|
|
29
|
+
|
|
30
|
+
// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
|
|
31
|
+
// stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
|
|
32
|
+
.ActionList-content {
|
|
33
|
+
padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// tree-view specific collapse icon positioning/animation
|
|
39
|
+
&[aria-expanded='true'] {
|
|
40
|
+
.ActionList-item-collapseIcon {
|
|
41
|
+
transition: transform 120ms linear;
|
|
42
|
+
transform: rotate(0deg);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&[aria-expanded='false'] {
|
|
47
|
+
.ActionList-item-collapseIcon {
|
|
48
|
+
transition: transform 120ms linear;
|
|
49
|
+
transform: rotate(-90deg);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// expand/collapse group
|
|
55
|
+
.ActionList-item--hasSubItem {
|
|
56
|
+
.ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
|
|
57
|
+
// stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
|
|
58
|
+
.ActionList-content {
|
|
59
|
+
// increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
|
|
60
|
+
// creates a slight indent of child items
|
|
61
|
+
// stylelint-disable-next-line selector-max-specificity, selector-max-type, max-nesting-depth, selector-max-compound-selectors
|
|
62
|
+
> span:first-child {
|
|
63
|
+
padding-left: $spacer-4;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// first subitem
|
|
70
|
+
> [aria-level='1'].ActionList-item--hasSubItem {
|
|
71
|
+
> .ActionList--subGroup {
|
|
72
|
+
// stylelint-disable-next-line selector-max-specificity
|
|
73
|
+
&::before {
|
|
74
|
+
@include treeConnectingLine($left: $spacer-3);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// all other subitems
|
|
80
|
+
// center connecting line with parent (line is 1px (8px - 1px)
|
|
81
|
+
.ActionList-item--hasSubItem:not([aria-level='1']) {
|
|
82
|
+
> .ActionList--subGroup {
|
|
83
|
+
// stylelint-disable-next-line selector-max-specificity
|
|
84
|
+
&::before {
|
|
85
|
+
@include treeConnectingLine(
|
|
86
|
+
$left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
package/actionlist/index.scss
CHANGED
package/base/base.scss
CHANGED
|
@@ -77,55 +77,10 @@ button {
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
details {
|
|
80
|
-
summary {
|
|
81
|
-
cursor: pointer;
|
|
82
|
-
}
|
|
80
|
+
summary { cursor: pointer; }
|
|
83
81
|
|
|
84
82
|
&:not([open]) {
|
|
85
83
|
// Set details content hidden by default for browsers that don't do this
|
|
86
|
-
> *:not(summary) {
|
|
87
|
-
display: none !important;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// global focus styles
|
|
93
|
-
|
|
94
|
-
a,
|
|
95
|
-
button,
|
|
96
|
-
input,
|
|
97
|
-
textarea,
|
|
98
|
-
select {
|
|
99
|
-
// fallback :focus state
|
|
100
|
-
&:focus {
|
|
101
|
-
@include focusOutline;
|
|
102
|
-
|
|
103
|
-
// remove fallback :focus if :focus-visible is supported
|
|
104
|
-
&:not(:focus-visible) {
|
|
105
|
-
outline: solid 1px transparent;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// default focus state
|
|
110
|
-
&:focus-visible {
|
|
111
|
-
@include focusOutline;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
input:not([type='radio'], [type='checkbox']),
|
|
116
|
-
textarea,
|
|
117
|
-
select {
|
|
118
|
-
&:focus,
|
|
119
|
-
&:focus-visible {
|
|
120
|
-
outline-offset: 0;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
// for handling focus conditionally
|
|
125
|
-
.focus {
|
|
126
|
-
@include focusOutline;
|
|
127
|
-
|
|
128
|
-
&:is(input, textarea, select) {
|
|
129
|
-
outline-offset: 0;
|
|
84
|
+
> *:not(summary) { display: none !important; }
|
|
130
85
|
}
|
|
131
86
|
}
|
package/base/normalize.scss
CHANGED
|
@@ -39,8 +39,7 @@ header,
|
|
|
39
39
|
main, /* 2 */
|
|
40
40
|
menu,
|
|
41
41
|
nav,
|
|
42
|
-
section {
|
|
43
|
-
/* 1 */
|
|
42
|
+
section { /* 1 */
|
|
44
43
|
display: block;
|
|
45
44
|
}
|
|
46
45
|
|
|
@@ -97,6 +96,16 @@ a {
|
|
|
97
96
|
background-color: transparent; /* 1 */
|
|
98
97
|
}
|
|
99
98
|
|
|
99
|
+
/**
|
|
100
|
+
* Remove the outline on focused links when they are also active or hovered
|
|
101
|
+
* in all browsers (opinionated).
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
a:active,
|
|
105
|
+
a:hover {
|
|
106
|
+
outline-width: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
100
109
|
/* Text-level semantics
|
|
101
110
|
========================================================================== */
|
|
102
111
|
|
|
@@ -269,8 +278,7 @@ optgroup {
|
|
|
269
278
|
*/
|
|
270
279
|
|
|
271
280
|
button,
|
|
272
|
-
input {
|
|
273
|
-
/* 1 */
|
|
281
|
+
input { /* 1 */
|
|
274
282
|
overflow: visible;
|
|
275
283
|
}
|
|
276
284
|
|
|
@@ -280,8 +288,7 @@ input {
|
|
|
280
288
|
*/
|
|
281
289
|
|
|
282
290
|
button,
|
|
283
|
-
select {
|
|
284
|
-
/* 1 */
|
|
291
|
+
select { /* 1 */
|
|
285
292
|
text-transform: none;
|
|
286
293
|
}
|
|
287
294
|
|
|
@@ -298,6 +305,29 @@ html [type="button"], /* 1 */
|
|
|
298
305
|
-webkit-appearance: button; /* 2 */
|
|
299
306
|
}
|
|
300
307
|
|
|
308
|
+
/**
|
|
309
|
+
* Remove the inner border and padding in Firefox.
|
|
310
|
+
*/
|
|
311
|
+
|
|
312
|
+
button::-moz-focus-inner,
|
|
313
|
+
[type="button"]::-moz-focus-inner,
|
|
314
|
+
[type="reset"]::-moz-focus-inner,
|
|
315
|
+
[type="submit"]::-moz-focus-inner {
|
|
316
|
+
border-style: none;
|
|
317
|
+
padding: 0;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/**
|
|
321
|
+
* Restore the focus styles unset by the previous rule.
|
|
322
|
+
*/
|
|
323
|
+
|
|
324
|
+
button:-moz-focusring,
|
|
325
|
+
[type="button"]:-moz-focusring,
|
|
326
|
+
[type="reset"]:-moz-focusring,
|
|
327
|
+
[type="submit"]:-moz-focusring {
|
|
328
|
+
outline: 1px dotted ButtonText;
|
|
329
|
+
}
|
|
330
|
+
|
|
301
331
|
/**
|
|
302
332
|
* Change the border, margin, and padding in all browsers (opinionated).
|
|
303
333
|
*/
|
|
@@ -337,8 +367,8 @@ textarea {
|
|
|
337
367
|
* 2. Remove the padding in IE 10-.
|
|
338
368
|
*/
|
|
339
369
|
|
|
340
|
-
[type=
|
|
341
|
-
[type=
|
|
370
|
+
[type="checkbox"],
|
|
371
|
+
[type="radio"] {
|
|
342
372
|
box-sizing: border-box; /* 1 */
|
|
343
373
|
padding: 0; /* 2 */
|
|
344
374
|
}
|
|
@@ -347,17 +377,27 @@ textarea {
|
|
|
347
377
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
348
378
|
*/
|
|
349
379
|
|
|
350
|
-
[type=
|
|
351
|
-
[type=
|
|
380
|
+
[type="number"]::-webkit-inner-spin-button,
|
|
381
|
+
[type="number"]::-webkit-outer-spin-button {
|
|
352
382
|
height: auto;
|
|
353
383
|
}
|
|
354
384
|
|
|
385
|
+
/**
|
|
386
|
+
* 1. Correct the odd appearance in Chrome and Safari.
|
|
387
|
+
* 2. Correct the outline style in Safari.
|
|
388
|
+
*/
|
|
389
|
+
|
|
390
|
+
[type="search"] {
|
|
391
|
+
-webkit-appearance: textfield; /* 1 */
|
|
392
|
+
outline-offset: -2px; /* 2 */
|
|
393
|
+
}
|
|
394
|
+
|
|
355
395
|
/**
|
|
356
396
|
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
|
357
397
|
*/
|
|
358
398
|
|
|
359
|
-
[type=
|
|
360
|
-
[type=
|
|
399
|
+
[type="search"]::-webkit-search-cancel-button,
|
|
400
|
+
[type="search"]::-webkit-search-decoration {
|
|
361
401
|
-webkit-appearance: none;
|
|
362
402
|
}
|
|
363
403
|
|
package/buttons/button.scss
CHANGED
|
@@ -100,6 +100,14 @@
|
|
|
100
100
|
color: var(--color-primer-fg-disabled);
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
+
|
|
104
|
+
// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
|
|
105
|
+
&:focus,
|
|
106
|
+
&.focus {
|
|
107
|
+
border-color: var(--color-btn-focus-border);
|
|
108
|
+
outline: none;
|
|
109
|
+
box-shadow: var(--color-btn-focus-shadow);
|
|
110
|
+
}
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
// Primary button
|
|
@@ -136,6 +144,13 @@
|
|
|
136
144
|
}
|
|
137
145
|
}
|
|
138
146
|
|
|
147
|
+
&:focus,
|
|
148
|
+
&.focus {
|
|
149
|
+
background-color: var(--color-btn-primary-focus-bg);
|
|
150
|
+
border-color: var(--color-btn-primary-focus-border);
|
|
151
|
+
box-shadow: var(--color-btn-primary-focus-shadow);
|
|
152
|
+
}
|
|
153
|
+
|
|
139
154
|
.Counter {
|
|
140
155
|
color: inherit;
|
|
141
156
|
background-color: var(--color-btn-primary-counter-bg);
|
|
@@ -189,6 +204,11 @@
|
|
|
189
204
|
}
|
|
190
205
|
}
|
|
191
206
|
|
|
207
|
+
&:focus {
|
|
208
|
+
border-color: var(--color-btn-outline-focus-border);
|
|
209
|
+
box-shadow: var(--color-btn-outline-focus-shadow);
|
|
210
|
+
}
|
|
211
|
+
|
|
192
212
|
.Counter {
|
|
193
213
|
color: inherit;
|
|
194
214
|
background-color: var(--color-btn-outline-counter-bg);
|
|
@@ -246,6 +266,11 @@
|
|
|
246
266
|
}
|
|
247
267
|
}
|
|
248
268
|
|
|
269
|
+
&:focus {
|
|
270
|
+
border-color: var(--color-btn-danger-focus-border);
|
|
271
|
+
box-shadow: var(--color-btn-danger-focus-shadow);
|
|
272
|
+
}
|
|
273
|
+
|
|
249
274
|
.Counter {
|
|
250
275
|
color: inherit;
|
|
251
276
|
background-color: var(--color-btn-danger-counter-bg);
|
package/buttons/misc.scss
CHANGED
|
@@ -37,7 +37,6 @@
|
|
|
37
37
|
color: var(--color-accent-fg);
|
|
38
38
|
background-color: transparent; // Reset default gradient backgrounds and colors
|
|
39
39
|
border: 0;
|
|
40
|
-
border-radius: $border-radius;
|
|
41
40
|
box-shadow: none;
|
|
42
41
|
|
|
43
42
|
&:hover,
|
|
@@ -49,14 +48,15 @@
|
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
&:active,
|
|
51
|
+
&:focus,
|
|
52
52
|
&.selected,
|
|
53
53
|
&[aria-selected='true'],
|
|
54
54
|
&.zeroclipboard-is-active {
|
|
55
55
|
color: var(--color-accent-fg);
|
|
56
|
-
background: none;
|
|
56
|
+
background-color: none;
|
|
57
57
|
border-color: var(--color-btn-active-border);
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
outline: none;
|
|
59
|
+
box-shadow: var(--color-btn-focus-shadow);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&:active &.zeroclipboard-is-active {
|
|
@@ -89,18 +89,14 @@
|
|
|
89
89
|
border: 0;
|
|
90
90
|
box-shadow: none;
|
|
91
91
|
|
|
92
|
-
&:hover {
|
|
93
|
-
color: var(--color-accent-fg);
|
|
94
|
-
}
|
|
92
|
+
&:hover { color: var(--color-accent-fg); }
|
|
95
93
|
|
|
96
94
|
&.disabled,
|
|
97
95
|
&[aria-disabled='true'] {
|
|
98
96
|
color: var(--color-primer-fg-disabled);
|
|
99
97
|
cursor: default;
|
|
100
98
|
|
|
101
|
-
&:hover {
|
|
102
|
-
color: var(--color-primer-fg-disabled);
|
|
103
|
-
}
|
|
99
|
+
&:hover { color: var(--color-primer-fg-disabled); }
|
|
104
100
|
}
|
|
105
101
|
}
|
|
106
102
|
|
|
@@ -116,13 +112,18 @@
|
|
|
116
112
|
color: var(--color-fg-muted);
|
|
117
113
|
background: transparent;
|
|
118
114
|
border: 0;
|
|
115
|
+
outline: none;
|
|
119
116
|
|
|
120
117
|
&:hover {
|
|
121
118
|
color: var(--color-fg-default);
|
|
122
119
|
}
|
|
123
120
|
|
|
124
|
-
&:active
|
|
125
|
-
|
|
121
|
+
&:active,
|
|
122
|
+
&:focus {
|
|
123
|
+
color: var(--color-fg-muted);
|
|
124
|
+
border-color: var(--color-btn-active-border);
|
|
125
|
+
outline: none;
|
|
126
|
+
box-shadow: var(--color-btn-focus-shadow);
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
|
|
@@ -215,4 +216,10 @@
|
|
|
215
216
|
color: var(--color-accent-fg);
|
|
216
217
|
cursor: pointer;
|
|
217
218
|
}
|
|
219
|
+
|
|
220
|
+
&:focus {
|
|
221
|
+
z-index: 1;
|
|
222
|
+
outline: 0;
|
|
223
|
+
box-shadow: var(--color-primer-shadow-focus);
|
|
224
|
+
}
|
|
218
225
|
}
|
package/dist/actionlist.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.ActionList{padding:8px}.ActionList--full{padding:0}.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{visibility:hidden}.ActionList-item{position:relative;list-style:none;background-color:transparent;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:focus,.ActionList-item:focus-within{position:relative;z-index:1;outline:2px solid var(--color-accent-fg);outline-offset:2px}.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--subItem) .ActionList-item-label{font-weight:600}.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--hasActiveSubItem>.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-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::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-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)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{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[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover)and (pointer: fine){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.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:min-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.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.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-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;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;line-height:20px;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--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--full{padding:0}.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{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{position:relative}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;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--subItem) .ActionList-item-label{font-weight:600}.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] .ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-item[aria-expanded] .ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-item[aria-expanded] .ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-item[aria-expanded] .ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.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--hasActiveSubItem>.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-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::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-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)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{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[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover)and (pointer: fine){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-size:14px;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:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start}.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{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.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-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;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;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.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--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"}
|
package/dist/alerts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAsgBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["file:///home/runner/work/css/css/src/autocomplete/index.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["file:///home/runner/work/css/css/src/autocomplete/index.scss%23sass"],"names":[],"mappings":"AAqgBA,sBAAA,iBAAA,CAAA,UAAA,CAAA,UAAA,CAAA,eAAA,CAAA,eAAA,CAAA,cAAA,CAAA,eAAA,CAAA,sCAAA,CAAA,4CAAA,CAAA,iBAAA,CAAA,qCAAA,CAAA,mBAAA,aAAA,CAAA,UAAA,CAAA,eAAA,CAAA,eAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,oBAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,cAAA,CAAA,4CAAA,CAAA,QAAA,CAAA,yBAAA,iCAAA,CAAA,oBAAA,CAAA,6CAAA,CAAA,2BAAA,wBAAA,CAAA,uGAAA,iCAAA,CAAA,oBAAA,CAAA,6CAAA,CAAA,6GAAA,wBAAA,CAAA,WAAA,iBAAA,CAAA,KAAA,CAAA,MAAA,CAAA,eAAA,CAAA,SAAA,CAAA,QAAA,CAAA,eAAA,CAAA,eAAA,CAAA,cAAA,CAAA,sCAAA,CAAA,4CAAA,CAAA,iBAAA,CAAA,qCAAA,CAAA,cAAA,aAAA,CAAA,eAAA,CAAA,eAAA,CAAA,iDAAA,CAAA,oBAAA,eAAA,CAAA,2BAAA,CAAA,yBAAA,eAAA,CAAA,8BAAA,CAAA,6BAAA,CAAA,0BAAA,0BAAA,CAAA,2BAAA,CAAA,oBAAA,iCAAA,CAAA,oBAAA,CAAA,uCAAA,CAAA,0BAAA,iCAAA,CAAA,6BAAA,wBAAA,CAAA,iEAAA,iCAAA,CAAA,oBAAA,CAAA,uCAAA,CAAA,6EAAA,iCAAA,CAAA,mFAAA,wBAAA,CAAA,qBAAA,iBAAA,CAAA,KAAA,CAAA,MAAA,CAAA,UAAA,CAAA,yBAAA,sCAAA,oBAAA,CAAA,mBAAA,CAAA,+BAAA,gBAAA,CAAA","file":"autocomplete.css"}
|
package/dist/avatars.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["file:///home/runner/work/css/css/src/avatars/index.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["file:///home/runner/work/css/css/src/avatars/index.scss%23sass"],"names":[],"mappings":"AAogBA,QAAA,oBACE,CAAA,eAAA,CAAA,aAAA,CAAA,qBAAA,CAAA,uCAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,+CAAA,CAAA,aAAA,UAAA,CAAA,aAAA,CAAA,mBAAA,oBAAA,CAAA,iBAAA,CAAA,kCAAA,iBAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,UAAA,UAAA,CAAA,WAAA,CAAA,qBAAA,iBAAA,CAAA,cAAA,iBAAA,CAAA,UAAA,CAAA,UAAA,CAAA,4CAAA,CAAA,iBAAA,CAAA,2CAAA,CAAA,aAAA,iBAAA,CAAA,cAAA,CAAA,WAAA,CAAA,+BAAA,iBAAA,CAAA,8BAAA,cAAA,CAAA,qCAAA,cAAA,CAAA,kBAAA,YAAA,CAAA,sCAAA,CAAA,0BAAA,iBAAA,CAAA,SAAA,CAAA,YAAA,CAAA,UAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4CAAA,CAAA,kDAAA,CAAA,iBAAA,CAAA,iCAAA,CAAA,sCAAA,SAAA,CAAA,qCAAA,SAAA,CAAA,cAAA,CAAA,8BAAA,iBAAA,CAAA,yCAAA,YAAA,CAAA,SAAA,CAAA,gCAAA,gBAAA,CAAA,+CAAA,YAAA,CAAA,SAAA,CAAA,qCAAA,uBAAA,CAAA,oBAAA,SAAA,CAAA,cAAA,CAAA,qCAAA,CAAA,uDAAA,iBAAA,CAAA,aAAA,CAAA,WAAA,CAAA,UAAA,CAAA,iBAAA,CAAA,6CAAA,CAAA,4BAAA,UAAA,CAAA,8CAAA,CAAA,2BAAA,UAAA,CAAA,yCAAA,CAAA,sCAAA,OAAA,CAAA,0BAAA,CAAA,oDAAA,cAAA,CAAA,eAAA,CAAA,wCAAA,yCAAA,CAAA,gDAAA,SAAA,CAAA,+CAAA,SAAA,CAAA,qCAAA,CAAA,4BAAA,cAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,iDAAA,CAAA,aAAA,YAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,4CAAA,CAAA,iBAAA,CAAA,qCAAA,CAAA,kBAAA,wBAAA,CAAA,sBAAA,CAAA,yBAAA,CAAA,oBAAA,UAAA,CAAA,WAAA,CAAA,qBAAA,UAAA,CAAA,WAAA,CAAA,oBAAA,WAAA,CAAA,YAAA,CAAA,kBAAA,iBAAA,CAAA,0BAAA,iBAAA,CAAA,OAAA,CAAA,MAAA,CAAA,UAAA,CAAA,UAAA,CAAA,oDAAA,CAAA,+BAAA,iBAAA","file":"avatars.css"}
|