jekyll-v4-theme-primer 0.10.0 → 0.12.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +6 -3
- data/_includes/theme.html +1 -1
- data/_sass/@primer/css/base/normalize.scss +1 -0
- data/_sass/@primer/css/core/index.scss +0 -1
- data/_sass/@primer/css/forms/form-group.scss +2 -1
- data/_sass/@primer/css/forms/index.scss +0 -1
- data/_sass/@primer/css/labels/index.scss +0 -1
- data/_sass/@primer/css/layout/app-frame.scss +6 -6
- data/_sass/@primer/css/layout/stack.scss +6 -6
- data/_sass/@primer/css/markdown/lists.scss +4 -4
- data/_sass/@primer/css/primitives/index.scss +9 -9
- data/_sass/@primer/css/support/variables/misc.scss +1 -1
- data/_sass/@primer/css/utilities/borders.scss +8 -8
- data/_sass/@primer/css/utilities/visibility-display.scss +10 -9
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js +1 -1
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css +3 -3
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css.map +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css.json +131 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.d.ts +29 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.js +217 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css.json +23 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css.json +24 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/button_marketing.css.json +33 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css.json +80 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css.json +40 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css.json +80 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css.json +28 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/modal_dialog.js +12 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/nav_list.d.ts +7 -4
- data/_sass/@primer/view-components/app/components/primer/alpha/nav_list.js +121 -9
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css.json +8 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css.json +31 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/tab_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/tab_nav.css.json +24 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css +3 -3
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css.json +134 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css.json +40 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css.json +28 -1
- data/_sass/@primer/view-components/app/components/primer/anchored_position.d.ts +27 -0
- data/_sass/@primer/view-components/app/components/primer/anchored_position.js +149 -0
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css.json +17 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css.json +28 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css.json +22 -1
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css.json +54 -1
- data/_sass/@primer/view-components/app/components/primer/beta/breadcrumbs.css.json +11 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css.json +71 -1
- data/_sass/@primer/view-components/app/components/primer/beta/counter.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/counter.css.json +10 -1
- data/_sass/@primer/view-components/app/components/primer/beta/flash.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/flash.css.json +27 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css.json +25 -1
- data/_sass/@primer/view-components/app/components/primer/beta/link.css.json +19 -1
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css.json +39 -1
- data/_sass/@primer/view-components/app/components/primer/beta/progress_bar.css.json +10 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css.json +13 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css.json +12 -1
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css.json +16 -1
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css.json +12 -1
- data/_sass/@primer/view-components/app/components/primer/focus_group.d.ts +19 -0
- data/_sass/@primer/view-components/app/components/primer/focus_group.js +144 -0
- data/_sass/@primer/view-components/app/components/primer/primer.d.ts +5 -2
- data/_sass/@primer/view-components/app/components/primer/primer.js +5 -2
- data/_sass/@primer/view-components/app/components/primer/truncate.css.json +13 -1
- data/_sass/@primer/view-components/lib/primer/forms/primer_text_field.js +17 -6
- data/_sass/@primer/view-components/package.json +6 -4
- data/_sass/@primer/view-components/static/arguments.json +2167 -346
- data/_sass/@primer/view-components/static/audited_at.json +22 -22
- data/_sass/@primer/view-components/static/classes.json +579 -0
- data/_sass/@primer/view-components/static/constants.json +215 -61
- data/_sass/@primer/view-components/static/info_arch.json +9090 -0
- data/_sass/@primer/view-components/static/previews.json +2020 -0
- data/_sass/@primer/view-components/static/statuses.json +23 -23
- data/_sass/{jekyll-theme-primer.scss → jekyll-v4-theme-primer.scss} +3 -3
- data/_sass/primer.scss +1 -1
- data/assets/css/style.scss +1 -1
- metadata +16 -15
- data/_sass/@primer/css/actionlist/action-list-item-divider.scss +0 -48
- data/_sass/@primer/css/actionlist/action-list-item.scss +0 -593
- data/_sass/@primer/css/actionlist/action-list-tree.scss +0 -118
- data/_sass/@primer/css/actionlist/action-list-variables.scss +0 -8
- data/_sass/@primer/css/actionlist/action-list.scss +0 -67
- data/_sass/@primer/css/actionlist/index.scss +0 -6
- data/_sass/@primer/css/forms/form-validation.scss +0 -265
- data/_sass/@primer/css/labels/diffstat.scss +0 -37
- data/_sass/@primer/view-components/app/components/primer/time_ago_component.d.ts +0 -1
- data/_sass/@primer/view-components/app/components/primer/time_ago_component.js +0 -1
- /data/_sass/@primer/view-components/app/components/primer/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
@@ -1,593 +0,0 @@
|
|
1
|
-
// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
|
2
|
-
|
3
|
-
@mixin activeIndicatorLine($padding-left: -$actionList-item-padding-horizontal) {
|
4
|
-
position: absolute;
|
5
|
-
top: calc(50% - 12px);
|
6
|
-
left: $padding-left;
|
7
|
-
width: $spacer-1;
|
8
|
-
height: $spacer-4;
|
9
|
-
content: '';
|
10
|
-
background: var(--color-accent-fg);
|
11
|
-
border-radius: $border-radius;
|
12
|
-
}
|
13
|
-
|
14
|
-
// <li>
|
15
|
-
.ActionList-item {
|
16
|
-
position: relative;
|
17
|
-
list-style: none;
|
18
|
-
background-color: transparent;
|
19
|
-
border-radius: $border-radius;
|
20
|
-
|
21
|
-
&:hover,
|
22
|
-
&:active {
|
23
|
-
cursor: pointer;
|
24
|
-
}
|
25
|
-
|
26
|
-
// only hover li without list as children
|
27
|
-
&:not(.ActionList-item--hasSubItem),
|
28
|
-
// target contents of first child li if sub-item (li wraps item label + nested ul)
|
29
|
-
&.ActionList-item--hasSubItem > .ActionList-content {
|
30
|
-
@media (hover: hover) {
|
31
|
-
&:hover {
|
32
|
-
cursor: pointer;
|
33
|
-
background-color: var(--color-action-list-item-default-hover-bg);
|
34
|
-
|
35
|
-
&:not(.ActionList-item--navActive):not(:focus-visible) {
|
36
|
-
// Support for "Windows high contrast mode"
|
37
|
-
outline: $border-style $border-width transparent;
|
38
|
-
outline-offset: -$border-width;
|
39
|
-
// stylelint-disable-next-line primer/box-shadow
|
40
|
-
box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
|
41
|
-
}
|
42
|
-
}
|
43
|
-
}
|
44
|
-
|
45
|
-
&:active {
|
46
|
-
background: var(--color-action-list-item-default-active-bg);
|
47
|
-
|
48
|
-
&:not(.ActionList-item--navActive) {
|
49
|
-
// Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
|
50
|
-
outline: $border-style $border-width transparent;
|
51
|
-
outline-offset: -$border-width;
|
52
|
-
// stylelint-disable-next-line primer/box-shadow
|
53
|
-
box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
// hide dividers
|
58
|
-
|
59
|
-
@media (hover: hover) {
|
60
|
-
&:hover {
|
61
|
-
.ActionList-item-label::before,
|
62
|
-
+ .ActionList-item .ActionList-item-label::before {
|
63
|
-
visibility: hidden;
|
64
|
-
}
|
65
|
-
|
66
|
-
.ActionList-item-descriptionWrap--inline::before,
|
67
|
-
+ .ActionList-item .ActionList-item-descriptionWrap--inline::before {
|
68
|
-
visibility: hidden;
|
69
|
-
}
|
70
|
-
}
|
71
|
-
}
|
72
|
-
// stylelint-disable-next-line no-duplicate-selectors
|
73
|
-
&:active {
|
74
|
-
.ActionList-item-label::before,
|
75
|
-
+ .ActionList-item .ActionList-item-label::before {
|
76
|
-
visibility: hidden;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
}
|
80
|
-
|
81
|
-
// target contents of li if sub-item (li wraps item label + nested ul)
|
82
|
-
// collapse styles here
|
83
|
-
&.ActionList-item--hasSubItem {
|
84
|
-
// first child
|
85
|
-
> .ActionList-content {
|
86
|
-
z-index: 1;
|
87
|
-
|
88
|
-
@media (hover: hover) {
|
89
|
-
&:hover {
|
90
|
-
background-color: var(--color-action-list-item-default-hover-bg);
|
91
|
-
}
|
92
|
-
}
|
93
|
-
|
94
|
-
&:active {
|
95
|
-
background-color: var(--color-action-list-item-default-active-bg);
|
96
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
// Make sure that the first visible item isn't a divider
|
101
|
-
&[hidden] + .ActionList-sectionDivider {
|
102
|
-
display: none;
|
103
|
-
}
|
104
|
-
|
105
|
-
// Autocomplete [aria-selected] items
|
106
|
-
|
107
|
-
&[aria-selected='true'] {
|
108
|
-
font-weight: $font-weight-normal;
|
109
|
-
background: var(--color-action-list-item-default-selected-bg);
|
110
|
-
|
111
|
-
@media (hover: hover) {
|
112
|
-
&:hover {
|
113
|
-
background-color: var(--color-action-list-item-default-hover-bg);
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
&::before,
|
118
|
-
+ .ActionList-item::before {
|
119
|
-
visibility: hidden;
|
120
|
-
}
|
121
|
-
|
122
|
-
// blue accent line
|
123
|
-
&::after {
|
124
|
-
@include activeIndicatorLine(-$spacer-1);
|
125
|
-
}
|
126
|
-
}
|
127
|
-
|
128
|
-
// active state [aria-current]
|
129
|
-
|
130
|
-
&.ActionList-item--navActive {
|
131
|
-
&:not(.ActionList-item--subItem) {
|
132
|
-
.ActionList-item-label {
|
133
|
-
font-weight: $font-weight-bold;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
&:not(.ActionList-item--danger) {
|
138
|
-
background: var(--color-action-list-item-default-selected-bg);
|
139
|
-
|
140
|
-
@media (hover: hover) {
|
141
|
-
&:hover {
|
142
|
-
background-color: var(--color-action-list-item-default-hover-bg);
|
143
|
-
}
|
144
|
-
}
|
145
|
-
|
146
|
-
&::before,
|
147
|
-
+ .ActionList-item::before {
|
148
|
-
visibility: hidden;
|
149
|
-
}
|
150
|
-
|
151
|
-
// blue accent line
|
152
|
-
&::after {
|
153
|
-
@include activeIndicatorLine;
|
154
|
-
}
|
155
|
-
}
|
156
|
-
}
|
157
|
-
|
158
|
-
// checkbox item [aria-checked]
|
159
|
-
// listbox [aria-selected]
|
160
|
-
|
161
|
-
&[aria-checked='true'],
|
162
|
-
&[aria-selected='true'] {
|
163
|
-
// multiselect checkmark
|
164
|
-
.ActionList-item-multiSelectCheckmark {
|
165
|
-
visibility: visible;
|
166
|
-
opacity: 1;
|
167
|
-
transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
|
168
|
-
}
|
169
|
-
|
170
|
-
// singleselect checkmark
|
171
|
-
.ActionList-item-singleSelectCheckmark {
|
172
|
-
visibility: visible;
|
173
|
-
|
174
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
175
|
-
animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
176
|
-
}
|
177
|
-
}
|
178
|
-
|
179
|
-
// checkbox
|
180
|
-
.ActionList-item-multiSelectIcon {
|
181
|
-
.ActionList-item-multiSelectIconRect {
|
182
|
-
fill: var(--color-accent-fg);
|
183
|
-
stroke: var(--color-accent-fg);
|
184
|
-
stroke-width: $border-width;
|
185
|
-
}
|
186
|
-
|
187
|
-
.ActionList-item-multiSelectCheckmark {
|
188
|
-
fill: var(--color-fg-on-emphasis);
|
189
|
-
}
|
190
|
-
}
|
191
|
-
}
|
192
|
-
|
193
|
-
&[aria-checked='false'],
|
194
|
-
&[aria-selected='false'] {
|
195
|
-
// multiselect checkmark
|
196
|
-
.ActionList-item-multiSelectCheckmark {
|
197
|
-
visibility: hidden;
|
198
|
-
opacity: 0;
|
199
|
-
transition:
|
200
|
-
visibility 0 linear $actionList-item-checkmark-transition-timing,
|
201
|
-
opacity $actionList-item-checkmark-transition-timing;
|
202
|
-
}
|
203
|
-
|
204
|
-
// singleselect checkmark
|
205
|
-
.ActionList-item-singleSelectCheckmark {
|
206
|
-
visibility: hidden;
|
207
|
-
transition: visibility 0s linear 200ms;
|
208
|
-
clip-path: inset(16px 0 0 0);
|
209
|
-
|
210
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
211
|
-
animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
|
212
|
-
}
|
213
|
-
}
|
214
|
-
|
215
|
-
// checkbox
|
216
|
-
.ActionList-item-multiSelectIcon {
|
217
|
-
.ActionList-item-multiSelectIconRect {
|
218
|
-
fill: var(--color-canvas-default);
|
219
|
-
stroke: var(--color-border-default);
|
220
|
-
stroke-width: $border-width;
|
221
|
-
}
|
222
|
-
}
|
223
|
-
|
224
|
-
.ActionList-item-multiSelectIconRect {
|
225
|
-
fill: var(--color-canvas-default);
|
226
|
-
border: $border-width $border-style var(--color-border-default);
|
227
|
-
}
|
228
|
-
}
|
229
|
-
|
230
|
-
@keyframes checkmarkIn {
|
231
|
-
from {
|
232
|
-
clip-path: inset(16px 0 0 0);
|
233
|
-
}
|
234
|
-
|
235
|
-
to {
|
236
|
-
clip-path: inset(0 0 0 0);
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
@keyframes checkmarkOut {
|
241
|
-
from {
|
242
|
-
clip-path: inset(0 0 0 0);
|
243
|
-
}
|
244
|
-
|
245
|
-
to {
|
246
|
-
clip-path: inset(16px 0 0 0);
|
247
|
-
}
|
248
|
-
}
|
249
|
-
|
250
|
-
// disabled
|
251
|
-
&[aria-disabled='true'] {
|
252
|
-
.ActionList-content {
|
253
|
-
.ActionList-item-label,
|
254
|
-
.ActionList-item-description {
|
255
|
-
color: var(--color-primer-fg-disabled);
|
256
|
-
}
|
257
|
-
|
258
|
-
.ActionList-item-visual {
|
259
|
-
fill: var(--color-primer-fg-disabled);
|
260
|
-
}
|
261
|
-
}
|
262
|
-
|
263
|
-
@media (hover: hover) {
|
264
|
-
&:hover {
|
265
|
-
cursor: not-allowed;
|
266
|
-
background-color: transparent;
|
267
|
-
}
|
268
|
-
}
|
269
|
-
}
|
270
|
-
|
271
|
-
// variants
|
272
|
-
|
273
|
-
// danger
|
274
|
-
&.ActionList-item--danger {
|
275
|
-
.ActionList-item-label {
|
276
|
-
color: var(--color-danger-fg);
|
277
|
-
}
|
278
|
-
|
279
|
-
.ActionList-item-visual {
|
280
|
-
color: var(--color-danger-fg);
|
281
|
-
}
|
282
|
-
|
283
|
-
@media (hover: hover) {
|
284
|
-
&:hover {
|
285
|
-
background: var(--color-action-list-item-danger-hover-bg);
|
286
|
-
|
287
|
-
.ActionList-item-label {
|
288
|
-
color: var(--color-action-list-item-danger-hover-text);
|
289
|
-
}
|
290
|
-
}
|
291
|
-
}
|
292
|
-
|
293
|
-
.ActionList-content {
|
294
|
-
&:active {
|
295
|
-
background: var(--color-action-list-item-danger-active-bg);
|
296
|
-
}
|
297
|
-
}
|
298
|
-
}
|
299
|
-
|
300
|
-
// if nested list exists, remove default padding
|
301
|
-
.ActionList {
|
302
|
-
// stylelint-disable-next-line primer/spacing
|
303
|
-
padding: unset;
|
304
|
-
}
|
305
|
-
}
|
306
|
-
|
307
|
-
// button or a href
|
308
|
-
.ActionList-content {
|
309
|
-
position: relative;
|
310
|
-
display: grid;
|
311
|
-
width: 100%;
|
312
|
-
// stylelint-disable-next-line primer/spacing
|
313
|
-
padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
|
314
|
-
font-size: $body-font-size;
|
315
|
-
font-weight: $font-weight-normal;
|
316
|
-
color: var(--color-fg-default);
|
317
|
-
text-align: left;
|
318
|
-
user-select: none;
|
319
|
-
background-color: transparent;
|
320
|
-
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
321
|
-
border: none;
|
322
|
-
border-radius: $border-radius;
|
323
|
-
transition: $actionList-item-bg-transition;
|
324
|
-
touch-action: manipulation;
|
325
|
-
touch-action: manipulation;
|
326
|
-
-webkit-tap-highlight-color: transparent;
|
327
|
-
grid-template-rows: min-content;
|
328
|
-
grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
|
329
|
-
grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
|
330
|
-
align-items: start;
|
331
|
-
|
332
|
-
// column-gap persists with empty grid-areas, margin applies only when children exist
|
333
|
-
> :not(:last-child) {
|
334
|
-
margin-right: $spacer-2;
|
335
|
-
}
|
336
|
-
|
337
|
-
// state
|
338
|
-
|
339
|
-
&:hover {
|
340
|
-
text-decoration: none;
|
341
|
-
}
|
342
|
-
|
343
|
-
&:focus {
|
344
|
-
@include focusOutline;
|
345
|
-
|
346
|
-
// remove fallback :focus if :focus-visible is supported
|
347
|
-
&:not(:focus-visible) {
|
348
|
-
outline: solid 1px transparent;
|
349
|
-
}
|
350
|
-
}
|
351
|
-
|
352
|
-
// default focus state
|
353
|
-
&:focus-visible {
|
354
|
-
@include focusOutline;
|
355
|
-
}
|
356
|
-
|
357
|
-
// disabled
|
358
|
-
&[aria-disabled='true'] {
|
359
|
-
.ActionList-item-label,
|
360
|
-
.ActionList-item-description {
|
361
|
-
color: var(--color-primer-fg-disabled);
|
362
|
-
}
|
363
|
-
|
364
|
-
.ActionList-item-visual {
|
365
|
-
fill: var(--color-primer-fg-disabled);
|
366
|
-
}
|
367
|
-
|
368
|
-
@media (hover: hover) {
|
369
|
-
&:hover {
|
370
|
-
cursor: not-allowed;
|
371
|
-
background-color: transparent;
|
372
|
-
}
|
373
|
-
}
|
374
|
-
}
|
375
|
-
|
376
|
-
// collapsible item [aria-expanded]
|
377
|
-
|
378
|
-
// nesting (single level)
|
379
|
-
// target items inside expanded subgroups
|
380
|
-
&[aria-expanded] {
|
381
|
-
+ .ActionList--subGroup {
|
382
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
383
|
-
transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
|
384
|
-
}
|
385
|
-
|
386
|
-
.ActionList-content {
|
387
|
-
padding-left: $spacer-4;
|
388
|
-
}
|
389
|
-
}
|
390
|
-
|
391
|
-
// has 16px leading visual
|
392
|
-
&.ActionList-content--visual16 + .ActionList--subGroup {
|
393
|
-
.ActionList-content {
|
394
|
-
padding-left: $spacer-5;
|
395
|
-
}
|
396
|
-
}
|
397
|
-
|
398
|
-
// has 20px leading visual
|
399
|
-
&.ActionList-content--visual20 + .ActionList--subGroup {
|
400
|
-
.ActionList-content {
|
401
|
-
padding-left: $spacer-2 * 4.5; // 36px
|
402
|
-
}
|
403
|
-
}
|
404
|
-
|
405
|
-
// has 24px leading visual
|
406
|
-
&.ActionList-content--visual24 + .ActionList--subGroup {
|
407
|
-
.ActionList-content {
|
408
|
-
padding-left: $spacer-6;
|
409
|
-
}
|
410
|
-
}
|
411
|
-
}
|
412
|
-
|
413
|
-
&[aria-expanded='true'] {
|
414
|
-
.ActionList-item-collapseIcon {
|
415
|
-
transition: transform 120ms linear;
|
416
|
-
transform: scaleY(-1);
|
417
|
-
}
|
418
|
-
|
419
|
-
+ .ActionList--subGroup {
|
420
|
-
height: auto;
|
421
|
-
overflow: visible;
|
422
|
-
visibility: visible;
|
423
|
-
opacity: 1;
|
424
|
-
transform: translateY(0);
|
425
|
-
}
|
426
|
-
|
427
|
-
&.ActionList-content--hasActiveSubItem {
|
428
|
-
> .ActionList-item-label {
|
429
|
-
font-weight: $font-weight-bold;
|
430
|
-
}
|
431
|
-
}
|
432
|
-
}
|
433
|
-
|
434
|
-
&[aria-expanded='false'] {
|
435
|
-
.ActionList-item-collapseIcon {
|
436
|
-
transition: transform 120ms linear;
|
437
|
-
transform: scaleY(1);
|
438
|
-
}
|
439
|
-
|
440
|
-
+ .ActionList--subGroup {
|
441
|
-
height: 0;
|
442
|
-
overflow: hidden;
|
443
|
-
visibility: hidden;
|
444
|
-
opacity: 0;
|
445
|
-
transform: translateY(-$spacer-3);
|
446
|
-
}
|
447
|
-
|
448
|
-
// show active indicator on parent collapse if child is active
|
449
|
-
&.ActionList-content--hasActiveSubItem {
|
450
|
-
background: var(--color-action-list-item-default-selected-bg);
|
451
|
-
|
452
|
-
.ActionList-item-label {
|
453
|
-
font-weight: $font-weight-bold;
|
454
|
-
}
|
455
|
-
|
456
|
-
&::before,
|
457
|
-
+ .ActionList-item::before {
|
458
|
-
visibility: hidden;
|
459
|
-
}
|
460
|
-
|
461
|
-
// blue accent line
|
462
|
-
&::after {
|
463
|
-
@include activeIndicatorLine;
|
464
|
-
}
|
465
|
-
}
|
466
|
-
}
|
467
|
-
|
468
|
-
// sizes
|
469
|
-
|
470
|
-
&.ActionList-content--sizeMedium {
|
471
|
-
// 44px total height
|
472
|
-
// stylelint-disable-next-line primer/spacing
|
473
|
-
padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
|
474
|
-
}
|
475
|
-
|
476
|
-
&.ActionList-content--sizeLarge {
|
477
|
-
// 48px total height
|
478
|
-
// stylelint-disable-next-line primer/spacing
|
479
|
-
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
480
|
-
}
|
481
|
-
|
482
|
-
&.ActionList-content--fontSmall {
|
483
|
-
font-size: $font-size-small;
|
484
|
-
}
|
485
|
-
|
486
|
-
// On pointer:coarse (mobile), all list items are large
|
487
|
-
@media (pointer: coarse) {
|
488
|
-
// stylelint-disable-next-line primer/spacing
|
489
|
-
padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
|
490
|
-
}
|
491
|
-
|
492
|
-
&.ActionList-content--blockDescription {
|
493
|
-
// if leading/trailing visual, align with first line of content
|
494
|
-
.ActionList-item-visual {
|
495
|
-
place-self: start;
|
496
|
-
}
|
497
|
-
}
|
498
|
-
}
|
499
|
-
|
500
|
-
// place children on grid
|
501
|
-
|
502
|
-
.ActionList-item-action--leading {
|
503
|
-
grid-area: leadingAction;
|
504
|
-
}
|
505
|
-
|
506
|
-
.ActionList-item-visual--leading {
|
507
|
-
grid-area: leadingVisual;
|
508
|
-
}
|
509
|
-
|
510
|
-
.ActionList-item-label {
|
511
|
-
grid-area: label;
|
512
|
-
}
|
513
|
-
|
514
|
-
.ActionList-item-visual--trailing {
|
515
|
-
grid-area: trailingVisual;
|
516
|
-
}
|
517
|
-
|
518
|
-
.ActionList-item-action--trailing {
|
519
|
-
grid-area: trailingAction;
|
520
|
-
}
|
521
|
-
|
522
|
-
// wrapper span
|
523
|
-
// default block
|
524
|
-
.ActionList-item-descriptionWrap {
|
525
|
-
grid-area: label;
|
526
|
-
display: flex;
|
527
|
-
flex-direction: column;
|
528
|
-
|
529
|
-
.ActionList-item-description {
|
530
|
-
margin-top: $spacer-1;
|
531
|
-
}
|
532
|
-
|
533
|
-
.ActionList-item-label {
|
534
|
-
font-weight: $font-weight-bold;
|
535
|
-
}
|
536
|
-
}
|
537
|
-
|
538
|
-
// inline
|
539
|
-
.ActionList-item-descriptionWrap--inline {
|
540
|
-
position: relative;
|
541
|
-
flex-direction: row;
|
542
|
-
align-items: baseline;
|
543
|
-
|
544
|
-
.ActionList-item-description {
|
545
|
-
// stylelint-disable-next-line primer/spacing
|
546
|
-
margin-left: $actionList-item-padding-horizontal;
|
547
|
-
}
|
548
|
-
}
|
549
|
-
|
550
|
-
// description
|
551
|
-
.ActionList-item-description {
|
552
|
-
font-size: $font-size-small;
|
553
|
-
font-weight: $font-weight-normal;
|
554
|
-
line-height: $lh-default;
|
555
|
-
color: var(--color-fg-muted);
|
556
|
-
}
|
557
|
-
|
558
|
-
// helper for grid alignment with multi-line content
|
559
|
-
// span wrapping svg or text
|
560
|
-
.ActionList-item-visual,
|
561
|
-
.ActionList-item-action {
|
562
|
-
display: flex;
|
563
|
-
min-height: $actionList-item-height-sm;
|
564
|
-
color: var(--color-fg-muted); // if visual is text
|
565
|
-
pointer-events: none;
|
566
|
-
fill: var(--color-fg-muted);
|
567
|
-
align-items: center;
|
568
|
-
}
|
569
|
-
|
570
|
-
// text
|
571
|
-
// stylelint-disable-next-line no-duplicate-selectors
|
572
|
-
.ActionList-item-label {
|
573
|
-
position: relative; // for pseudo dividers
|
574
|
-
font-weight: $font-weight-normal;
|
575
|
-
// we need a strict value here for grid alignment
|
576
|
-
// stylelint-disable-next-line primer/typography
|
577
|
-
line-height: $actionList-item-label-line-height;
|
578
|
-
color: var(--color-fg-default);
|
579
|
-
}
|
580
|
-
|
581
|
-
.ActionList-item-label--truncate {
|
582
|
-
overflow: hidden;
|
583
|
-
text-overflow: ellipsis;
|
584
|
-
white-space: nowrap;
|
585
|
-
}
|
586
|
-
|
587
|
-
// nested lists (only supports 1 level currently)
|
588
|
-
// target ActionList-item--subItem for padding-left to maintain :active :after state
|
589
|
-
|
590
|
-
// TODO: remove with PVC implementation
|
591
|
-
.ActionList-item--subItem > .ActionList-content {
|
592
|
-
font-size: $font-size-small;
|
593
|
-
}
|
@@ -1,118 +0,0 @@
|
|
1
|
-
// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing
|
2
|
-
// tree-view variant
|
3
|
-
// renders ActionList with default styling for tree-view
|
4
|
-
// collapse/expand icons presents as leadingActions, rotate 90deg
|
5
|
-
// connecting vertical lines between collapse groups
|
6
|
-
// consistent font-size between nested groups
|
7
|
-
|
8
|
-
@mixin treeConnectingLine($left) {
|
9
|
-
position: absolute;
|
10
|
-
left: $left;
|
11
|
-
width: 1px;
|
12
|
-
height: 100%;
|
13
|
-
content: '';
|
14
|
-
background: var(--color-action-list-item-inline-divider);
|
15
|
-
}
|
16
|
-
|
17
|
-
.ActionList--tree {
|
18
|
-
--ActionList-tree-depth: 1;
|
19
|
-
// TODO: remove with PVC implementation
|
20
|
-
.ActionList-item--subItem > .ActionList-content {
|
21
|
-
font-size: $body-font-size;
|
22
|
-
}
|
23
|
-
|
24
|
-
.ActionList-item {
|
25
|
-
// class for single tree items not within a group
|
26
|
-
&.ActionList-item--singleton {
|
27
|
-
.ActionList-content {
|
28
|
-
padding-left: $spacer-5;
|
29
|
-
}
|
30
|
-
}
|
31
|
-
|
32
|
-
// normal font-weight for any active item
|
33
|
-
&.ActionList-item--navActive {
|
34
|
-
&:not(.ActionList-item--subItem) {
|
35
|
-
.ActionList-item-label {
|
36
|
-
font-weight: $font-weight-normal;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
|
-
.ActionList-content {
|
43
|
-
// nesting (infinite levels)
|
44
|
-
// target items inside expanded subgroup
|
45
|
-
&[aria-expanded] {
|
46
|
-
+ .ActionList--subGroup {
|
47
|
-
position: relative;
|
48
|
-
|
49
|
-
// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
|
50
|
-
.ActionList-content {
|
51
|
-
padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
|
52
|
-
}
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
// tree-view specific collapse icon positioning/animation
|
57
|
-
&[aria-expanded='true'] {
|
58
|
-
.ActionList-item-collapseIcon {
|
59
|
-
transition: transform 120ms linear;
|
60
|
-
transform: rotate(0deg);
|
61
|
-
}
|
62
|
-
|
63
|
-
// normal weight for parent folder containing active child
|
64
|
-
&.ActionList-content--hasActiveSubItem {
|
65
|
-
> .ActionList-item-label {
|
66
|
-
font-weight: $font-weight-normal;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
70
|
-
|
71
|
-
&[aria-expanded='false'] {
|
72
|
-
.ActionList-item-collapseIcon {
|
73
|
-
transition: transform 120ms linear;
|
74
|
-
transform: rotate(-90deg);
|
75
|
-
}
|
76
|
-
|
77
|
-
&.ActionList-content--hasActiveSubItem {
|
78
|
-
> .ActionList-item-label {
|
79
|
-
font-weight: $font-weight-normal;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
// expand/collapse group
|
86
|
-
.ActionList-item--hasSubItem {
|
87
|
-
.ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
|
88
|
-
.ActionList-content {
|
89
|
-
// increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
|
90
|
-
// creates a slight indent of child items
|
91
|
-
> span:first-child {
|
92
|
-
padding-left: $spacer-4;
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
// first subitem
|
99
|
-
> [aria-level='1'].ActionList-item--hasSubItem {
|
100
|
-
> .ActionList--subGroup {
|
101
|
-
&::before {
|
102
|
-
@include treeConnectingLine($left: $spacer-3);
|
103
|
-
}
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
// all other subitems
|
108
|
-
// center connecting line with parent (line is 1px (8px - 1px)
|
109
|
-
.ActionList-item--hasSubItem:not([aria-level='1']) {
|
110
|
-
> .ActionList--subGroup {
|
111
|
-
&::before {
|
112
|
-
@include treeConnectingLine(
|
113
|
-
$left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})
|
114
|
-
);
|
115
|
-
}
|
116
|
-
}
|
117
|
-
}
|
118
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
$actionList-item-height-sm: $spacer-2 * 2.5 !default;
|
2
|
-
$actionList-item-label-line-height: $spacer-2 * 2.5 !default;
|
3
|
-
$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default;
|
4
|
-
$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !default;
|
5
|
-
$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
|
6
|
-
$actionList-item-padding-horizontal: $spacer-2 !default;
|
7
|
-
$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
|
8
|
-
$actionList-item-checkmark-transition-timing: 50ms !default;
|