@mixtint/primer-view-components 0.89.1 → 0.90.1
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/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +210 -647
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_bar.css +9 -3
- package/app/components/primer/alpha/action_list.css +92 -2
- package/app/components/primer/alpha/auto_complete.css +4 -22
- package/app/components/primer/alpha/auto_complete.css.json +1 -3
- package/app/components/primer/alpha/banner.css +0 -1
- package/app/components/primer/alpha/button_marketing.css +4 -4
- package/app/components/primer/alpha/dialog.css +66 -1
- package/app/components/primer/alpha/dialog.css.json +2 -1
- package/app/components/primer/alpha/dropdown.css +0 -6
- package/app/components/primer/alpha/layout.css +3 -1
- package/app/components/primer/alpha/menu.css +0 -6
- package/app/components/primer/alpha/overlay.css +5 -0
- package/app/components/primer/alpha/segmented_control.css +0 -4
- package/app/components/primer/alpha/tab_nav.css +0 -8
- package/app/components/primer/alpha/text_field.css +97 -5
- package/app/components/primer/alpha/text_field.css.json +2 -2
- package/app/components/primer/alpha/toggle_switch.css +8 -7
- package/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js +1 -1
- package/app/components/primer/alpha/tree_view.css +1 -0
- package/app/components/primer/alpha/underline_nav.css +0 -3
- package/app/components/primer/beta/avatar.css +0 -1
- package/app/components/primer/beta/avatar_stack.css +33 -0
- package/app/components/primer/beta/blankslate.css +2 -61
- package/app/components/primer/beta/border_box.css +35 -0
- package/app/components/primer/beta/breadcrumbs.css +7 -4
- package/app/components/primer/beta/breadcrumbs.css.json +2 -1
- package/app/components/primer/beta/button.css +51 -1
- package/app/components/primer/beta/flash.css +0 -16
- package/app/components/primer/beta/label.css +0 -2
- package/app/components/primer/beta/link.css +0 -2
- package/app/components/primer/beta/popover.css +138 -85
- package/app/components/primer/beta/popover.css.json +22 -16
- package/app/components/primer/beta/state.css +0 -1
- package/app/components/primer/beta/subhead.css +0 -8
- package/app/components/primer/beta/timeline_item.css +0 -5
- package/app/components/primer/beta/truncate.css +0 -1
- package/app/components/primer/dialog_helper.js +10 -1
- package/app/components/primer/open_project/avatar_stack.css +10 -0
- package/app/components/primer/open_project/border_box/collapsible_header.css +3 -1
- package/app/components/primer/open_project/border_grid.css +11 -9
- package/app/components/primer/open_project/collapsible.d.ts +1 -1
- package/app/components/primer/open_project/collapsible.js +8 -4
- package/app/components/primer/open_project/filterable_tree_view.css +2 -7
- package/app/components/primer/open_project/page_header.css +2 -5
- package/app/components/primer/open_project/pagination.css +4 -1
- package/app/components/primer/open_project/side_panel/section.css +3 -3
- package/package.json +35 -15
- package/static/arguments.json +12 -0
- package/static/classes.json +21 -0
- package/static/classnames.cjs +516 -0
- package/static/classnames.d.ts +2 -0
- package/static/classnames.js +518 -0
- package/static/info_arch.json +59 -2
- package/static/previews.json +2439 -2400
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
/* CSS component styles here */
|
|
2
2
|
|
|
3
3
|
/* alpha */
|
|
4
|
-
|
|
5
4
|
/* stylelint-disable selector-max-compound-selectors */
|
|
6
|
-
|
|
7
5
|
/* stylelint-disable selector-max-specificity */
|
|
8
|
-
|
|
9
6
|
/* stylelint-disable max-nesting-depth */
|
|
10
|
-
|
|
11
7
|
:root {
|
|
12
8
|
--actionListContent-paddingBlock: var(--control-medium-paddingBlock);
|
|
13
9
|
}
|
|
@@ -15,13 +11,11 @@
|
|
|
15
11
|
/* ActionList */
|
|
16
12
|
|
|
17
13
|
/* stylelint-disable-next-line selector-max-type */
|
|
18
|
-
|
|
19
14
|
action-list {
|
|
20
15
|
display: block;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
/* stylelint-disable-next-line selector-max-type */
|
|
24
|
-
|
|
25
19
|
nav-list {
|
|
26
20
|
display: block;
|
|
27
21
|
}
|
|
@@ -32,7 +26,6 @@ nav-list {
|
|
|
32
26
|
}
|
|
33
27
|
|
|
34
28
|
/* <ul> */
|
|
35
|
-
|
|
36
29
|
.ActionListWrap {
|
|
37
30
|
list-style: none;
|
|
38
31
|
}
|
|
@@ -84,14 +77,12 @@ nav-list {
|
|
|
84
77
|
}
|
|
85
78
|
|
|
86
79
|
/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
|
|
87
|
-
|
|
88
80
|
.ActionListItem:first-of-type .ActionListItem-label::before,
|
|
89
81
|
.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {
|
|
90
82
|
visibility: hidden;
|
|
91
83
|
}
|
|
92
84
|
|
|
93
85
|
/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
|
|
94
|
-
|
|
95
86
|
.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,
|
|
96
87
|
.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
|
|
97
88
|
visibility: hidden;
|
|
@@ -295,14 +286,12 @@ nav-list {
|
|
|
295
286
|
}
|
|
296
287
|
|
|
297
288
|
/* button or a href */
|
|
298
|
-
|
|
299
289
|
.ActionListContent {
|
|
300
290
|
position: relative;
|
|
301
291
|
display: grid;
|
|
302
292
|
width: 100%;
|
|
303
293
|
/* stylelint-disable-next-line primer/spacing */
|
|
304
294
|
padding-block: var(--actionListContent-paddingBlock);
|
|
305
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
306
295
|
padding-inline: var(--control-medium-paddingInline-condensed);
|
|
307
296
|
color: var(--control-fgColor-rest);
|
|
308
297
|
text-align: left;
|
|
@@ -321,77 +310,56 @@ nav-list {
|
|
|
321
310
|
|
|
322
311
|
/* column-gap persists with empty grid-areas, margin applies only when children exist */
|
|
323
312
|
}
|
|
324
|
-
|
|
325
313
|
.ActionListContent > :not(:last-child) {
|
|
326
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
327
314
|
margin-right: var(--control-medium-gap);
|
|
328
315
|
}
|
|
329
|
-
|
|
330
316
|
/* state */
|
|
331
|
-
|
|
332
317
|
.ActionListContent:hover {
|
|
333
318
|
-webkit-text-decoration: none;
|
|
334
319
|
text-decoration: none;
|
|
335
320
|
}
|
|
336
|
-
|
|
337
321
|
/* disabled */
|
|
338
|
-
|
|
339
322
|
.ActionListContent[aria-disabled='true'] .ActionListItem-label,.ActionListContent[aria-disabled='true'] .ActionListItem-description {
|
|
340
323
|
color: var(--control-fgColor-disabled);
|
|
341
324
|
}
|
|
342
|
-
|
|
343
325
|
.ActionListContent[aria-disabled='true'] .ActionListItem-visual {
|
|
344
326
|
fill: var(--control-fgColor-disabled);
|
|
345
327
|
}
|
|
346
|
-
|
|
347
328
|
@media (hover: hover) {
|
|
348
329
|
.ActionListContent[aria-disabled='true']:hover {
|
|
349
330
|
cursor: not-allowed;
|
|
350
331
|
background-color: transparent;
|
|
351
332
|
}
|
|
352
333
|
}
|
|
353
|
-
|
|
354
334
|
/* collapsible item [aria-expanded] */
|
|
355
|
-
|
|
356
335
|
/* nesting (single level)
|
|
357
336
|
target items inside expanded subgroups */
|
|
358
|
-
|
|
359
337
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
360
|
-
|
|
361
338
|
.ActionListContent[aria-expanded] + .ActionList--subGroup {
|
|
362
339
|
transition:
|
|
363
340
|
opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),
|
|
364
341
|
transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
365
342
|
}
|
|
366
343
|
}
|
|
367
|
-
|
|
368
344
|
:is(.ActionListContent[aria-expanded] + .ActionList--subGroup) .ActionListContent {
|
|
369
345
|
padding-left: var(--base-size-24);
|
|
370
346
|
}
|
|
371
|
-
|
|
372
347
|
/* has 16px leading visual */
|
|
373
|
-
|
|
374
348
|
:is(.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup) .ActionListContent {
|
|
375
349
|
padding-left: var(--base-size-32);
|
|
376
350
|
}
|
|
377
|
-
|
|
378
351
|
/* has 20px leading visual */
|
|
379
|
-
|
|
380
352
|
:is(.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup) .ActionListContent {
|
|
381
353
|
padding-left: var(--base-size-36);
|
|
382
354
|
}
|
|
383
|
-
|
|
384
355
|
/* has 24px leading visual */
|
|
385
|
-
|
|
386
356
|
:is(.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup) .ActionListContent {
|
|
387
357
|
padding-left: var(--base-size-40);
|
|
388
358
|
}
|
|
389
|
-
|
|
390
359
|
.ActionListContent[aria-expanded='true'] .ActionListItem-collapseIcon {
|
|
391
360
|
transition: transform 120ms linear;
|
|
392
361
|
transform: scaleY(-1);
|
|
393
362
|
}
|
|
394
|
-
|
|
395
363
|
.ActionListContent[aria-expanded='true'] + .ActionList--subGroup {
|
|
396
364
|
height: auto;
|
|
397
365
|
overflow: visible;
|
|
@@ -399,16 +367,13 @@ nav-list {
|
|
|
399
367
|
opacity: 1;
|
|
400
368
|
transform: translateY(0);
|
|
401
369
|
}
|
|
402
|
-
|
|
403
370
|
.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='true'] > .ActionListItem-label {
|
|
404
371
|
font-weight: var(--base-text-weight-semibold);
|
|
405
372
|
}
|
|
406
|
-
|
|
407
373
|
.ActionListContent[aria-expanded='false'] .ActionListItem-collapseIcon {
|
|
408
374
|
transition: transform 120ms linear;
|
|
409
375
|
transform: scaleY(1);
|
|
410
376
|
}
|
|
411
|
-
|
|
412
377
|
.ActionListContent[aria-expanded='false'] + .ActionList--subGroup {
|
|
413
378
|
height: 0;
|
|
414
379
|
overflow: hidden;
|
|
@@ -416,23 +381,17 @@ nav-list {
|
|
|
416
381
|
opacity: 0;
|
|
417
382
|
transform: translateY(calc(-1 * var(--base-size-16)));
|
|
418
383
|
}
|
|
419
|
-
|
|
420
384
|
/* show active indicator on parent collapse if child is active */
|
|
421
|
-
|
|
422
385
|
.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] {
|
|
423
386
|
background: var(--control-transparent-bgColor-selected);
|
|
424
387
|
}
|
|
425
|
-
|
|
426
388
|
.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label {
|
|
427
389
|
font-weight: var(--base-text-weight-semibold);
|
|
428
390
|
}
|
|
429
|
-
|
|
430
391
|
.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] + .ActionListItem::before {
|
|
431
392
|
visibility: hidden;
|
|
432
393
|
}
|
|
433
|
-
|
|
434
394
|
/* blue accent line */
|
|
435
|
-
|
|
436
395
|
.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::after {
|
|
437
396
|
position: absolute;
|
|
438
397
|
top: calc(50% - 12px);
|
|
@@ -443,58 +402,43 @@ nav-list {
|
|
|
443
402
|
background: var(--borderColor-accent-emphasis);
|
|
444
403
|
border-radius: var(--borderRadius-medium);
|
|
445
404
|
}
|
|
446
|
-
|
|
447
405
|
/*
|
|
448
406
|
* checkbox item [aria-checked]
|
|
449
407
|
* listbox [aria-selected]
|
|
450
408
|
*/
|
|
451
|
-
|
|
452
409
|
:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox {
|
|
453
410
|
background: var(--control-checked-bgColor-rest);
|
|
454
411
|
border-color: var(--control-checked-borderColor-rest);
|
|
455
412
|
transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
|
|
456
413
|
}
|
|
457
|
-
|
|
458
414
|
:is(:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox)::before {
|
|
459
415
|
visibility: visible;
|
|
460
416
|
transition: visibility 0s linear 0s;
|
|
461
417
|
animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
|
|
462
418
|
}
|
|
463
|
-
|
|
464
419
|
/* singleselect checkmark */
|
|
465
|
-
|
|
466
420
|
:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .ActionListItem-singleSelectCheckmark {
|
|
467
421
|
visibility: visible;
|
|
468
422
|
}
|
|
469
|
-
|
|
470
423
|
/* singleselect checkmark */
|
|
471
|
-
|
|
472
424
|
:is(.ActionListContent[aria-checked='false'],.ActionListContent[aria-selected='false']) .ActionListItem-singleSelectCheckmark {
|
|
473
425
|
visibility: hidden;
|
|
474
426
|
transition: visibility 0s linear 200ms;
|
|
475
427
|
}
|
|
476
|
-
|
|
477
428
|
/* sizes */
|
|
478
|
-
|
|
479
429
|
.ActionListContent.ActionListContent--sizeLarge {
|
|
480
430
|
--actionListContent-paddingBlock: var(--control-large-paddingBlock);
|
|
481
431
|
}
|
|
482
|
-
|
|
483
432
|
.ActionListContent.ActionListContent--sizeXLarge {
|
|
484
433
|
--actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);
|
|
485
434
|
}
|
|
486
|
-
|
|
487
435
|
/* On pointer:coarse (mobile), all list items are large */
|
|
488
|
-
|
|
489
436
|
@media (pointer: coarse) {
|
|
490
|
-
|
|
491
437
|
.ActionListContent {
|
|
492
438
|
--actionListContent-paddingBlock: var(--control-large-paddingBlock);
|
|
493
439
|
}
|
|
494
440
|
}
|
|
495
|
-
|
|
496
441
|
/* if leading/trailing visual, align with first line of content */
|
|
497
|
-
|
|
498
442
|
.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual {
|
|
499
443
|
place-self: start;
|
|
500
444
|
}
|
|
@@ -520,27 +464,23 @@ nav-list {
|
|
|
520
464
|
/* have leading visual svg filled with chosen color */
|
|
521
465
|
|
|
522
466
|
/* stylelint-disable-next-line selector-max-type */
|
|
523
|
-
|
|
524
467
|
.ActionListItem-visual--leading svg {
|
|
525
468
|
fill: currentcolor;
|
|
526
469
|
}
|
|
527
470
|
|
|
528
471
|
/* wrapper span
|
|
529
472
|
default block */
|
|
530
|
-
|
|
531
473
|
.ActionListItem-descriptionWrap {
|
|
532
474
|
grid-area: label;
|
|
533
475
|
display: flex;
|
|
534
476
|
flex-direction: column;
|
|
535
477
|
gap: var(--base-size-4);
|
|
536
478
|
}
|
|
537
|
-
|
|
538
479
|
.ActionListItem-descriptionWrap .ActionListItem-label {
|
|
539
480
|
font-weight: var(--base-text-weight-semibold);
|
|
540
481
|
}
|
|
541
482
|
|
|
542
483
|
/* inline */
|
|
543
|
-
|
|
544
484
|
.ActionListItem-descriptionWrap--inline {
|
|
545
485
|
position: relative;
|
|
546
486
|
flex-direction: row;
|
|
@@ -549,7 +489,6 @@ nav-list {
|
|
|
549
489
|
}
|
|
550
490
|
|
|
551
491
|
/* description */
|
|
552
|
-
|
|
553
492
|
.ActionListItem-description {
|
|
554
493
|
font-size: var(--text-body-size-small);
|
|
555
494
|
font-weight: var(--base-text-weight-normal);
|
|
@@ -559,7 +498,6 @@ nav-list {
|
|
|
559
498
|
|
|
560
499
|
/* helper for grid alignment with multi-line content
|
|
561
500
|
span wrapping svg or text */
|
|
562
|
-
|
|
563
501
|
.ActionListItem-visual,
|
|
564
502
|
.ActionListItem-action {
|
|
565
503
|
display: flex;
|
|
@@ -571,7 +509,6 @@ nav-list {
|
|
|
571
509
|
}
|
|
572
510
|
|
|
573
511
|
/* text */
|
|
574
|
-
|
|
575
512
|
.ActionListItem-label {
|
|
576
513
|
position: relative;
|
|
577
514
|
font-size: var(--text-body-size-medium);
|
|
@@ -694,28 +631,24 @@ nav-list {
|
|
|
694
631
|
.ActionList-sectionDivider--filled:first-child {
|
|
695
632
|
margin-block-start: 0;
|
|
696
633
|
}
|
|
697
|
-
|
|
698
634
|
/* autocomplete */
|
|
699
635
|
|
|
700
636
|
/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
|
|
701
637
|
** AutoComplete relies on FormControl, Overlay and ActionList CSS */
|
|
702
638
|
|
|
703
639
|
/* Stacked label (default) */
|
|
704
|
-
|
|
705
640
|
.autocomplete-label-stacked {
|
|
706
641
|
display: block;
|
|
707
642
|
margin-bottom: var(--base-size-6);
|
|
708
643
|
}
|
|
709
644
|
|
|
710
645
|
/* Inline label (non-default) */
|
|
711
|
-
|
|
712
646
|
.autocomplete-label-inline {
|
|
713
647
|
display: inline;
|
|
714
648
|
margin-right: var(--base-size-6);
|
|
715
649
|
}
|
|
716
650
|
|
|
717
651
|
/* Switch to stacked at smaller viewport */
|
|
718
|
-
|
|
719
652
|
@media (max-width: 543.98px) {
|
|
720
653
|
.autocomplete-label-inline {
|
|
721
654
|
display: block;
|
|
@@ -724,20 +657,17 @@ nav-list {
|
|
|
724
657
|
}
|
|
725
658
|
|
|
726
659
|
/* Wrapper for the input and result elements to ensure alignment */
|
|
727
|
-
|
|
728
660
|
.autocomplete-body {
|
|
729
661
|
position: relative;
|
|
730
662
|
display: inline;
|
|
731
663
|
}
|
|
732
664
|
|
|
733
665
|
/* Wrapper and conditional styles for when an icon is added */
|
|
734
|
-
|
|
735
666
|
.autocomplete-embedded-icon-wrap {
|
|
736
667
|
display: inline-flex;
|
|
737
668
|
padding: var(--base-size-4) var(--base-size-8);
|
|
738
669
|
align-items: center;
|
|
739
670
|
}
|
|
740
|
-
|
|
741
671
|
.autocomplete-embedded-icon-wrap:focus-within {
|
|
742
672
|
border-color: var(--borderColor-accent-emphasis);
|
|
743
673
|
|
|
@@ -747,24 +677,20 @@ nav-list {
|
|
|
747
677
|
|
|
748
678
|
box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
|
|
749
679
|
}
|
|
750
|
-
|
|
751
680
|
.autocomplete-embedded-icon-wrap .form-control {
|
|
752
681
|
padding: 0;
|
|
753
682
|
margin-left: var(--base-size-8);
|
|
754
683
|
border: none;
|
|
755
684
|
box-shadow: none;
|
|
756
685
|
}
|
|
757
|
-
|
|
758
686
|
:is(.autocomplete-embedded-icon-wrap .form-control):focus {
|
|
759
687
|
box-shadow: none;
|
|
760
688
|
}
|
|
761
|
-
|
|
762
689
|
:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible {
|
|
763
690
|
box-shadow: none;
|
|
764
691
|
}
|
|
765
692
|
|
|
766
693
|
/* A pop up list of items used to show autocompleted results */
|
|
767
|
-
|
|
768
694
|
.autocomplete-results {
|
|
769
695
|
position: absolute;
|
|
770
696
|
left: 0;
|
|
@@ -799,6 +725,10 @@ nav-list {
|
|
|
799
725
|
cursor: pointer;
|
|
800
726
|
background-color: var(--overlay-bgColor);
|
|
801
727
|
border: 0;
|
|
728
|
+
|
|
729
|
+
/* `color` is inherited, so setting it on the item recolors descendants
|
|
730
|
+
** without a universal `… *` descendant rule (which forces a slow
|
|
731
|
+
** style-recalc match attempt against every element on the page). */
|
|
802
732
|
}
|
|
803
733
|
|
|
804
734
|
.autocomplete-item:hover {
|
|
@@ -806,27 +736,14 @@ nav-list {
|
|
|
806
736
|
-webkit-text-decoration: none;
|
|
807
737
|
text-decoration: none;
|
|
808
738
|
background-color: var(--bgColor-accent-emphasis);
|
|
809
|
-
|
|
810
|
-
/* Inherit color on all child elements to ensure enough contrast */
|
|
811
739
|
}
|
|
812
740
|
|
|
813
|
-
.autocomplete-item:hover * {
|
|
814
|
-
color: inherit !important;
|
|
815
|
-
}
|
|
816
|
-
|
|
817
741
|
.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus {
|
|
818
742
|
color: var(--fgColor-onEmphasis);
|
|
819
743
|
-webkit-text-decoration: none;
|
|
820
744
|
text-decoration: none;
|
|
821
745
|
background-color: var(--bgColor-accent-emphasis);
|
|
822
|
-
|
|
823
|
-
/* Inherit color on all child elements to ensure enough contrast */
|
|
824
746
|
}
|
|
825
|
-
|
|
826
|
-
:is(.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus) * {
|
|
827
|
-
color: inherit !important;
|
|
828
|
-
}
|
|
829
|
-
|
|
830
747
|
/* Banner alert */
|
|
831
748
|
|
|
832
749
|
.Banner {
|
|
@@ -906,7 +823,6 @@ nav-list {
|
|
|
906
823
|
|
|
907
824
|
.Banner .Banner-close {
|
|
908
825
|
grid-area: close;
|
|
909
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
910
826
|
margin-left: var(--controlStack-medium-gap-condensed);
|
|
911
827
|
}
|
|
912
828
|
|
|
@@ -973,7 +889,6 @@ nav-list {
|
|
|
973
889
|
border-radius: 0;
|
|
974
890
|
}
|
|
975
891
|
}
|
|
976
|
-
|
|
977
892
|
.btn-mktg {
|
|
978
893
|
position: relative;
|
|
979
894
|
z-index: 1;
|
|
@@ -995,7 +910,7 @@ nav-list {
|
|
|
995
910
|
-webkit-user-select: none;
|
|
996
911
|
user-select: none;
|
|
997
912
|
/* stylelint-disable-next-line primer/colors */
|
|
998
|
-
background: linear-gradient(180deg,
|
|
913
|
+
background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),
|
|
999
914
|
var(--color-mktg-btn-bg) !important;
|
|
1000
915
|
border: 0;
|
|
1001
916
|
|
|
@@ -1004,7 +919,6 @@ nav-list {
|
|
|
1004
919
|
transition: box-shadow 0.2s, outline 0.2s ease;
|
|
1005
920
|
appearance: none !important;
|
|
1006
921
|
}
|
|
1007
|
-
|
|
1008
922
|
.btn-mktg::before {
|
|
1009
923
|
position: absolute;
|
|
1010
924
|
top: 0;
|
|
@@ -1015,26 +929,22 @@ nav-list {
|
|
|
1015
929
|
content: '';
|
|
1016
930
|
|
|
1017
931
|
/* stylelint-disable-next-line primer/colors */
|
|
1018
|
-
background: linear-gradient(180deg,
|
|
932
|
+
background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;
|
|
1019
933
|
border-radius: inherit;
|
|
1020
934
|
opacity: 0;
|
|
1021
935
|
transition: opacity 0.2s;
|
|
1022
936
|
background-blend-mode: normal;
|
|
1023
937
|
}
|
|
1024
|
-
|
|
1025
938
|
.btn-mktg:hover {
|
|
1026
939
|
-webkit-text-decoration: none;
|
|
1027
940
|
text-decoration: none;
|
|
1028
941
|
/* stylelint-disable-next-line primer/box-shadow */
|
|
1029
942
|
box-shadow: var(--color-mktg-btn-shadow-hover) !important;
|
|
1030
943
|
}
|
|
1031
|
-
|
|
1032
944
|
:is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus)::before {
|
|
1033
945
|
opacity: 1;
|
|
1034
946
|
}
|
|
1035
|
-
|
|
1036
947
|
/* fallback :focus state */
|
|
1037
|
-
|
|
1038
948
|
.btn-mktg:focus {
|
|
1039
949
|
outline: 2px solid var(--focus-outlineColor);
|
|
1040
950
|
outline-offset: 2px;
|
|
@@ -1042,24 +952,19 @@ nav-list {
|
|
|
1042
952
|
|
|
1043
953
|
/* remove fallback :focus if :focus-visible is supported */
|
|
1044
954
|
}
|
|
1045
|
-
|
|
1046
955
|
.btn-mktg:focus:not(:focus-visible) {
|
|
1047
956
|
outline: solid 1px transparent;
|
|
1048
957
|
box-shadow: none;
|
|
1049
958
|
}
|
|
1050
|
-
|
|
1051
959
|
/* default focus state */
|
|
1052
|
-
|
|
1053
960
|
.btn-mktg:focus-visible {
|
|
1054
961
|
outline: 2px solid var(--focus-outlineColor);
|
|
1055
962
|
outline-offset: 2px;
|
|
1056
963
|
box-shadow: none;
|
|
1057
964
|
}
|
|
1058
|
-
|
|
1059
965
|
.btn-mktg:active::before {
|
|
1060
966
|
opacity: 0.5 !important;
|
|
1061
967
|
}
|
|
1062
|
-
|
|
1063
968
|
.btn-mktg.disabled,.btn-mktg[disabled] {
|
|
1064
969
|
pointer-events: none;
|
|
1065
970
|
cursor: default;
|
|
@@ -1112,12 +1017,12 @@ nav-list {
|
|
|
1112
1017
|
color: #fff;
|
|
1113
1018
|
|
|
1114
1019
|
/* stylelint-disable-next-line primer/colors */
|
|
1115
|
-
background: linear-gradient(180deg,
|
|
1020
|
+
background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
|
|
1116
1021
|
}
|
|
1117
1022
|
|
|
1118
1023
|
.btn-signup-mktg::before {
|
|
1119
1024
|
/* stylelint-disable-next-line primer/colors */
|
|
1120
|
-
background: linear-gradient(180deg,
|
|
1025
|
+
background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;
|
|
1121
1026
|
}
|
|
1122
1027
|
|
|
1123
1028
|
/* fallback :focus state */
|
|
@@ -1157,19 +1062,12 @@ nav-list {
|
|
|
1157
1062
|
/* stylelint-disable-next-line primer/typography */
|
|
1158
1063
|
font-size: 1.25rem;
|
|
1159
1064
|
}
|
|
1160
|
-
|
|
1161
1065
|
/* stylelint-disable selector-max-specificity */
|
|
1162
|
-
|
|
1163
1066
|
/* stylelint-disable selector-max-compound-selectors */
|
|
1164
|
-
|
|
1165
1067
|
/* stylelint-disable max-nesting-depth */
|
|
1166
|
-
|
|
1167
1068
|
/* stylelint-disable primer/responsive-widths */
|
|
1168
|
-
|
|
1169
1069
|
/* stylelint-disable primer/spacing */
|
|
1170
|
-
|
|
1171
1070
|
/* stylelint-disable selector-no-qualifying-type */
|
|
1172
|
-
|
|
1173
1071
|
/* stylelint-disable selector-max-type */
|
|
1174
1072
|
|
|
1175
1073
|
/* Overlay */
|
|
@@ -1181,15 +1079,17 @@ nav-list {
|
|
|
1181
1079
|
* occur, so it benefits us to prevent inheritance for this property.
|
|
1182
1080
|
* See https://web.dev/blog/at-property-performance
|
|
1183
1081
|
*/
|
|
1184
|
-
|
|
1185
1082
|
@property --dialog-scrollgutter {
|
|
1186
1083
|
initial-value: 0;
|
|
1187
1084
|
inherits: false;
|
|
1188
1085
|
syntax: "<length>";
|
|
1189
1086
|
}
|
|
1190
1087
|
|
|
1191
|
-
body
|
|
1088
|
+
body.has-modal {
|
|
1192
1089
|
padding-right: var(--dialog-scrollgutter) !important;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
body.has-modal-disable-scroll {
|
|
1193
1093
|
overflow: hidden !important;
|
|
1194
1094
|
}
|
|
1195
1095
|
|
|
@@ -1212,7 +1112,6 @@ dialog.Overlay:not([open]) {
|
|
|
1212
1112
|
* A FOUC occurs in browsers which do not support :popover-open.
|
|
1213
1113
|
* We can try to hide the popover if :popover-open is not supported.
|
|
1214
1114
|
*/
|
|
1215
|
-
|
|
1216
1115
|
@supports not selector(:popover-open) {
|
|
1217
1116
|
[popover]:not(.\:popover-open) {
|
|
1218
1117
|
display: none;
|
|
@@ -1381,7 +1280,6 @@ dialog.Overlay:not([open]) {
|
|
|
1381
1280
|
}
|
|
1382
1281
|
|
|
1383
1282
|
/* for <form> element that wraps entire contents of overlay */
|
|
1384
|
-
|
|
1385
1283
|
.Overlay-form {
|
|
1386
1284
|
display: flex;
|
|
1387
1285
|
overflow: auto;
|
|
@@ -1454,7 +1352,6 @@ dialog.Overlay:not([open]) {
|
|
|
1454
1352
|
}
|
|
1455
1353
|
|
|
1456
1354
|
/* generic body content slot */
|
|
1457
|
-
|
|
1458
1355
|
.Overlay-body {
|
|
1459
1356
|
padding: var(--stack-padding-normal);
|
|
1460
1357
|
overflow-y: auto;
|
|
@@ -1462,18 +1359,15 @@ dialog.Overlay:not([open]) {
|
|
|
1462
1359
|
font-size: var(--text-body-size-medium);
|
|
1463
1360
|
flex-grow: 1;
|
|
1464
1361
|
}
|
|
1465
|
-
|
|
1466
1362
|
.Overlay-body.Overlay-body--paddingCondensed {
|
|
1467
1363
|
padding: var(--stack-padding-condensed);
|
|
1468
1364
|
padding-top: 0;
|
|
1469
1365
|
}
|
|
1470
|
-
|
|
1471
1366
|
.Overlay-body.Overlay-body--paddingNone {
|
|
1472
1367
|
padding: 0;
|
|
1473
1368
|
}
|
|
1474
1369
|
|
|
1475
1370
|
/* generic footer slot */
|
|
1476
|
-
|
|
1477
1371
|
.Overlay-footer {
|
|
1478
1372
|
z-index: 1;
|
|
1479
1373
|
display: flex;
|
|
@@ -1482,30 +1376,25 @@ dialog.Overlay:not([open]) {
|
|
|
1482
1376
|
flex-shrink: 0;
|
|
1483
1377
|
flex-wrap: wrap;
|
|
1484
1378
|
}
|
|
1485
|
-
|
|
1486
1379
|
.Overlay-footer.Overlay-footer--divided {
|
|
1487
1380
|
padding-top: var(--stack-padding-normal);
|
|
1488
1381
|
/* stylelint-disable-next-line primer/box-shadow */
|
|
1489
1382
|
box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
|
|
1490
1383
|
}
|
|
1491
|
-
|
|
1492
1384
|
.Overlay-footer.Overlay-footer--alignStart {
|
|
1493
1385
|
justify-content: flex-start;
|
|
1494
1386
|
gap: var(--stack-gap-condensed);
|
|
1495
1387
|
}
|
|
1496
|
-
|
|
1497
1388
|
.Overlay-footer.Overlay-footer--alignCenter {
|
|
1498
1389
|
justify-content: center;
|
|
1499
1390
|
gap: var(--stack-gap-condensed);
|
|
1500
1391
|
}
|
|
1501
|
-
|
|
1502
1392
|
.Overlay-footer.Overlay-footer--alignEnd {
|
|
1503
1393
|
justify-content: flex-end;
|
|
1504
1394
|
gap: var(--stack-gap-condensed);
|
|
1505
1395
|
}
|
|
1506
1396
|
|
|
1507
1397
|
/* TODO: replace with refactored IconButton */
|
|
1508
|
-
|
|
1509
1398
|
.Overlay-closeButton {
|
|
1510
1399
|
position: relative;
|
|
1511
1400
|
display: grid;
|
|
@@ -1525,15 +1414,12 @@ dialog.Overlay:not([open]) {
|
|
|
1525
1414
|
align-self: flex-start;
|
|
1526
1415
|
flex-shrink: 0;
|
|
1527
1416
|
}
|
|
1528
|
-
|
|
1529
1417
|
.Overlay-closeButton:hover,.Overlay-closeButton:focus {
|
|
1530
1418
|
background-color: var(--button-default-bgColor-hover);
|
|
1531
1419
|
/* stylelint-disable-next-line primer/colors */
|
|
1532
1420
|
border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
|
|
1533
1421
|
}
|
|
1534
|
-
|
|
1535
1422
|
/* Override .close-button's `border: 0` that triggers a border-color transition on hover */
|
|
1536
|
-
|
|
1537
1423
|
.Overlay-closeButton.close-button {
|
|
1538
1424
|
border: var(--borderWidth-thin) solid transparent;
|
|
1539
1425
|
}
|
|
@@ -1543,7 +1429,6 @@ dialog.Overlay:not([open]) {
|
|
|
1543
1429
|
/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
|
|
1544
1430
|
|
|
1545
1431
|
/* full width */
|
|
1546
|
-
|
|
1547
1432
|
.Overlay--full {
|
|
1548
1433
|
width: 100%;
|
|
1549
1434
|
max-width: 100vw;
|
|
@@ -1556,7 +1441,6 @@ dialog.Overlay:not([open]) {
|
|
|
1556
1441
|
/* responsive variants */
|
|
1557
1442
|
|
|
1558
1443
|
/* --viewportRange-narrowLandscape */
|
|
1559
|
-
|
|
1560
1444
|
@media (max-width: 767px) {
|
|
1561
1445
|
.Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
|
|
1562
1446
|
position: fixed;
|
|
@@ -1632,7 +1516,6 @@ dialog.Overlay:not([open]) {
|
|
|
1632
1516
|
transform: translateX(100%);
|
|
1633
1517
|
}
|
|
1634
1518
|
}
|
|
1635
|
-
|
|
1636
1519
|
/* dropdown */
|
|
1637
1520
|
|
|
1638
1521
|
.dropdown {
|
|
@@ -1712,7 +1595,6 @@ dialog.Overlay:not([open]) {
|
|
|
1712
1595
|
}
|
|
1713
1596
|
|
|
1714
1597
|
/* Dropdown items (can be links or buttons) */
|
|
1715
|
-
|
|
1716
1598
|
.dropdown-item {
|
|
1717
1599
|
display: block;
|
|
1718
1600
|
padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
|
|
@@ -1721,28 +1603,23 @@ dialog.Overlay:not([open]) {
|
|
|
1721
1603
|
text-overflow: ellipsis;
|
|
1722
1604
|
white-space: nowrap;
|
|
1723
1605
|
}
|
|
1724
|
-
|
|
1725
1606
|
.dropdown-item:hover {
|
|
1726
1607
|
color: var(--fgColor-onEmphasis);
|
|
1727
1608
|
-webkit-text-decoration: none;
|
|
1728
1609
|
text-decoration: none;
|
|
1729
1610
|
background-color: var(--bgColor-accent-emphasis);
|
|
1730
1611
|
}
|
|
1731
|
-
|
|
1732
1612
|
.dropdown-item:hover > .octicon {
|
|
1733
1613
|
color: inherit;
|
|
1734
1614
|
opacity: 1;
|
|
1735
1615
|
}
|
|
1736
|
-
|
|
1737
1616
|
.dropdown-item:hover [class*='color-fg-'] {
|
|
1738
1617
|
color: inherit !important;
|
|
1739
1618
|
}
|
|
1740
|
-
|
|
1741
1619
|
.dropdown-item:hover > .Label {
|
|
1742
1620
|
color: inherit !important;
|
|
1743
1621
|
border-color: currentcolor;
|
|
1744
1622
|
}
|
|
1745
|
-
|
|
1746
1623
|
.dropdown-item.btn-link {
|
|
1747
1624
|
width: 100%;
|
|
1748
1625
|
text-align: left;
|
|
@@ -1925,9 +1802,10 @@ dialog.Overlay:not([open]) {
|
|
|
1925
1802
|
/* stylelint-disable-next-line primer/spacing */
|
|
1926
1803
|
left: calc(var(--base-size-8) + var(--borderWidth-thin));
|
|
1927
1804
|
}
|
|
1928
|
-
|
|
1929
1805
|
/* Layout */
|
|
1930
1806
|
|
|
1807
|
+
/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
|
|
1808
|
+
|
|
1931
1809
|
.Layout {
|
|
1932
1810
|
display: grid;
|
|
1933
1811
|
|
|
@@ -2121,7 +1999,7 @@ dialog.Overlay:not([open]) {
|
|
|
2121
1999
|
|
|
2122
2000
|
grid-auto-flow: column;
|
|
2123
2001
|
grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
|
|
2124
|
-
|
|
2002
|
+
gap: var(--Layout-gutter);
|
|
2125
2003
|
}
|
|
2126
2004
|
|
|
2127
2005
|
.Layout .Layout-sidebar {
|
|
@@ -2300,13 +2178,11 @@ dialog.Overlay:not([open]) {
|
|
|
2300
2178
|
.Layout-main .Layout-main-centered-xl {
|
|
2301
2179
|
max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
|
2302
2180
|
}
|
|
2303
|
-
|
|
2304
2181
|
/* menu */
|
|
2305
2182
|
|
|
2306
2183
|
/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
|
|
2307
2184
|
|
|
2308
2185
|
.menu {
|
|
2309
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2310
2186
|
margin-bottom: var(--stack-gap-normal);
|
|
2311
2187
|
list-style: none;
|
|
2312
2188
|
background-color: var(--bgColor-default);
|
|
@@ -2317,7 +2193,6 @@ dialog.Overlay:not([open]) {
|
|
|
2317
2193
|
.menu-item {
|
|
2318
2194
|
position: relative;
|
|
2319
2195
|
display: block;
|
|
2320
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2321
2196
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
2322
2197
|
color: var(--fgColor-default);
|
|
2323
2198
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
@@ -2371,7 +2246,6 @@ dialog.Overlay:not([open]) {
|
|
|
2371
2246
|
|
|
2372
2247
|
.menu-item .octicon {
|
|
2373
2248
|
width: 16px;
|
|
2374
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2375
2249
|
margin-right: var(--control-medium-gap);
|
|
2376
2250
|
color: var(--fgColor-muted);
|
|
2377
2251
|
text-align: center;
|
|
@@ -2379,7 +2253,6 @@ dialog.Overlay:not([open]) {
|
|
|
2379
2253
|
|
|
2380
2254
|
.menu-item .Counter {
|
|
2381
2255
|
float: right;
|
|
2382
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2383
2256
|
margin-left: var(--control-small-gap);
|
|
2384
2257
|
}
|
|
2385
2258
|
|
|
@@ -2390,7 +2263,6 @@ dialog.Overlay:not([open]) {
|
|
|
2390
2263
|
|
|
2391
2264
|
.menu-item .avatar {
|
|
2392
2265
|
float: left;
|
|
2393
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2394
2266
|
margin-right: var(--control-small-gap);
|
|
2395
2267
|
}
|
|
2396
2268
|
|
|
@@ -2400,7 +2272,6 @@ dialog.Overlay:not([open]) {
|
|
|
2400
2272
|
|
|
2401
2273
|
.menu-heading {
|
|
2402
2274
|
display: block;
|
|
2403
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2404
2275
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
2405
2276
|
margin-top: 0;
|
|
2406
2277
|
margin-bottom: 0;
|
|
@@ -2425,7 +2296,6 @@ dialog.Overlay:not([open]) {
|
|
|
2425
2296
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
2426
2297
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
2427
2298
|
}
|
|
2428
|
-
|
|
2429
2299
|
/* SegmentedControl */
|
|
2430
2300
|
|
|
2431
2301
|
.SegmentedControl {
|
|
@@ -2532,9 +2402,7 @@ dialog.Overlay:not([open]) {
|
|
|
2532
2402
|
.SegmentedControl-item:not(:first-child)::before {
|
|
2533
2403
|
position: absolute;
|
|
2534
2404
|
inset: 0 0 0 -1px;
|
|
2535
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2536
2405
|
margin-top: var(--control-medium-paddingBlock);
|
|
2537
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2538
2406
|
margin-bottom: var(--control-medium-paddingBlock);
|
|
2539
2407
|
content: '';
|
|
2540
2408
|
border-left: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
@@ -2578,16 +2446,13 @@ dialog.Overlay:not([open]) {
|
|
|
2578
2446
|
}
|
|
2579
2447
|
|
|
2580
2448
|
/* fullWidth */
|
|
2581
|
-
|
|
2582
2449
|
.SegmentedControl--fullWidth {
|
|
2583
2450
|
display: flex;
|
|
2584
2451
|
}
|
|
2585
|
-
|
|
2586
2452
|
.SegmentedControl--fullWidth .SegmentedControl-item {
|
|
2587
2453
|
flex: 1;
|
|
2588
2454
|
justify-content: center;
|
|
2589
2455
|
}
|
|
2590
|
-
|
|
2591
2456
|
.SelectPanel-loadingPanel {
|
|
2592
2457
|
min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
|
|
2593
2458
|
}
|
|
@@ -2598,7 +2463,6 @@ dialog.Overlay:not([open]) {
|
|
|
2598
2463
|
display: flex;
|
|
2599
2464
|
justify-content: center;
|
|
2600
2465
|
}
|
|
2601
|
-
|
|
2602
2466
|
.Stack {
|
|
2603
2467
|
display: flex;
|
|
2604
2468
|
flex-flow: column;
|
|
@@ -2608,100 +2472,76 @@ dialog.Overlay:not([open]) {
|
|
|
2608
2472
|
|
|
2609
2473
|
/* non-responsive values */
|
|
2610
2474
|
}
|
|
2611
|
-
|
|
2612
2475
|
.Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
|
|
2613
2476
|
padding: 0;
|
|
2614
2477
|
}
|
|
2615
|
-
|
|
2616
2478
|
.Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
|
|
2617
2479
|
/* stylelint-disable-next-line primer/spacing */
|
|
2618
2480
|
padding: var(--stack-padding-condensed, 8px);
|
|
2619
2481
|
}
|
|
2620
|
-
|
|
2621
2482
|
.Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
|
|
2622
2483
|
/* stylelint-disable-next-line primer/spacing */
|
|
2623
2484
|
padding: var(--stack-padding-normal, 16px);
|
|
2624
2485
|
}
|
|
2625
|
-
|
|
2626
2486
|
.Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
|
|
2627
2487
|
/* stylelint-disable-next-line primer/spacing */
|
|
2628
2488
|
padding: var(--stack-padding-spacious, 24px);
|
|
2629
2489
|
}
|
|
2630
|
-
|
|
2631
2490
|
.Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
|
|
2632
2491
|
flex-flow: row;
|
|
2633
2492
|
}
|
|
2634
|
-
|
|
2635
2493
|
.Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
|
|
2636
2494
|
flex-flow: column;
|
|
2637
2495
|
}
|
|
2638
|
-
|
|
2639
2496
|
.Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
|
|
2640
2497
|
--stack-gap: var(--stack-gap-none, 0);
|
|
2641
2498
|
}
|
|
2642
|
-
|
|
2643
2499
|
.Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
|
|
2644
2500
|
--stack-gap: var(--stack-gap-condensed, 0.5rem);
|
|
2645
2501
|
}
|
|
2646
|
-
|
|
2647
2502
|
.Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
|
|
2648
2503
|
--stack-gap: var(--stack-gap-normal, 1rem);
|
|
2649
2504
|
}
|
|
2650
|
-
|
|
2651
2505
|
.Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
|
|
2652
2506
|
--stack-gap: var(--stack-gap-spacious, 1.5rem);
|
|
2653
2507
|
}
|
|
2654
|
-
|
|
2655
2508
|
.Stack[data-align='start'],.Stack[data-align-narrow='start'] {
|
|
2656
2509
|
align-items: flex-start;
|
|
2657
2510
|
}
|
|
2658
|
-
|
|
2659
2511
|
.Stack[data-align='center'],.Stack[data-align-narrow='center'] {
|
|
2660
2512
|
align-items: center;
|
|
2661
2513
|
}
|
|
2662
|
-
|
|
2663
2514
|
.Stack[data-align='end'],.Stack[data-align-narrow='end'] {
|
|
2664
2515
|
align-items: flex-end;
|
|
2665
2516
|
}
|
|
2666
|
-
|
|
2667
2517
|
.Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
|
|
2668
2518
|
align-items: baseline;
|
|
2669
2519
|
}
|
|
2670
|
-
|
|
2671
2520
|
.Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
|
|
2672
2521
|
justify-content: flex-start;
|
|
2673
2522
|
}
|
|
2674
|
-
|
|
2675
2523
|
.Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
|
|
2676
2524
|
justify-content: center;
|
|
2677
2525
|
}
|
|
2678
|
-
|
|
2679
2526
|
.Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
|
|
2680
2527
|
justify-content: flex-end;
|
|
2681
2528
|
}
|
|
2682
|
-
|
|
2683
2529
|
.Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
|
|
2684
2530
|
justify-content: space-between;
|
|
2685
2531
|
}
|
|
2686
|
-
|
|
2687
2532
|
.Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
|
|
2688
2533
|
justify-content: space-evenly;
|
|
2689
2534
|
}
|
|
2690
|
-
|
|
2691
2535
|
.Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
|
|
2692
2536
|
flex-wrap: wrap;
|
|
2693
2537
|
}
|
|
2694
|
-
|
|
2695
2538
|
.Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
|
|
2696
2539
|
flex-wrap: nowrap;
|
|
2697
2540
|
}
|
|
2698
|
-
|
|
2699
2541
|
.Stack[data-wrap='reverse'],.Stack[data-wrap-narrow='reverse'] {
|
|
2700
2542
|
flex-wrap: wrap-reverse;
|
|
2701
2543
|
}
|
|
2702
|
-
|
|
2703
2544
|
/* @custom-media --veiwportRange-regular */
|
|
2704
|
-
|
|
2705
2545
|
@media (min-width: 48rem) {
|
|
2706
2546
|
.Stack[data-padding-regular='none'] {
|
|
2707
2547
|
padding: 0;
|
|
@@ -2794,9 +2634,7 @@ dialog.Overlay:not([open]) {
|
|
|
2794
2634
|
flex-wrap: wrap-reverse;
|
|
2795
2635
|
}
|
|
2796
2636
|
}
|
|
2797
|
-
|
|
2798
2637
|
/* @custom-media --viewportRange-wide */
|
|
2799
|
-
|
|
2800
2638
|
@media (min-width: 87.5rem) {
|
|
2801
2639
|
.Stack[data-padding-wide='none'] {
|
|
2802
2640
|
padding: 0;
|
|
@@ -2889,18 +2727,14 @@ dialog.Overlay:not([open]) {
|
|
|
2889
2727
|
flex-wrap: wrap-reverse;
|
|
2890
2728
|
}
|
|
2891
2729
|
}
|
|
2892
|
-
|
|
2893
2730
|
.StackItem {
|
|
2894
2731
|
flex: 0 1 auto;
|
|
2895
2732
|
min-inline-size: 0;
|
|
2896
2733
|
}
|
|
2897
|
-
|
|
2898
2734
|
.StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] {
|
|
2899
2735
|
flex-grow: 1;
|
|
2900
2736
|
}
|
|
2901
|
-
|
|
2902
2737
|
/* @custom-media --veiwportRange-regular */
|
|
2903
|
-
|
|
2904
2738
|
@media (min-width: 48rem) {
|
|
2905
2739
|
.StackItem[data-grow-regular='true'] {
|
|
2906
2740
|
flex-grow: 1;
|
|
@@ -2910,9 +2744,7 @@ dialog.Overlay:not([open]) {
|
|
|
2910
2744
|
flex-grow: 0;
|
|
2911
2745
|
}
|
|
2912
2746
|
}
|
|
2913
|
-
|
|
2914
2747
|
/* @custom-media --viewportRange-wide */
|
|
2915
|
-
|
|
2916
2748
|
@media (min-width: 87.5rem) {
|
|
2917
2749
|
.StackItem[data-grow-wide='true'] {
|
|
2918
2750
|
flex-grow: 1;
|
|
@@ -2922,14 +2754,11 @@ dialog.Overlay:not([open]) {
|
|
|
2922
2754
|
flex-grow: 0;
|
|
2923
2755
|
}
|
|
2924
2756
|
}
|
|
2925
|
-
|
|
2926
2757
|
/* tabnav */
|
|
2927
2758
|
|
|
2928
2759
|
/* Outer wrapper */
|
|
2929
|
-
|
|
2930
2760
|
.tabnav {
|
|
2931
2761
|
margin-top: 0;
|
|
2932
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2933
2762
|
margin-bottom: var(--stack-gap-normal);
|
|
2934
2763
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
2935
2764
|
}
|
|
@@ -2951,7 +2780,6 @@ dialog.Overlay:not([open]) {
|
|
|
2951
2780
|
.tabnav-tab {
|
|
2952
2781
|
display: inline-block;
|
|
2953
2782
|
flex-shrink: 0;
|
|
2954
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2955
2783
|
padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
|
|
2956
2784
|
font-size: var(--text-body-size-medium);
|
|
2957
2785
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -2993,13 +2821,11 @@ dialog.Overlay:not([open]) {
|
|
|
2993
2821
|
}
|
|
2994
2822
|
|
|
2995
2823
|
.tabnav-tab .octicon {
|
|
2996
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2997
2824
|
margin-right: var(--control-small-gap);
|
|
2998
2825
|
color: var(--fgColor-muted);
|
|
2999
2826
|
}
|
|
3000
2827
|
|
|
3001
2828
|
.tabnav-tab .Counter {
|
|
3002
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
3003
2829
|
margin-left: var(--control-small-gap);
|
|
3004
2830
|
color: inherit;
|
|
3005
2831
|
}
|
|
@@ -3024,9 +2850,7 @@ dialog.Overlay:not([open]) {
|
|
|
3024
2850
|
}
|
|
3025
2851
|
|
|
3026
2852
|
/* When tabnav-extra are anchors */
|
|
3027
|
-
|
|
3028
2853
|
/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
|
|
3029
|
-
|
|
3030
2854
|
a.tabnav-extra:hover {
|
|
3031
2855
|
color: var(--fgColor-accent);
|
|
3032
2856
|
-webkit-text-decoration: none;
|
|
@@ -3039,22 +2863,16 @@ a.tabnav-extra:hover {
|
|
|
3039
2863
|
** the buttons to be floated or inline-block. */
|
|
3040
2864
|
|
|
3041
2865
|
.tabnav-btn {
|
|
3042
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
3043
2866
|
margin-left: var(--controlStack-medium-gap-condensed);
|
|
3044
2867
|
}
|
|
3045
|
-
|
|
3046
2868
|
/* stylelint-disable selector-max-type */
|
|
3047
|
-
|
|
3048
2869
|
/* stylelint-disable max-nesting-depth */
|
|
3049
|
-
|
|
3050
2870
|
/* stylelint-disable selector-max-specificity */
|
|
3051
|
-
|
|
3052
2871
|
/* stylelint-disable primer/spacing */
|
|
3053
2872
|
|
|
3054
2873
|
/* FormControl */
|
|
3055
2874
|
|
|
3056
2875
|
/* groups label, field, caption and inline error message */
|
|
3057
|
-
|
|
3058
2876
|
.FormControl {
|
|
3059
2877
|
display: inline-flex;
|
|
3060
2878
|
flex-direction: column;
|
|
@@ -3062,13 +2880,11 @@ a.tabnav-extra:hover {
|
|
|
3062
2880
|
}
|
|
3063
2881
|
|
|
3064
2882
|
/* fill container */
|
|
3065
|
-
|
|
3066
2883
|
.FormControl--fullWidth {
|
|
3067
2884
|
display: flex;
|
|
3068
2885
|
}
|
|
3069
2886
|
|
|
3070
2887
|
/* <label> */
|
|
3071
|
-
|
|
3072
2888
|
.FormControl-label {
|
|
3073
2889
|
font-size: var(--text-body-size-medium);
|
|
3074
2890
|
font-weight: var(--base-text-weight-semibold);
|
|
@@ -3077,7 +2893,6 @@ a.tabnav-extra:hover {
|
|
|
3077
2893
|
}
|
|
3078
2894
|
|
|
3079
2895
|
/* optional caption */
|
|
3080
|
-
|
|
3081
2896
|
.FormControl-caption {
|
|
3082
2897
|
margin-bottom: 0;
|
|
3083
2898
|
font-size: var(--text-caption-size);
|
|
@@ -3092,7 +2907,6 @@ a.tabnav-extra:hover {
|
|
|
3092
2907
|
}
|
|
3093
2908
|
|
|
3094
2909
|
/* inline validation message */
|
|
3095
|
-
|
|
3096
2910
|
.FormControl-inlineValidation {
|
|
3097
2911
|
display: flex;
|
|
3098
2912
|
font-size: var(--text-caption-size);
|
|
@@ -3104,7 +2918,6 @@ a.tabnav-extra:hover {
|
|
|
3104
2918
|
align-items: flex-start;
|
|
3105
2919
|
gap: var(--base-size-4);
|
|
3106
2920
|
}
|
|
3107
|
-
|
|
3108
2921
|
.FormControl-inlineValidation p {
|
|
3109
2922
|
margin-bottom: 0;
|
|
3110
2923
|
}
|
|
@@ -3132,6 +2945,8 @@ a.tabnav-extra:hover {
|
|
|
3132
2945
|
}
|
|
3133
2946
|
|
|
3134
2947
|
/* shared among all form control components (input, select, textarea, checkbox, radio) */
|
|
2948
|
+
/* stylelint-disable nesting-selector-no-missing-scoping-root */
|
|
2949
|
+
/* stylelint-enable nesting-selector-no-missing-scoping-root */
|
|
3135
2950
|
|
|
3136
2951
|
/* TextInput structure
|
|
3137
2952
|
** ===================
|
|
@@ -3301,42 +3116,35 @@ a.tabnav-extra:hover {
|
|
|
3301
3116
|
}
|
|
3302
3117
|
|
|
3303
3118
|
/* widths */
|
|
3119
|
+
/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
|
|
3120
|
+
/* stylelint-enable nesting-selector-no-missing-scoping-root */
|
|
3304
3121
|
|
|
3305
3122
|
/* positioning for leading/trailing items for TextInput */
|
|
3306
|
-
|
|
3307
3123
|
.FormControl-input-wrap {
|
|
3308
3124
|
position: relative;
|
|
3309
3125
|
display: grid;
|
|
3310
3126
|
}
|
|
3311
|
-
|
|
3312
3127
|
.FormControl-input-wrap.FormControl-input-width--auto {
|
|
3313
3128
|
width: auto;
|
|
3314
3129
|
}
|
|
3315
|
-
|
|
3316
3130
|
.FormControl-input-wrap.FormControl-input-width--xsmall {
|
|
3317
3131
|
max-width: min(144px, 100vw - 2rem);
|
|
3318
3132
|
}
|
|
3319
|
-
|
|
3320
3133
|
.FormControl-input-wrap.FormControl-input-width--small {
|
|
3321
3134
|
max-width: min(256px, 100vw - 2rem);
|
|
3322
3135
|
}
|
|
3323
|
-
|
|
3324
3136
|
.FormControl-input-wrap.FormControl-input-width--medium {
|
|
3325
3137
|
max-width: min(320px, 100vw - 2rem);
|
|
3326
3138
|
}
|
|
3327
|
-
|
|
3328
3139
|
.FormControl-input-wrap.FormControl-input-width--large {
|
|
3329
3140
|
max-width: min(480px, 100vw - 2rem);
|
|
3330
3141
|
}
|
|
3331
|
-
|
|
3332
3142
|
.FormControl-input-wrap.FormControl-input-width--xlarge {
|
|
3333
3143
|
max-width: min(680px, 100vw - 2rem);
|
|
3334
3144
|
}
|
|
3335
|
-
|
|
3336
3145
|
.FormControl-input-wrap.FormControl-input-width--xxlarge {
|
|
3337
3146
|
max-width: min(960px, 100vw - 2rem);
|
|
3338
3147
|
}
|
|
3339
|
-
|
|
3340
3148
|
.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
|
|
3341
3149
|
position: absolute;
|
|
3342
3150
|
top: var(--base-size-8);
|
|
@@ -3349,13 +3157,11 @@ a.tabnav-extra:hover {
|
|
|
3349
3157
|
|
|
3350
3158
|
/* octicon */
|
|
3351
3159
|
}
|
|
3352
|
-
|
|
3353
3160
|
:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual {
|
|
3354
3161
|
display: block;
|
|
3355
3162
|
-webkit-user-select: none;
|
|
3356
3163
|
user-select: none;
|
|
3357
3164
|
}
|
|
3358
|
-
|
|
3359
3165
|
.FormControl-input-wrap .FormControl-input-trailingVisualWrap {
|
|
3360
3166
|
position: absolute;
|
|
3361
3167
|
top: var(--base-size-8);
|
|
@@ -3367,24 +3173,19 @@ a.tabnav-extra:hover {
|
|
|
3367
3173
|
color: var(--fgColor-muted);
|
|
3368
3174
|
pointer-events: none;
|
|
3369
3175
|
}
|
|
3370
|
-
|
|
3371
3176
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText) {
|
|
3372
3177
|
max-width: 25%;
|
|
3373
3178
|
padding-left: var(--base-size-8);
|
|
3374
3179
|
}
|
|
3375
|
-
|
|
3376
3180
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel) {
|
|
3377
3181
|
max-width: 25%;
|
|
3378
3182
|
padding-left: var(--base-size-8);
|
|
3379
3183
|
}
|
|
3380
|
-
|
|
3381
3184
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel {
|
|
3382
3185
|
overflow: hidden;
|
|
3383
3186
|
text-overflow: ellipsis;
|
|
3384
3187
|
}
|
|
3385
|
-
|
|
3386
3188
|
/* TODO: replace with new Button component */
|
|
3387
|
-
|
|
3388
3189
|
.FormControl-input-wrap .FormControl-input-trailingAction {
|
|
3389
3190
|
position: absolute;
|
|
3390
3191
|
top: var(--base-size-4);
|
|
@@ -3404,27 +3205,21 @@ a.tabnav-extra:hover {
|
|
|
3404
3205
|
align-items: center;
|
|
3405
3206
|
justify-content: center;
|
|
3406
3207
|
}
|
|
3407
|
-
|
|
3408
3208
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg {
|
|
3409
3209
|
-webkit-user-select: none;
|
|
3410
3210
|
user-select: none;
|
|
3411
3211
|
}
|
|
3412
|
-
|
|
3413
3212
|
[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction) {
|
|
3414
3213
|
color: var(--control-fgColor-disabled);
|
|
3415
3214
|
pointer-events: none;
|
|
3416
3215
|
}
|
|
3417
|
-
|
|
3418
3216
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover {
|
|
3419
3217
|
background: var(--control-transparent-bgColor-hover);
|
|
3420
3218
|
}
|
|
3421
|
-
|
|
3422
3219
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction):active {
|
|
3423
3220
|
background: var(--control-transparent-bgColor-active);
|
|
3424
3221
|
}
|
|
3425
|
-
|
|
3426
3222
|
/* show vertical divider line between field and button */
|
|
3427
|
-
|
|
3428
3223
|
.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before {
|
|
3429
3224
|
position: absolute;
|
|
3430
3225
|
top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
|
|
@@ -3436,7 +3231,6 @@ a.tabnav-extra:hover {
|
|
|
3436
3231
|
/* stylelint-disable-next-line primer/colors */
|
|
3437
3232
|
background: var(--borderColor-default);
|
|
3438
3233
|
}
|
|
3439
|
-
|
|
3440
3234
|
:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after) {
|
|
3441
3235
|
position: absolute;
|
|
3442
3236
|
top: 50%;
|
|
@@ -3447,17 +3241,13 @@ a.tabnav-extra:hover {
|
|
|
3447
3241
|
content: "";
|
|
3448
3242
|
transform: translateX(-50%) translateY(-50%);
|
|
3449
3243
|
}
|
|
3450
|
-
|
|
3451
3244
|
@media (pointer: coarse) {
|
|
3452
|
-
|
|
3453
3245
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after {
|
|
3454
3246
|
min-width: var(--control-minTarget-coarse);
|
|
3455
3247
|
min-height: var(--control-minTarget-coarse);
|
|
3456
3248
|
}
|
|
3457
3249
|
}
|
|
3458
|
-
|
|
3459
3250
|
/* if leadingVisual is present */
|
|
3460
|
-
|
|
3461
3251
|
/*
|
|
3462
3252
|
┌──32px──┬────────────────────┐
|
|
3463
3253
|
╎ ┌───┐ ┌────────────────┐ ╎
|
|
@@ -3465,15 +3255,12 @@ a.tabnav-extra:hover {
|
|
|
3465
3255
|
╎ └───┘ └────────────────┘ ╎
|
|
3466
3256
|
└───────8px───────────────────┘
|
|
3467
3257
|
*/
|
|
3468
|
-
|
|
3469
3258
|
.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input {
|
|
3470
3259
|
padding-inline-start: calc(
|
|
3471
3260
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
|
|
3472
3261
|
); /* 32px */
|
|
3473
3262
|
}
|
|
3474
|
-
|
|
3475
3263
|
/* if trailingVisual is present */
|
|
3476
|
-
|
|
3477
3264
|
/*
|
|
3478
3265
|
┌──────────────────┬──32px──┐
|
|
3479
3266
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3481,19 +3268,15 @@ a.tabnav-extra:hover {
|
|
|
3481
3268
|
╎ └──────────────┘ └────┘ ╎
|
|
3482
3269
|
└──────────────────┴────────┘
|
|
3483
3270
|
*/
|
|
3484
|
-
|
|
3485
3271
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input {
|
|
3486
3272
|
padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
|
|
3487
3273
|
}
|
|
3488
|
-
|
|
3489
3274
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
|
|
3490
3275
|
padding-inline-end: 25%
|
|
3491
3276
|
}
|
|
3492
|
-
|
|
3493
3277
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
|
|
3494
3278
|
padding-inline-end: 25%
|
|
3495
3279
|
}
|
|
3496
|
-
|
|
3497
3280
|
/*
|
|
3498
3281
|
┌──────────────────┬──32px──┐
|
|
3499
3282
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3501,15 +3284,12 @@ a.tabnav-extra:hover {
|
|
|
3501
3284
|
╎ └──────────────┘ └────┘ ╎
|
|
3502
3285
|
└──────────────────┴────────┘
|
|
3503
3286
|
*/
|
|
3504
|
-
|
|
3505
3287
|
/* if trailingAction is present */
|
|
3506
|
-
|
|
3507
3288
|
.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input {
|
|
3508
3289
|
padding-inline-end: calc(
|
|
3509
3290
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
|
|
3510
3291
|
); /* 32px */
|
|
3511
3292
|
}
|
|
3512
|
-
|
|
3513
3293
|
/*
|
|
3514
3294
|
32px + 1px border
|
|
3515
3295
|
┌──────────────────┬──33px──┐
|
|
@@ -3518,30 +3298,24 @@ a.tabnav-extra:hover {
|
|
|
3518
3298
|
╎ └──────────────┘ └────┘ ╎
|
|
3519
3299
|
└──────────────────┴────────┘
|
|
3520
3300
|
*/
|
|
3521
|
-
|
|
3522
3301
|
/* if trailingAction divider is present, add 1px padding to accomodate input field text
|
|
3523
3302
|
** can be refactored to has(.FormControl-input-trailingAction--divider) */
|
|
3524
|
-
|
|
3525
3303
|
.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input {
|
|
3526
3304
|
padding-inline-end: calc(
|
|
3527
3305
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
|
|
3528
3306
|
var(--borderWidth-thin)
|
|
3529
3307
|
); /* 33px */
|
|
3530
3308
|
}
|
|
3531
|
-
|
|
3532
3309
|
/* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
|
|
3533
3310
|
// sizes */
|
|
3534
|
-
|
|
3535
3311
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap {
|
|
3536
3312
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3537
3313
|
left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3538
3314
|
}
|
|
3539
|
-
|
|
3540
3315
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap {
|
|
3541
3316
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3542
3317
|
right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3543
3318
|
}
|
|
3544
|
-
|
|
3545
3319
|
/*
|
|
3546
3320
|
┌──────────────────┬──28px──┐
|
|
3547
3321
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3549,13 +3323,11 @@ a.tabnav-extra:hover {
|
|
|
3549
3323
|
╎ └──────────────┘ └────┘ ╎
|
|
3550
3324
|
└──────────────────┴────────┘
|
|
3551
3325
|
*/
|
|
3552
|
-
|
|
3553
3326
|
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small {
|
|
3554
3327
|
padding-inline-end: calc(
|
|
3555
3328
|
var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
|
|
3556
3329
|
); /* 28px */
|
|
3557
3330
|
}
|
|
3558
|
-
|
|
3559
3331
|
/*
|
|
3560
3332
|
28px + 1px border
|
|
3561
3333
|
┌──────────────────┬──29px──┐
|
|
@@ -3564,33 +3336,27 @@ a.tabnav-extra:hover {
|
|
|
3564
3336
|
╎ └──────────────┘ └────┘ ╎
|
|
3565
3337
|
└──────────────────┴────────┘
|
|
3566
3338
|
*/
|
|
3567
|
-
|
|
3568
3339
|
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small {
|
|
3569
3340
|
padding-inline-end: calc(
|
|
3570
3341
|
var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
|
|
3571
3342
|
var(--borderWidth-thin)
|
|
3572
3343
|
); /* 29px */
|
|
3573
3344
|
}
|
|
3574
|
-
|
|
3575
3345
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction {
|
|
3576
3346
|
width: calc(var(--control-small-size) - var(--base-size-8));
|
|
3577
3347
|
height: calc(var(--control-small-size) - var(--base-size-8));
|
|
3578
3348
|
}
|
|
3579
|
-
|
|
3580
3349
|
:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction)::before {
|
|
3581
3350
|
top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
|
|
3582
3351
|
}
|
|
3583
|
-
|
|
3584
3352
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap {
|
|
3585
3353
|
top: var(--control-medium-paddingInline-normal);
|
|
3586
3354
|
left: var(--control-medium-paddingInline-normal);
|
|
3587
3355
|
}
|
|
3588
|
-
|
|
3589
3356
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap {
|
|
3590
3357
|
top: var(--control-medium-paddingInline-normal);
|
|
3591
3358
|
right: var(--control-medium-paddingInline-normal);
|
|
3592
3359
|
}
|
|
3593
|
-
|
|
3594
3360
|
/*
|
|
3595
3361
|
┌──36px──┬───12px padding──────┐
|
|
3596
3362
|
╎ ┌───┐ ┌────────────────┐ ╎
|
|
@@ -3598,33 +3364,26 @@ a.tabnav-extra:hover {
|
|
|
3598
3364
|
╎ └───┘ └────────────────┘ ╎
|
|
3599
3365
|
└12px───8px───────────────────┘
|
|
3600
3366
|
*/
|
|
3601
|
-
|
|
3602
3367
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large {
|
|
3603
3368
|
padding-inline-start: calc(
|
|
3604
3369
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
|
|
3605
3370
|
); /* 36px */
|
|
3606
3371
|
}
|
|
3607
|
-
|
|
3608
3372
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input {
|
|
3609
3373
|
padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
|
|
3610
3374
|
}
|
|
3611
|
-
|
|
3612
3375
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
|
|
3613
3376
|
padding-inline-end: 25%
|
|
3614
3377
|
}
|
|
3615
|
-
|
|
3616
3378
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
|
|
3617
3379
|
padding-inline-end: 25%
|
|
3618
3380
|
}
|
|
3619
|
-
|
|
3620
3381
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large {
|
|
3621
3382
|
padding-inline-end: 25%;
|
|
3622
3383
|
}
|
|
3623
|
-
|
|
3624
3384
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large {
|
|
3625
3385
|
padding-inline-end: 25%;
|
|
3626
3386
|
}
|
|
3627
|
-
|
|
3628
3387
|
/*
|
|
3629
3388
|
┌──────────────────┬──36px──┐
|
|
3630
3389
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3632,13 +3391,11 @@ a.tabnav-extra:hover {
|
|
|
3632
3391
|
╎ └──────────────┘ └────┘ ╎
|
|
3633
3392
|
└──────────────────┴────────┘
|
|
3634
3393
|
*/
|
|
3635
|
-
|
|
3636
3394
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large {
|
|
3637
3395
|
padding-inline-end: calc(
|
|
3638
3396
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
|
|
3639
3397
|
); /* 36px */
|
|
3640
3398
|
}
|
|
3641
|
-
|
|
3642
3399
|
/*
|
|
3643
3400
|
┌──────────────────┬──37px──┐
|
|
3644
3401
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3646,21 +3403,18 @@ a.tabnav-extra:hover {
|
|
|
3646
3403
|
╎ └──────────────┘ └────┘ ╎
|
|
3647
3404
|
└──────────────────┴────────┘
|
|
3648
3405
|
*/
|
|
3649
|
-
|
|
3650
3406
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large {
|
|
3651
3407
|
padding-inline-end: calc(
|
|
3652
3408
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
|
|
3653
3409
|
var(--borderWidth-thin)
|
|
3654
3410
|
); /* 37px */
|
|
3655
3411
|
}
|
|
3656
|
-
|
|
3657
3412
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction {
|
|
3658
3413
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3659
3414
|
right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3660
3415
|
width: var(--control-small-size);
|
|
3661
3416
|
height: var(--control-small-size);
|
|
3662
3417
|
}
|
|
3663
|
-
|
|
3664
3418
|
:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before {
|
|
3665
3419
|
top: unset;
|
|
3666
3420
|
height: var(--base-size-20);
|
|
@@ -3751,16 +3505,20 @@ a.tabnav-extra:hover {
|
|
|
3751
3505
|
gap: var(--base-size-8);
|
|
3752
3506
|
}
|
|
3753
3507
|
|
|
3754
|
-
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap {
|
|
3755
|
-
display: flex;
|
|
3756
|
-
flex-direction: column;
|
|
3757
|
-
gap: var(--base-size-4);
|
|
3758
|
-
}
|
|
3759
|
-
|
|
3760
3508
|
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label {
|
|
3761
3509
|
cursor: pointer;
|
|
3762
3510
|
}
|
|
3763
3511
|
|
|
3512
|
+
/* Expanded per-class so the subject buckets by a single class during style
|
|
3513
|
+
** recalc, instead of compiling to a merged `:is(...)` subject that Blink
|
|
3514
|
+
** cannot fast-reject. */
|
|
3515
|
+
.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
|
|
3516
|
+
.FormControl-radio-wrap .FormControl-radio-labelWrap {
|
|
3517
|
+
display: flex;
|
|
3518
|
+
flex-direction: column;
|
|
3519
|
+
gap: var(--base-size-4);
|
|
3520
|
+
}
|
|
3521
|
+
|
|
3764
3522
|
.FormControl-radio-group-wrap fieldset {
|
|
3765
3523
|
padding: 0;
|
|
3766
3524
|
margin: 0;
|
|
@@ -3775,14 +3533,12 @@ a.tabnav-extra:hover {
|
|
|
3775
3533
|
|
|
3776
3534
|
/* these selectors are temporary to override base.scss
|
|
3777
3535
|
** once Field styles are widely adopted, we can adjust this and the global base styles */
|
|
3778
|
-
|
|
3779
3536
|
.FormControl-checkbox {
|
|
3780
3537
|
color: var(--fgColor-default);
|
|
3781
3538
|
background-color: var(--bgColor-default);
|
|
3782
3539
|
border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
|
|
3783
3540
|
box-shadow: var(--shadow-inset);
|
|
3784
3541
|
}
|
|
3785
|
-
|
|
3786
3542
|
.FormControl-checkbox[disabled] {
|
|
3787
3543
|
color: var(--control-fgColor-disabled);
|
|
3788
3544
|
cursor: not-allowed;
|
|
@@ -3792,15 +3548,12 @@ a.tabnav-extra:hover {
|
|
|
3792
3548
|
opacity: 1;
|
|
3793
3549
|
-webkit-text-fill-color: var(--control-fgColor-disabled);
|
|
3794
3550
|
}
|
|
3795
|
-
|
|
3796
3551
|
.FormControl-checkbox[invalid='true']:not(:focus) {
|
|
3797
3552
|
border-color: var(--control-borderColor-danger);
|
|
3798
3553
|
}
|
|
3799
|
-
|
|
3800
3554
|
.FormControl-checkbox[invalid='false']:not(:focus) {
|
|
3801
3555
|
border-color: var(--control-borderColor-success);
|
|
3802
3556
|
}
|
|
3803
|
-
|
|
3804
3557
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus {
|
|
3805
3558
|
border-color: var(--focus-outlineColor);
|
|
3806
3559
|
outline: none;
|
|
@@ -3808,7 +3561,6 @@ a.tabnav-extra:hover {
|
|
|
3808
3561
|
|
|
3809
3562
|
/* remove fallback :focus if :focus-visible is supported */
|
|
3810
3563
|
}
|
|
3811
|
-
|
|
3812
3564
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
|
|
3813
3565
|
border-color: transparent;
|
|
3814
3566
|
|
|
@@ -3818,15 +3570,12 @@ a.tabnav-extra:hover {
|
|
|
3818
3570
|
|
|
3819
3571
|
box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
|
|
3820
3572
|
}
|
|
3821
|
-
|
|
3822
3573
|
/* default focus state */
|
|
3823
|
-
|
|
3824
3574
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible {
|
|
3825
3575
|
border-color: var(--focus-outlineColor);
|
|
3826
3576
|
outline: none;
|
|
3827
3577
|
box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
|
|
3828
3578
|
}
|
|
3829
|
-
|
|
3830
3579
|
.FormControl-checkbox {
|
|
3831
3580
|
|
|
3832
3581
|
position: relative;
|
|
@@ -3842,7 +3591,6 @@ a.tabnav-extra:hover {
|
|
|
3842
3591
|
appearance: none;
|
|
3843
3592
|
place-content: center;
|
|
3844
3593
|
}
|
|
3845
|
-
|
|
3846
3594
|
.FormControl-checkbox::before {
|
|
3847
3595
|
width: var(--base-size-16);
|
|
3848
3596
|
height: var(--base-size-16);
|
|
@@ -3860,9 +3608,7 @@ a.tabnav-extra:hover {
|
|
|
3860
3608
|
mask-position: center;
|
|
3861
3609
|
animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
|
|
3862
3610
|
}
|
|
3863
|
-
|
|
3864
3611
|
/* extend touch target */
|
|
3865
|
-
|
|
3866
3612
|
:is(.FormControl-checkbox::after) {
|
|
3867
3613
|
position: absolute;
|
|
3868
3614
|
top: 50%;
|
|
@@ -3873,24 +3619,20 @@ a.tabnav-extra:hover {
|
|
|
3873
3619
|
content: "";
|
|
3874
3620
|
transform: translateX(-50%) translateY(-50%);
|
|
3875
3621
|
}
|
|
3876
|
-
|
|
3877
3622
|
:is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label {
|
|
3878
3623
|
color: var(--control-fgColor-disabled);
|
|
3879
3624
|
cursor: not-allowed;
|
|
3880
3625
|
}
|
|
3881
|
-
|
|
3882
3626
|
.FormControl-checkbox:checked {
|
|
3883
3627
|
background: var(--control-checked-bgColor-rest, var(--color-accent-fg));
|
|
3884
3628
|
border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
|
|
3885
3629
|
transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
|
|
3886
3630
|
}
|
|
3887
|
-
|
|
3888
3631
|
.FormControl-checkbox:checked::before {
|
|
3889
3632
|
visibility: visible;
|
|
3890
3633
|
transition: visibility 0s linear 0s;
|
|
3891
3634
|
animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
|
|
3892
3635
|
}
|
|
3893
|
-
|
|
3894
3636
|
.FormControl-checkbox:checked:disabled {
|
|
3895
3637
|
cursor: not-allowed;
|
|
3896
3638
|
/* stylelint-disable-next-line primer/colors */
|
|
@@ -3899,28 +3641,22 @@ a.tabnav-extra:hover {
|
|
|
3899
3641
|
border-color: var(--control-fgColor-disabled);
|
|
3900
3642
|
opacity: 1;
|
|
3901
3643
|
}
|
|
3902
|
-
|
|
3903
3644
|
.FormControl-checkbox:checked:disabled::before {
|
|
3904
3645
|
/* stylelint-disable-next-line primer/colors */
|
|
3905
3646
|
background-color: var(--control-checked-fgColor-rest);
|
|
3906
3647
|
}
|
|
3907
|
-
|
|
3908
3648
|
/* Windows High Contrast mode */
|
|
3909
|
-
|
|
3910
3649
|
@media (forced-colors: active) {
|
|
3911
|
-
|
|
3912
3650
|
.FormControl-checkbox:checked {
|
|
3913
3651
|
background-color: canvastext;
|
|
3914
3652
|
border-color: canvastext;
|
|
3915
3653
|
}
|
|
3916
3654
|
}
|
|
3917
|
-
|
|
3918
3655
|
.FormControl-checkbox:focus-visible {
|
|
3919
3656
|
outline: 2px solid var(--focus-outlineColor);
|
|
3920
3657
|
outline-offset: 2px;
|
|
3921
3658
|
box-shadow: none;
|
|
3922
3659
|
}
|
|
3923
|
-
|
|
3924
3660
|
.FormControl-checkbox:indeterminate::before {
|
|
3925
3661
|
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
|
|
3926
3662
|
visibility: visible;
|
|
@@ -4059,17 +3795,18 @@ a.tabnav-extra:hover {
|
|
|
4059
3795
|
clip-path: inset(var(--base-size-16) 0 0 0);
|
|
4060
3796
|
}
|
|
4061
3797
|
}
|
|
4062
|
-
|
|
4063
3798
|
/* ToggleSwitch */
|
|
4064
3799
|
|
|
4065
3800
|
/* Catalyst in dotcom applies a display: block to all web component elements. This
|
|
4066
3801
|
** rule overrides it so the status label and toggle switch are laid out correctly. */
|
|
4067
|
-
|
|
4068
3802
|
.ToggleSwitch.ToggleSwitch {
|
|
4069
3803
|
display: inline-flex;
|
|
4070
3804
|
}
|
|
4071
3805
|
|
|
4072
3806
|
.ToggleSwitch {
|
|
3807
|
+
--toggleSwitch-knob-inset: var(--borderWidth-thin);
|
|
3808
|
+
--toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset));
|
|
3809
|
+
|
|
4073
3810
|
align-items: center;
|
|
4074
3811
|
display: inline-flex;
|
|
4075
3812
|
gap: var(--controlStack-medium-gap-condensed);
|
|
@@ -4164,7 +3901,7 @@ a.tabnav-extra:hover {
|
|
|
4164
3901
|
.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
|
|
4165
3902
|
background-color: var(--controlKnob-bgColor-checked);
|
|
4166
3903
|
border-color: var(--controlKnob-borderColor-checked);
|
|
4167
|
-
transform: translateX(100%);
|
|
3904
|
+
transform: translateX(calc(100% - var(--toggleSwitch-knob-offset)));
|
|
4168
3905
|
}
|
|
4169
3906
|
|
|
4170
3907
|
.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon {
|
|
@@ -4184,7 +3921,6 @@ a.tabnav-extra:hover {
|
|
|
4184
3921
|
|
|
4185
3922
|
.ToggleSwitch-track[disabled] .ToggleSwitch-knob {
|
|
4186
3923
|
border-color: var(--borderColor-default);
|
|
4187
|
-
box-shadow: none;
|
|
4188
3924
|
}
|
|
4189
3925
|
|
|
4190
3926
|
.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
|
|
@@ -4225,14 +3961,14 @@ a.tabnav-extra:hover {
|
|
|
4225
3961
|
|
|
4226
3962
|
.ToggleSwitch-knob {
|
|
4227
3963
|
position: absolute;
|
|
4228
|
-
|
|
4229
|
-
|
|
3964
|
+
inset-block: var(--toggleSwitch-knob-inset);
|
|
3965
|
+
inset-inline-start: var(--toggleSwitch-knob-inset);
|
|
4230
3966
|
z-index: 1;
|
|
4231
3967
|
width: 50%;
|
|
4232
3968
|
background-color: var(--controlKnob-bgColor-rest);
|
|
4233
3969
|
border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
|
|
4234
|
-
|
|
4235
|
-
|
|
3970
|
+
/* stylelint-disable-next-line primer/borders */
|
|
3971
|
+
border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));
|
|
4236
3972
|
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
|
4237
3973
|
transition-duration: 80ms;
|
|
4238
3974
|
transition-property: transform;
|
|
@@ -4290,7 +4026,6 @@ a.tabnav-extra:hover {
|
|
|
4290
4026
|
.ToggleSwitch--statusAtEnd .ToggleSwitch-status {
|
|
4291
4027
|
text-align: left;
|
|
4292
4028
|
}
|
|
4293
|
-
|
|
4294
4029
|
/* UnderlineNav */
|
|
4295
4030
|
|
|
4296
4031
|
.UnderlineNav {
|
|
@@ -4305,7 +4040,6 @@ a.tabnav-extra:hover {
|
|
|
4305
4040
|
}
|
|
4306
4041
|
|
|
4307
4042
|
.UnderlineNav .Counter {
|
|
4308
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4309
4043
|
margin-left: var(--control-medium-gap);
|
|
4310
4044
|
color: var(--fgColor-default);
|
|
4311
4045
|
background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
|
@@ -4326,7 +4060,6 @@ a.tabnav-extra:hover {
|
|
|
4326
4060
|
.UnderlineNav-item {
|
|
4327
4061
|
position: relative;
|
|
4328
4062
|
display: flex;
|
|
4329
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4330
4063
|
padding: 0 var(--control-medium-paddingInline-condensed);
|
|
4331
4064
|
font-size: var(--text-body-size-medium);
|
|
4332
4065
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -4431,7 +4164,6 @@ a.tabnav-extra:hover {
|
|
|
4431
4164
|
|
|
4432
4165
|
.UnderlineNav-octicon {
|
|
4433
4166
|
display: inline !important;
|
|
4434
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4435
4167
|
margin-right: var(--control-medium-gap);
|
|
4436
4168
|
color: var(--fgColor-muted);
|
|
4437
4169
|
fill: var(--fgColor-muted);
|
|
@@ -4441,7 +4173,6 @@ a.tabnav-extra:hover {
|
|
|
4441
4173
|
display: flex;
|
|
4442
4174
|
justify-content: space-between;
|
|
4443
4175
|
}
|
|
4444
|
-
|
|
4445
4176
|
@keyframes shimmer {
|
|
4446
4177
|
from {
|
|
4447
4178
|
mask-position: 200%;
|
|
@@ -4478,7 +4209,6 @@ a.tabnav-extra:hover {
|
|
|
4478
4209
|
outline-offset: -1px;
|
|
4479
4210
|
}
|
|
4480
4211
|
}
|
|
4481
|
-
|
|
4482
4212
|
/* stylelint-disable selector-max-type -- Copied from primer/react */
|
|
4483
4213
|
|
|
4484
4214
|
.TreeViewRootUlStyles {
|
|
@@ -4850,6 +4580,7 @@ a.tabnav-extra:hover {
|
|
|
4850
4580
|
/* stylelint-disable-next-line primer/spacing */
|
|
4851
4581
|
margin: -1px;
|
|
4852
4582
|
overflow: hidden;
|
|
4583
|
+
/* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */
|
|
4853
4584
|
clip: rect(0, 0, 0, 0);
|
|
4854
4585
|
white-space: nowrap;
|
|
4855
4586
|
border-width: 0;
|
|
@@ -4902,7 +4633,6 @@ a.tabnav-extra:hover {
|
|
|
4902
4633
|
}
|
|
4903
4634
|
|
|
4904
4635
|
/* beta */
|
|
4905
|
-
|
|
4906
4636
|
/* avatar */
|
|
4907
4637
|
|
|
4908
4638
|
.avatar {
|
|
@@ -4925,7 +4655,6 @@ a.tabnav-extra:hover {
|
|
|
4925
4655
|
}
|
|
4926
4656
|
|
|
4927
4657
|
/* User for example on /stars and /user for grids of avatars */
|
|
4928
|
-
|
|
4929
4658
|
.avatar-group-item {
|
|
4930
4659
|
display: inline-block;
|
|
4931
4660
|
margin-bottom: var(--base-size-4);
|
|
@@ -4980,9 +4709,7 @@ a.tabnav-extra:hover {
|
|
|
4980
4709
|
width: var(--base-size-64);
|
|
4981
4710
|
height: var(--base-size-64);
|
|
4982
4711
|
}
|
|
4983
|
-
|
|
4984
4712
|
/* stylelint-disable selector-max-specificity */
|
|
4985
|
-
|
|
4986
4713
|
/* The selector-max-specificity rule is disabled here because the nested selectors
|
|
4987
4714
|
in AvatarStack require high specificity to properly override default styles and
|
|
4988
4715
|
achieve the intended visual stacking. */
|
|
@@ -5139,15 +4866,12 @@ a.tabnav-extra:hover {
|
|
|
5139
4866
|
/* stylelint-disable-next-line primer/spacing */
|
|
5140
4867
|
margin-left: -11px;
|
|
5141
4868
|
}
|
|
5142
|
-
|
|
5143
4869
|
/* stylelint-disable primer/spacing */
|
|
5144
|
-
|
|
5145
4870
|
/* stylelint-disable primer/typography */
|
|
5146
4871
|
|
|
5147
4872
|
/* BorderBox */
|
|
5148
4873
|
|
|
5149
4874
|
/* TODO: Rename to BorderBox to match PVC */
|
|
5150
|
-
|
|
5151
4875
|
.Box {
|
|
5152
4876
|
background-color: var(--bgColor-default);
|
|
5153
4877
|
border-color: var(--borderColor-default);
|
|
@@ -5157,29 +4881,23 @@ a.tabnav-extra:hover {
|
|
|
5157
4881
|
}
|
|
5158
4882
|
|
|
5159
4883
|
/* Box padding density options */
|
|
5160
|
-
|
|
5161
4884
|
.Box--condensed {
|
|
5162
4885
|
line-height: 1.25;
|
|
5163
4886
|
}
|
|
5164
|
-
|
|
5165
4887
|
.Box--condensed .Box-header {
|
|
5166
4888
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5167
4889
|
}
|
|
5168
|
-
|
|
5169
4890
|
.Box--condensed .Box-body {
|
|
5170
4891
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5171
4892
|
}
|
|
5172
|
-
|
|
5173
4893
|
.Box--condensed .Box-footer {
|
|
5174
4894
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5175
4895
|
}
|
|
5176
|
-
|
|
5177
4896
|
.btn-octicon:is(.Box--condensed .Box-btn-octicon) {
|
|
5178
4897
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
5179
4898
|
margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
|
|
5180
4899
|
line-height: 1.25;
|
|
5181
4900
|
}
|
|
5182
|
-
|
|
5183
4901
|
.Box--condensed .Box-row {
|
|
5184
4902
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5185
4903
|
}
|
|
@@ -5240,7 +4958,6 @@ a.tabnav-extra:hover {
|
|
|
5240
4958
|
}
|
|
5241
4959
|
|
|
5242
4960
|
/* Box rows */
|
|
5243
|
-
|
|
5244
4961
|
.Box-row {
|
|
5245
4962
|
padding: var(--stack-padding-normal);
|
|
5246
4963
|
margin-top: calc(var(--borderWidth-thin) * -1);
|
|
@@ -5249,53 +4966,40 @@ a.tabnav-extra:hover {
|
|
|
5249
4966
|
border-top-style: solid;
|
|
5250
4967
|
border-top-width: var(--borderWidth-thin);
|
|
5251
4968
|
}
|
|
5252
|
-
|
|
5253
4969
|
.Box-row:first-of-type {
|
|
5254
4970
|
border-top-left-radius: var(--borderRadius-medium);
|
|
5255
4971
|
border-top-right-radius: var(--borderRadius-medium);
|
|
5256
4972
|
}
|
|
5257
|
-
|
|
5258
4973
|
.Box-row:last-of-type {
|
|
5259
4974
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
5260
4975
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
5261
4976
|
}
|
|
5262
|
-
|
|
5263
4977
|
/* Adds a blue vertical line to the left of the row
|
|
5264
4978
|
** For indicating a row item is unread */
|
|
5265
|
-
|
|
5266
4979
|
.Box-row.Box-row--unread,.Box-row.unread {
|
|
5267
4980
|
/* stylelint-disable-next-line primer/box-shadow */
|
|
5268
4981
|
box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
|
|
5269
4982
|
}
|
|
5270
|
-
|
|
5271
4983
|
/* Focus styles for when drag icon */
|
|
5272
|
-
|
|
5273
4984
|
.Box-row.navigation-focus .Box-row--drag-button {
|
|
5274
4985
|
color: var(--fgColor-accent);
|
|
5275
4986
|
cursor: grab;
|
|
5276
4987
|
opacity: 100;
|
|
5277
4988
|
}
|
|
5278
|
-
|
|
5279
4989
|
/* Grabbing while row is dragged */
|
|
5280
|
-
|
|
5281
4990
|
.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
|
|
5282
4991
|
cursor: grabbing;
|
|
5283
4992
|
}
|
|
5284
|
-
|
|
5285
4993
|
/* Row dragging styles */
|
|
5286
|
-
|
|
5287
4994
|
.Box-row.navigation-focus.sortable-chosen {
|
|
5288
4995
|
background-color: var(--bgColor-muted);
|
|
5289
4996
|
}
|
|
5290
|
-
|
|
5291
4997
|
/* Makes dragging row background gray */
|
|
5292
|
-
|
|
5293
4998
|
.Box-row.navigation-focus.sortable-ghost {
|
|
5294
4999
|
background-color: var(--bgColor-muted);
|
|
5295
5000
|
|
|
5296
5001
|
/* Hides contents of row while dragging so row looks solid gray */
|
|
5297
5002
|
}
|
|
5298
|
-
|
|
5299
5003
|
.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
|
|
5300
5004
|
opacity: 0;
|
|
5301
5005
|
}
|
|
@@ -5319,9 +5023,7 @@ a.tabnav-extra:hover {
|
|
|
5319
5023
|
/* Optional link style
|
|
5320
5024
|
** Makes links on mobile blue since they don't have hover state,
|
|
5321
5025
|
** and links are dark-gray with blue hover on desktop. */
|
|
5322
|
-
|
|
5323
5026
|
@media (min-width: 768px) {
|
|
5324
|
-
|
|
5325
5027
|
.Box-row-link {
|
|
5326
5028
|
color: var(--fgColor-default);
|
|
5327
5029
|
-webkit-text-decoration: none;
|
|
@@ -5337,7 +5039,6 @@ a.tabnav-extra:hover {
|
|
|
5337
5039
|
|
|
5338
5040
|
/* Optional drag icon styles for reordering items
|
|
5339
5041
|
** Focus styles included in .Box-row above */
|
|
5340
|
-
|
|
5341
5042
|
.Box-row--drag-button {
|
|
5342
5043
|
opacity: 0;
|
|
5343
5044
|
}
|
|
@@ -5352,7 +5053,6 @@ a.tabnav-extra:hover {
|
|
|
5352
5053
|
}
|
|
5353
5054
|
|
|
5354
5055
|
/* Option for a box with scrolling content */
|
|
5355
|
-
|
|
5356
5056
|
.Box--scrollable {
|
|
5357
5057
|
max-height: 324px;
|
|
5358
5058
|
overflow: scroll;
|
|
@@ -5383,15 +5083,12 @@ a.tabnav-extra:hover {
|
|
|
5383
5083
|
|
|
5384
5084
|
/* Applies and red border to the outside of the box,
|
|
5385
5085
|
** but not to the border separating rows. */
|
|
5386
|
-
|
|
5387
5086
|
.Box--danger {
|
|
5388
5087
|
border-color: var(--borderColor-danger-emphasis);
|
|
5389
5088
|
}
|
|
5390
|
-
|
|
5391
5089
|
:is(.Box--danger .Box-row):first-of-type {
|
|
5392
5090
|
border-color: var(--borderColor-danger-emphasis);
|
|
5393
5091
|
}
|
|
5394
|
-
|
|
5395
5092
|
:is(.Box--danger .Box-body):last-of-type {
|
|
5396
5093
|
border-color: var(--borderColor-danger-emphasis);
|
|
5397
5094
|
}
|
|
@@ -5416,15 +5113,12 @@ a.tabnav-extra:hover {
|
|
|
5416
5113
|
}
|
|
5417
5114
|
|
|
5418
5115
|
/* Box with btn-octicon */
|
|
5419
|
-
|
|
5420
5116
|
/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
|
|
5421
|
-
|
|
5422
5117
|
.Box-btn-octicon.btn-octicon {
|
|
5423
5118
|
padding: var(--control-medium-paddingInline-spacious);
|
|
5424
5119
|
margin: calc(var(--controlStack-small-gap-spacious) * -1);
|
|
5425
5120
|
line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */
|
|
5426
5121
|
}
|
|
5427
|
-
|
|
5428
5122
|
/* blankslate */
|
|
5429
5123
|
|
|
5430
5124
|
.blankslate-container {
|
|
@@ -5445,7 +5139,7 @@ a.tabnav-extra:hover {
|
|
|
5445
5139
|
}
|
|
5446
5140
|
|
|
5447
5141
|
.blankslate p {
|
|
5448
|
-
font-size: var(--text-body-size-
|
|
5142
|
+
font-size: var(--text-body-size-medium);
|
|
5449
5143
|
color: var(--fgColor-muted);
|
|
5450
5144
|
max-width: 56rem;
|
|
5451
5145
|
margin: auto;
|
|
@@ -5469,23 +5163,19 @@ a.tabnav-extra:hover {
|
|
|
5469
5163
|
}
|
|
5470
5164
|
|
|
5471
5165
|
.blankslate-icon {
|
|
5472
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5473
5166
|
margin-right: var(--control-small-gap);
|
|
5474
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5475
5167
|
margin-bottom: var(--stack-gap-condensed);
|
|
5476
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5477
5168
|
margin-left: var(--control-small-gap);
|
|
5478
5169
|
color: var(--fgColor-muted);
|
|
5479
5170
|
}
|
|
5480
5171
|
|
|
5481
5172
|
.blankslate-image {
|
|
5482
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5483
5173
|
margin-bottom: var(--stack-gap-normal);
|
|
5484
5174
|
}
|
|
5485
5175
|
|
|
5486
5176
|
.blankslate-heading {
|
|
5487
5177
|
margin-bottom: var(--base-size-4);
|
|
5488
|
-
font-size: var(--text-title-size-
|
|
5178
|
+
font-size: var(--text-title-size-small);
|
|
5489
5179
|
font-weight: var(--text-title-weight-medium);
|
|
5490
5180
|
text-wrap: balance;
|
|
5491
5181
|
}
|
|
@@ -5495,17 +5185,14 @@ a.tabnav-extra:hover {
|
|
|
5495
5185
|
}
|
|
5496
5186
|
|
|
5497
5187
|
.blankslate-action {
|
|
5498
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5499
5188
|
margin-top: var(--stack-gap-normal);
|
|
5500
5189
|
}
|
|
5501
5190
|
|
|
5502
5191
|
.blankslate-action:first-of-type {
|
|
5503
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5504
5192
|
margin-top: var(--stack-gap-spacious);
|
|
5505
5193
|
}
|
|
5506
5194
|
|
|
5507
5195
|
.blankslate-action:last-of-type {
|
|
5508
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5509
5196
|
margin-bottom: var(--stack-gap-condensed);
|
|
5510
5197
|
}
|
|
5511
5198
|
|
|
@@ -5525,84 +5212,30 @@ a.tabnav-extra:hover {
|
|
|
5525
5212
|
|
|
5526
5213
|
/* was .large-format
|
|
5527
5214
|
** QUESTION: should we deprecate this? */
|
|
5528
|
-
|
|
5529
5215
|
/* stylelint-disable-next-line selector-max-type */
|
|
5530
|
-
|
|
5531
5216
|
.blankslate-large img {
|
|
5532
5217
|
width: 80px;
|
|
5533
5218
|
height: 80px;
|
|
5534
5219
|
}
|
|
5535
|
-
|
|
5536
5220
|
/* stylelint-disable-next-line selector-max-type */
|
|
5537
|
-
|
|
5538
5221
|
.blankslate-large h3 {
|
|
5539
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5540
5222
|
margin: var(--stack-gap-normal) 0;
|
|
5541
5223
|
|
|
5542
5224
|
/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
|
|
5543
5225
|
/* stylelint-disable-next-line primer/typography */
|
|
5544
5226
|
font-size: 24px;
|
|
5545
5227
|
}
|
|
5546
|
-
|
|
5547
5228
|
/* stylelint-disable-next-line selector-max-type */
|
|
5548
|
-
|
|
5549
5229
|
.blankslate-large p {
|
|
5550
5230
|
font-size: var(--text-body-size-large);
|
|
5551
5231
|
}
|
|
5552
5232
|
|
|
5553
5233
|
/* was .clean-background
|
|
5554
5234
|
** TO DO: deprecate this and use utility instead */
|
|
5555
|
-
|
|
5556
5235
|
.blankslate-clean-background {
|
|
5557
5236
|
border: 0;
|
|
5558
5237
|
}
|
|
5559
|
-
|
|
5560
|
-
/* At the time these styles were written,
|
|
5561
|
-
`34rem` was our "small" breakpoint width */
|
|
5562
|
-
|
|
5563
|
-
@container (max-width: 34rem) {
|
|
5564
|
-
.blankslate {
|
|
5565
|
-
--blankslate-outer-padding-block: var(--base-size-20);
|
|
5566
|
-
--blankslate-outer-padding-inline: var(--base-size-20);
|
|
5567
|
-
}
|
|
5568
|
-
|
|
5569
|
-
.blankslate-spacious {
|
|
5570
|
-
--blankslate-outer-padding-block: var(--base-size-44);
|
|
5571
|
-
--blankslate-outer-padding-inline: var(--base-size-28);
|
|
5572
|
-
}
|
|
5573
|
-
|
|
5574
|
-
.blankslate-icon {
|
|
5575
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5576
|
-
margin-bottom: var(--stack-gap-condensed);
|
|
5577
|
-
}
|
|
5578
|
-
|
|
5579
|
-
.blankslate-heading {
|
|
5580
|
-
font-size: var(--text-title-size-small);
|
|
5581
|
-
}
|
|
5582
|
-
|
|
5583
|
-
/* stylelint-disable-next-line selector-max-type */
|
|
5584
|
-
.blankslate p {
|
|
5585
|
-
font-size: var(--text-body-size-medium);
|
|
5586
|
-
}
|
|
5587
|
-
|
|
5588
|
-
.blankslate-action {
|
|
5589
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5590
|
-
margin-top: var(--stack-gap-condensed);
|
|
5591
|
-
}
|
|
5592
|
-
|
|
5593
|
-
.blankslate-action:first-of-type {
|
|
5594
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5595
|
-
margin-top: var(--stack-gap-normal);
|
|
5596
|
-
}
|
|
5597
|
-
|
|
5598
|
-
.blankslate-action:last-of-type {
|
|
5599
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5600
|
-
margin-bottom: calc(var(--stack-gap-condensed) / 2);
|
|
5601
|
-
}
|
|
5602
|
-
}
|
|
5603
|
-
|
|
5604
5238
|
/* stylelint-disable selector-max-type, selector-no-qualifying-type */
|
|
5605
|
-
|
|
5606
5239
|
anchored-position[popover] {
|
|
5607
5240
|
position: absolute;
|
|
5608
5241
|
min-width: 192px;
|
|
@@ -5632,13 +5265,11 @@ select-panel dialog::backdrop {
|
|
|
5632
5265
|
outline: solid 1px transparent;
|
|
5633
5266
|
}
|
|
5634
5267
|
}
|
|
5635
|
-
|
|
5636
5268
|
.breadcrumb-item {
|
|
5637
5269
|
display: inline-block;
|
|
5638
5270
|
list-style: none;
|
|
5639
5271
|
max-width: 100%;
|
|
5640
5272
|
}
|
|
5641
|
-
|
|
5642
5273
|
.breadcrumb-item::after {
|
|
5643
5274
|
display: inline-block;
|
|
5644
5275
|
height: 0.8em;
|
|
@@ -5650,36 +5281,33 @@ select-panel dialog::backdrop {
|
|
|
5650
5281
|
transform: rotate(15deg) translateY(0.0625em);
|
|
5651
5282
|
}
|
|
5652
5283
|
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5284
|
+
/* Expanded per-class so each selector buckets by its own class during style
|
|
5285
|
+
** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
|
|
5286
|
+
** fast-reject. */
|
|
5287
|
+
.breadcrumb-item-selected::after,
|
|
5288
|
+
.breadcrumb-item[aria-current]:not([aria-current='false'])::after {
|
|
5289
|
+
content: none;
|
|
5290
|
+
}
|
|
5656
5291
|
|
|
5657
5292
|
/* stylelint-disable-next-line selector-max-type */
|
|
5658
|
-
|
|
5659
5293
|
.breadcrumb-item-selected a {
|
|
5660
5294
|
color: var(--fgColor-default);
|
|
5661
5295
|
-webkit-text-decoration: none !important;
|
|
5662
5296
|
text-decoration: none !important;
|
|
5663
5297
|
cursor: default !important;
|
|
5664
5298
|
}
|
|
5665
|
-
|
|
5666
5299
|
/* stylelint-disable selector-no-qualifying-type */
|
|
5667
|
-
|
|
5668
5300
|
/* stylelint-disable selector-max-type */
|
|
5669
5301
|
|
|
5670
|
-
/* stylelint-disable primer/spacing */
|
|
5671
|
-
|
|
5672
5302
|
/* CSS for Button */
|
|
5673
5303
|
|
|
5674
5304
|
/* temporary, pre primitives release */
|
|
5675
|
-
|
|
5676
5305
|
:root {
|
|
5677
5306
|
--duration-fast: 80ms;
|
|
5678
5307
|
--easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
|
|
5679
5308
|
}
|
|
5680
5309
|
|
|
5681
5310
|
/* base button */
|
|
5682
|
-
|
|
5683
5311
|
.Button {
|
|
5684
5312
|
position: relative;
|
|
5685
5313
|
display: inline-flex;
|
|
@@ -5706,7 +5334,6 @@ select-panel dialog::backdrop {
|
|
|
5706
5334
|
|
|
5707
5335
|
/* mobile friendly sizing */
|
|
5708
5336
|
}
|
|
5709
|
-
|
|
5710
5337
|
@media (pointer: coarse) {
|
|
5711
5338
|
:is(.Button::before) {
|
|
5712
5339
|
position: absolute;
|
|
@@ -5720,22 +5347,17 @@ select-panel dialog::backdrop {
|
|
|
5720
5347
|
min-width: 48px;
|
|
5721
5348
|
}
|
|
5722
5349
|
}
|
|
5723
|
-
|
|
5724
5350
|
/* base states */
|
|
5725
|
-
|
|
5726
5351
|
.Button:hover {
|
|
5727
5352
|
transition-duration: var(--duration-fast);
|
|
5728
5353
|
}
|
|
5729
|
-
|
|
5730
5354
|
.Button:active {
|
|
5731
5355
|
transition: none;
|
|
5732
5356
|
}
|
|
5733
|
-
|
|
5734
5357
|
.Button:disabled,.Button[aria-disabled='true'] {
|
|
5735
5358
|
cursor: not-allowed;
|
|
5736
5359
|
box-shadow: none;
|
|
5737
5360
|
}
|
|
5738
|
-
|
|
5739
5361
|
.Button.Button--iconOnly {
|
|
5740
5362
|
color: var(--fgColor-muted);
|
|
5741
5363
|
}
|
|
@@ -5746,7 +5368,6 @@ select-panel dialog::backdrop {
|
|
|
5746
5368
|
}
|
|
5747
5369
|
|
|
5748
5370
|
/* wrap grid content to allow trailingAction to lock-right */
|
|
5749
|
-
|
|
5750
5371
|
.Button-content {
|
|
5751
5372
|
flex: 1 0 auto;
|
|
5752
5373
|
display: grid;
|
|
@@ -5757,13 +5378,11 @@ select-panel dialog::backdrop {
|
|
|
5757
5378
|
|
|
5758
5379
|
/* padding-bottom: 1px; optical alignment for firefox */
|
|
5759
5380
|
}
|
|
5760
|
-
|
|
5761
5381
|
.Button-content > :not(:last-child) {
|
|
5762
5382
|
margin-right: var(--control-medium-gap);
|
|
5763
5383
|
}
|
|
5764
5384
|
|
|
5765
5385
|
/* center child elements for fullWidth */
|
|
5766
|
-
|
|
5767
5386
|
.Button-content--alignStart {
|
|
5768
5387
|
justify-content: start;
|
|
5769
5388
|
}
|
|
@@ -5771,12 +5390,10 @@ select-panel dialog::backdrop {
|
|
|
5771
5390
|
/* button child elements */
|
|
5772
5391
|
|
|
5773
5392
|
/* align svg */
|
|
5774
|
-
|
|
5775
5393
|
.Button-visual {
|
|
5776
5394
|
display: flex;
|
|
5777
5395
|
pointer-events: none; /* allow click handler to work, avoiding visuals */
|
|
5778
5396
|
}
|
|
5779
|
-
|
|
5780
5397
|
.Button-visual .Counter {
|
|
5781
5398
|
color: inherit;
|
|
5782
5399
|
background-color: var(--buttonCounter-default-bgColor-rest);
|
|
@@ -5880,7 +5497,6 @@ select-panel dialog::backdrop {
|
|
|
5880
5497
|
/* variants */
|
|
5881
5498
|
|
|
5882
5499
|
/* primary */
|
|
5883
|
-
|
|
5884
5500
|
.Button--primary {
|
|
5885
5501
|
color: var(--button-primary-fgColor-rest);
|
|
5886
5502
|
fill: var(--button-primary-iconColor-rest);
|
|
@@ -5888,18 +5504,14 @@ select-panel dialog::backdrop {
|
|
|
5888
5504
|
border-color: var(--button-primary-borderColor-rest);
|
|
5889
5505
|
box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
|
|
5890
5506
|
}
|
|
5891
|
-
|
|
5892
5507
|
.Button--primary.Button--iconOnly {
|
|
5893
5508
|
color: var(--button-primary-iconColor-rest);
|
|
5894
5509
|
}
|
|
5895
|
-
|
|
5896
5510
|
.Button--primary:hover:not(:disabled,.Button--inactive) {
|
|
5897
5511
|
background-color: var(--button-primary-bgColor-hover);
|
|
5898
5512
|
border-color: var(--button-primary-borderColor-hover);
|
|
5899
5513
|
}
|
|
5900
|
-
|
|
5901
5514
|
/* fallback :focus state */
|
|
5902
|
-
|
|
5903
5515
|
.Button--primary:focus {
|
|
5904
5516
|
outline: 2px solid var(--focus-outlineColor);
|
|
5905
5517
|
outline-offset: -2px;
|
|
@@ -5907,39 +5519,32 @@ select-panel dialog::backdrop {
|
|
|
5907
5519
|
|
|
5908
5520
|
/* remove fallback :focus if :focus-visible is supported */
|
|
5909
5521
|
}
|
|
5910
|
-
|
|
5911
5522
|
.Button--primary:focus:not(:focus-visible) {
|
|
5912
5523
|
outline: solid 1px transparent;
|
|
5913
5524
|
box-shadow: none;
|
|
5914
5525
|
}
|
|
5915
|
-
|
|
5916
5526
|
/* default focus state */
|
|
5917
|
-
|
|
5918
5527
|
.Button--primary:focus-visible {
|
|
5919
5528
|
outline: 2px solid var(--focus-outlineColor);
|
|
5920
5529
|
outline-offset: -2px;
|
|
5921
5530
|
box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
|
|
5922
5531
|
}
|
|
5923
|
-
|
|
5924
5532
|
.Button--primary:active:not(:disabled),.Button--primary[aria-pressed='true'] {
|
|
5925
5533
|
background-color: var(--button-primary-bgColor-active);
|
|
5926
5534
|
box-shadow: var(--button-primary-shadow-selected);
|
|
5927
5535
|
}
|
|
5928
|
-
|
|
5929
5536
|
.Button--primary:disabled,.Button--primary[aria-disabled='true'] {
|
|
5930
5537
|
color: var(--button-primary-fgColor-disabled);
|
|
5931
5538
|
fill: var(--button-primary-fgColor-disabled);
|
|
5932
5539
|
background-color: var(--button-primary-bgColor-disabled);
|
|
5933
5540
|
border-color: var(--button-primary-borderColor-disabled);
|
|
5934
5541
|
}
|
|
5935
|
-
|
|
5936
5542
|
.Button--primary .Counter {
|
|
5937
5543
|
color: inherit;
|
|
5938
5544
|
background-color: var(--buttonCounter-primary-bgColor-rest);
|
|
5939
5545
|
}
|
|
5940
5546
|
|
|
5941
5547
|
/* default (secondary) */
|
|
5942
|
-
|
|
5943
5548
|
.Button--secondary {
|
|
5944
5549
|
color: var(--button-default-fgColor-rest);
|
|
5945
5550
|
fill: var(--fgColor-muted); /* help this */
|
|
@@ -5947,22 +5552,18 @@ select-panel dialog::backdrop {
|
|
|
5947
5552
|
border-color: var(--button-default-borderColor-rest);
|
|
5948
5553
|
box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
|
|
5949
5554
|
}
|
|
5950
|
-
|
|
5951
5555
|
.Button--secondary:hover:not(:disabled,.Button--inactive) {
|
|
5952
5556
|
background-color: var(--button-default-bgColor-hover);
|
|
5953
5557
|
border-color: var(--button-default-borderColor-hover);
|
|
5954
5558
|
}
|
|
5955
|
-
|
|
5956
5559
|
.Button--secondary:active:not(:disabled) {
|
|
5957
5560
|
background-color: var(--button-default-bgColor-active);
|
|
5958
5561
|
border-color: var(--button-default-borderColor-active);
|
|
5959
5562
|
}
|
|
5960
|
-
|
|
5961
5563
|
.Button--secondary[aria-pressed='true'] {
|
|
5962
5564
|
background-color: var(--button-default-bgColor-selected);
|
|
5963
5565
|
box-shadow: var(--shadow-inset);
|
|
5964
5566
|
}
|
|
5965
|
-
|
|
5966
5567
|
.Button--secondary:disabled,.Button--secondary[aria-disabled='true'] {
|
|
5967
5568
|
color: var(--control-fgColor-disabled);
|
|
5968
5569
|
fill: var(--control-fgColor-disabled);
|
|
@@ -6039,7 +5640,6 @@ select-panel dialog::backdrop {
|
|
|
6039
5640
|
}
|
|
6040
5641
|
|
|
6041
5642
|
/* danger */
|
|
6042
|
-
|
|
6043
5643
|
.Button--danger {
|
|
6044
5644
|
color: var(--button-danger-fgColor-rest);
|
|
6045
5645
|
fill: var(--button-danger-iconColor-rest);
|
|
@@ -6047,11 +5647,9 @@ select-panel dialog::backdrop {
|
|
|
6047
5647
|
border-color: var(--button-danger-borderColor-rest);
|
|
6048
5648
|
box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
|
|
6049
5649
|
}
|
|
6050
|
-
|
|
6051
5650
|
.Button--danger.Button--iconOnly {
|
|
6052
5651
|
color: var(--button-danger-iconColor-rest);
|
|
6053
5652
|
}
|
|
6054
|
-
|
|
6055
5653
|
.Button--danger:hover:not(:disabled,.Button--inactive) {
|
|
6056
5654
|
color: var(--button-danger-fgColor-hover);
|
|
6057
5655
|
fill: var(--button-danger-fgColor-hover);
|
|
@@ -6059,12 +5657,10 @@ select-panel dialog::backdrop {
|
|
|
6059
5657
|
border-color: var(--button-danger-borderColor-hover);
|
|
6060
5658
|
box-shadow: var(--shadow-resting-small);
|
|
6061
5659
|
}
|
|
6062
|
-
|
|
6063
5660
|
.Button--danger:hover:not(:disabled,.Button--inactive) .Counter {
|
|
6064
5661
|
color: var(--buttonCounter-danger-fgColor-hover);
|
|
6065
5662
|
background-color: var(--buttonCounter-danger-bgColor-hover);
|
|
6066
5663
|
}
|
|
6067
|
-
|
|
6068
5664
|
.Button--danger:active:not(:disabled),.Button--danger[aria-pressed='true'] {
|
|
6069
5665
|
color: var(--button-danger-fgColor-active);
|
|
6070
5666
|
fill: var(--button-danger-fgColor-active);
|
|
@@ -6072,19 +5668,16 @@ select-panel dialog::backdrop {
|
|
|
6072
5668
|
border-color: var(--button-danger-borderColor-active);
|
|
6073
5669
|
box-shadow: var(--button-danger-shadow-selected);
|
|
6074
5670
|
}
|
|
6075
|
-
|
|
6076
5671
|
.Button--danger:disabled,.Button--danger[aria-disabled='true'] {
|
|
6077
5672
|
color: var(--button-danger-fgColor-disabled);
|
|
6078
5673
|
fill: var(--button-danger-fgColor-disabled);
|
|
6079
5674
|
background-color: var(--button-danger-bgColor-disabled);
|
|
6080
5675
|
border-color: var(--button-default-borderColor-disabled);
|
|
6081
5676
|
}
|
|
6082
|
-
|
|
6083
5677
|
:is(.Button--danger:disabled,.Button--danger[aria-disabled='true']) .Counter {
|
|
6084
5678
|
color: var(--buttonCounter-danger-fgColor-disabled);
|
|
6085
5679
|
background-color: var(--buttonCounter-danger-bgColor-disabled);
|
|
6086
5680
|
}
|
|
6087
|
-
|
|
6088
5681
|
.Button--danger .Counter {
|
|
6089
5682
|
color: var(--buttonCounter-danger-fgColor-rest);
|
|
6090
5683
|
background-color: var(--buttonCounter-danger-bgColor-rest);
|
|
@@ -6106,39 +5699,32 @@ select-panel dialog::backdrop {
|
|
|
6106
5699
|
}
|
|
6107
5700
|
|
|
6108
5701
|
/* `disabled` takes precedence over `inactive` */
|
|
6109
|
-
|
|
6110
5702
|
.Button--inactive:not([aria-disabled='true'], :disabled) {
|
|
6111
5703
|
color: var(--button-inactive-fgColor);
|
|
6112
5704
|
cursor: default;
|
|
6113
5705
|
background-color: var(--button-inactive-bgColor);
|
|
6114
5706
|
border: 0;
|
|
6115
5707
|
}
|
|
6116
|
-
|
|
6117
5708
|
.ButtonGroup {
|
|
6118
5709
|
display: inline-flex;
|
|
6119
5710
|
}
|
|
6120
|
-
|
|
6121
5711
|
.ButtonGroup .Button {
|
|
6122
5712
|
/* stylelint-disable-next-line primer/spacing */
|
|
6123
5713
|
margin-inline-end: -1px;
|
|
6124
5714
|
position: relative;
|
|
6125
5715
|
border-radius: 0;
|
|
6126
5716
|
}
|
|
6127
|
-
|
|
6128
5717
|
:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):hover {
|
|
6129
5718
|
z-index: 1;
|
|
6130
5719
|
}
|
|
6131
|
-
|
|
6132
5720
|
.ButtonGroup > :first-child .Button {
|
|
6133
5721
|
border-top-left-radius: var(--borderRadius-medium);
|
|
6134
5722
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
6135
5723
|
}
|
|
6136
|
-
|
|
6137
5724
|
.ButtonGroup > :last-child .Button {
|
|
6138
5725
|
border-top-right-radius: var(--borderRadius-medium);
|
|
6139
5726
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
6140
5727
|
}
|
|
6141
|
-
|
|
6142
5728
|
/* Counter */
|
|
6143
5729
|
|
|
6144
5730
|
.Counter {
|
|
@@ -6177,13 +5763,11 @@ select-panel dialog::backdrop {
|
|
|
6177
5763
|
color: var(--fgColor-muted);
|
|
6178
5764
|
background-color: var(--bgColor-neutral-muted);
|
|
6179
5765
|
}
|
|
6180
|
-
|
|
6181
5766
|
/* stylelint-disable primer/spacing */
|
|
6182
5767
|
|
|
6183
5768
|
/* flash */
|
|
6184
5769
|
|
|
6185
5770
|
/* Default flash */
|
|
6186
|
-
|
|
6187
5771
|
.flash:not(.Banner) {
|
|
6188
5772
|
position: relative;
|
|
6189
5773
|
padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
|
|
@@ -6196,26 +5780,21 @@ select-panel dialog::backdrop {
|
|
|
6196
5780
|
border-width: var(--borderWidth-thin);
|
|
6197
5781
|
border-radius: var(--borderRadius-medium);
|
|
6198
5782
|
}
|
|
6199
|
-
|
|
6200
5783
|
.flash:not(.Banner) .octicon {
|
|
6201
5784
|
margin-right: var(--base-size-12);
|
|
6202
5785
|
color: var(--fgColor-accent);
|
|
6203
5786
|
}
|
|
6204
|
-
|
|
6205
5787
|
/* stylelint-disable-next-line selector-max-type */
|
|
6206
|
-
|
|
6207
5788
|
.flash:not(.Banner) p:last-child {
|
|
6208
5789
|
margin-bottom: 0;
|
|
6209
5790
|
}
|
|
6210
5791
|
|
|
6211
5792
|
/* Contain the flash messages */
|
|
6212
|
-
|
|
6213
5793
|
.flash-messages {
|
|
6214
5794
|
margin-bottom: var(--stack-gap-spacious);
|
|
6215
5795
|
}
|
|
6216
5796
|
|
|
6217
5797
|
/* Close button */
|
|
6218
|
-
|
|
6219
5798
|
.flash-close:not(.Banner-close) {
|
|
6220
5799
|
float: right;
|
|
6221
5800
|
margin-top: calc(var(--base-size-4) * -1);
|
|
@@ -6227,37 +5806,30 @@ select-panel dialog::backdrop {
|
|
|
6227
5806
|
border: 0;
|
|
6228
5807
|
appearance: none;
|
|
6229
5808
|
}
|
|
6230
|
-
|
|
6231
5809
|
.flash-close:not(.Banner-close):hover {
|
|
6232
5810
|
opacity: 0.7;
|
|
6233
5811
|
}
|
|
6234
|
-
|
|
6235
5812
|
.flash-close:not(.Banner-close):active {
|
|
6236
5813
|
opacity: 0.5;
|
|
6237
5814
|
}
|
|
6238
|
-
|
|
6239
5815
|
.flash-close:not(.Banner-close) .octicon {
|
|
6240
5816
|
margin-right: 0;
|
|
6241
5817
|
}
|
|
6242
5818
|
|
|
6243
5819
|
/* Action button */
|
|
6244
|
-
|
|
6245
5820
|
.flash-action:not(.Banner-actions) {
|
|
6246
5821
|
float: right;
|
|
6247
5822
|
margin-top: -3px;
|
|
6248
5823
|
margin-left: var(--stack-gap-spacious);
|
|
6249
5824
|
background-clip: padding-box;
|
|
6250
5825
|
}
|
|
6251
|
-
|
|
6252
5826
|
.flash-action.btn:not(.Banner-actions) .octicon {
|
|
6253
5827
|
margin-right: var(--control-small-gap);
|
|
6254
5828
|
color: var(--fgColor-muted);
|
|
6255
5829
|
}
|
|
6256
|
-
|
|
6257
5830
|
.flash-action.btn-primary:not(.Banner-actions) {
|
|
6258
5831
|
background-clip: border-box;
|
|
6259
5832
|
}
|
|
6260
|
-
|
|
6261
5833
|
.flash-action.btn-primary:not(.Banner-actions) .octicon {
|
|
6262
5834
|
color: inherit;
|
|
6263
5835
|
}
|
|
@@ -6303,7 +5875,6 @@ select-panel dialog::backdrop {
|
|
|
6303
5875
|
}
|
|
6304
5876
|
|
|
6305
5877
|
/* A banner rendered at the top of the page. */
|
|
6306
|
-
|
|
6307
5878
|
.flash-banner {
|
|
6308
5879
|
position: fixed;
|
|
6309
5880
|
top: 0;
|
|
@@ -6316,25 +5887,21 @@ select-panel dialog::backdrop {
|
|
|
6316
5887
|
}
|
|
6317
5888
|
|
|
6318
5889
|
/* Makes sure the background is opaque to cover any content underneath */
|
|
6319
|
-
|
|
6320
5890
|
.flash-full,
|
|
6321
5891
|
.flash-banner {
|
|
6322
5892
|
background-color: var(--bgColor-default);
|
|
6323
5893
|
}
|
|
6324
5894
|
|
|
6325
5895
|
/* FIXME deprecate this */
|
|
6326
|
-
|
|
6327
5896
|
.warning {
|
|
6328
5897
|
padding: 0.5em;
|
|
6329
5898
|
margin-bottom: 0.8em;
|
|
6330
5899
|
font-weight: var(--base-text-weight-semibold);
|
|
6331
5900
|
background-color: var(--bgColor-attention-muted);
|
|
6332
5901
|
}
|
|
6333
|
-
|
|
6334
5902
|
/* Labels */
|
|
6335
5903
|
|
|
6336
5904
|
/* Provide a wrapper to ensure labels stick together */
|
|
6337
|
-
|
|
6338
5905
|
.labels {
|
|
6339
5906
|
position: relative;
|
|
6340
5907
|
}
|
|
@@ -6371,7 +5938,6 @@ select-panel dialog::backdrop {
|
|
|
6371
5938
|
|
|
6372
5939
|
/* Doesn't increase height of parent element
|
|
6373
5940
|
** Can be used with different font-sizes */
|
|
6374
|
-
|
|
6375
5941
|
.Label--inline {
|
|
6376
5942
|
display: inline;
|
|
6377
5943
|
/* stylelint-disable-next-line primer/spacing */
|
|
@@ -6440,7 +6006,6 @@ select-panel dialog::backdrop {
|
|
|
6440
6006
|
color: var(--fgColor-sponsors);
|
|
6441
6007
|
border-color: var(--borderColor-sponsors-emphasis);
|
|
6442
6008
|
}
|
|
6443
|
-
|
|
6444
6009
|
/* Links */
|
|
6445
6010
|
|
|
6446
6011
|
.Link {
|
|
@@ -6497,7 +6062,6 @@ select-panel dialog::backdrop {
|
|
|
6497
6062
|
|
|
6498
6063
|
/* Set the link color only on hover
|
|
6499
6064
|
Useful when you want only part of a link to turn blue on hover */
|
|
6500
|
-
|
|
6501
6065
|
.Link--onHover:hover {
|
|
6502
6066
|
color: var(--fgColor-accent) !important;
|
|
6503
6067
|
-webkit-text-decoration: underline;
|
|
@@ -6507,7 +6071,6 @@ select-panel dialog::backdrop {
|
|
|
6507
6071
|
|
|
6508
6072
|
/* When using a color utility class inside of a link class
|
|
6509
6073
|
color should change with link on hover. */
|
|
6510
|
-
|
|
6511
6074
|
:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg'] {
|
|
6512
6075
|
color: inherit !important;
|
|
6513
6076
|
}
|
|
@@ -6520,7 +6083,6 @@ select-panel dialog::backdrop {
|
|
|
6520
6083
|
gap: var(--base-size-4);
|
|
6521
6084
|
text-decoration: inherit;
|
|
6522
6085
|
}
|
|
6523
|
-
|
|
6524
6086
|
/* stylelint-disable primer/spacing */
|
|
6525
6087
|
|
|
6526
6088
|
/* Popover */
|
|
@@ -6540,6 +6102,7 @@ select-panel dialog::backdrop {
|
|
|
6540
6102
|
border-radius: var(--borderRadius-medium);
|
|
6541
6103
|
|
|
6542
6104
|
/* adding !important to override utility classes used in dotcom */
|
|
6105
|
+
/* stylelint-disable-next-line primer/box-shadow -- intentional legacy shadow var with fallback, kept for dotcom compatibility */
|
|
6543
6106
|
box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
|
|
6544
6107
|
|
|
6545
6108
|
/* Carets */
|
|
@@ -6570,133 +6133,185 @@ select-panel dialog::backdrop {
|
|
|
6570
6133
|
}
|
|
6571
6134
|
|
|
6572
6135
|
/* No caret */
|
|
6573
|
-
|
|
6574
6136
|
.Popover-message--no-caret::before,.Popover-message--no-caret::after {
|
|
6575
6137
|
display: none;
|
|
6576
6138
|
}
|
|
6577
6139
|
|
|
6578
|
-
/*
|
|
6140
|
+
/* The caret variants below are authored as expanded per-class selectors
|
|
6141
|
+
** (rather than nesting `&::before`/`&::after` under a selector list) so each
|
|
6142
|
+
** rule's subject buckets by its own class during style recalc. The merged
|
|
6143
|
+
** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink
|
|
6144
|
+
** and shows up as pure slow-path selector matching. */
|
|
6579
6145
|
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6146
|
+
/* Bottom-oriented carets */
|
|
6147
|
+
.Popover-message--bottom::before,
|
|
6148
|
+
.Popover-message--bottom::after,
|
|
6149
|
+
.Popover-message--bottom-right::before,
|
|
6150
|
+
.Popover-message--bottom-right::after,
|
|
6151
|
+
.Popover-message--bottom-left::before,
|
|
6152
|
+
.Popover-message--bottom-left::after {
|
|
6153
|
+
top: auto;
|
|
6154
|
+
border-bottom-color: transparent;
|
|
6155
|
+
}
|
|
6584
6156
|
|
|
6585
|
-
|
|
6586
|
-
|
|
6587
|
-
|
|
6588
|
-
|
|
6157
|
+
.Popover-message--bottom::before,
|
|
6158
|
+
.Popover-message--bottom-right::before,
|
|
6159
|
+
.Popover-message--bottom-left::before {
|
|
6160
|
+
bottom: -16px;
|
|
6161
|
+
border-top-color: var(--borderColor-default);
|
|
6162
|
+
}
|
|
6589
6163
|
|
|
6590
|
-
|
|
6591
|
-
|
|
6592
|
-
|
|
6593
|
-
|
|
6594
|
-
|
|
6164
|
+
.Popover-message--bottom::after,
|
|
6165
|
+
.Popover-message--bottom-right::after,
|
|
6166
|
+
.Popover-message--bottom-left::after {
|
|
6167
|
+
bottom: -14px;
|
|
6168
|
+
/* stylelint-disable-next-line primer/colors */
|
|
6169
|
+
border-top-color: var(--overlay-bgColor);
|
|
6170
|
+
}
|
|
6595
6171
|
|
|
6596
6172
|
/* Top and Bottom: Right-oriented carets */
|
|
6597
|
-
|
|
6598
6173
|
.Popover-message--top-right,
|
|
6599
6174
|
.Popover-message--bottom-right {
|
|
6600
6175
|
right: -9px;
|
|
6601
6176
|
margin-right: 0;
|
|
6602
6177
|
}
|
|
6603
6178
|
|
|
6604
|
-
|
|
6605
|
-
|
|
6606
|
-
|
|
6607
|
-
|
|
6179
|
+
.Popover-message--top-right::before,
|
|
6180
|
+
.Popover-message--top-right::after,
|
|
6181
|
+
.Popover-message--bottom-right::before,
|
|
6182
|
+
.Popover-message--bottom-right::after {
|
|
6183
|
+
left: auto;
|
|
6184
|
+
margin-left: 0;
|
|
6185
|
+
}
|
|
6608
6186
|
|
|
6609
|
-
|
|
6610
|
-
|
|
6611
|
-
|
|
6187
|
+
.Popover-message--top-right::before,
|
|
6188
|
+
.Popover-message--bottom-right::before {
|
|
6189
|
+
right: var(--base-size-20);
|
|
6190
|
+
}
|
|
6612
6191
|
|
|
6613
|
-
|
|
6614
|
-
|
|
6615
|
-
|
|
6616
|
-
|
|
6192
|
+
.Popover-message--top-right::after,
|
|
6193
|
+
.Popover-message--bottom-right::after {
|
|
6194
|
+
right: var(--base-size-20);
|
|
6195
|
+
margin-right: 1px;
|
|
6196
|
+
}
|
|
6617
6197
|
|
|
6618
6198
|
/* Top and Bottom: Left-oriented carets */
|
|
6619
|
-
|
|
6620
6199
|
.Popover-message--top-left,
|
|
6621
6200
|
.Popover-message--bottom-left {
|
|
6622
6201
|
left: -9px;
|
|
6623
6202
|
margin-left: 0;
|
|
6624
6203
|
}
|
|
6625
6204
|
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6205
|
+
.Popover-message--top-left::before,
|
|
6206
|
+
.Popover-message--top-left::after,
|
|
6207
|
+
.Popover-message--bottom-left::before,
|
|
6208
|
+
.Popover-message--bottom-left::after {
|
|
6209
|
+
left: var(--base-size-24);
|
|
6210
|
+
margin-left: 0;
|
|
6211
|
+
}
|
|
6630
6212
|
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6213
|
+
.Popover-message--top-left::after,
|
|
6214
|
+
.Popover-message--bottom-left::after {
|
|
6215
|
+
left: var(--base-size-24);
|
|
6216
|
+
margin-left: 1px;
|
|
6217
|
+
}
|
|
6635
6218
|
|
|
6636
6219
|
/* Right- and Left-oriented carets */
|
|
6220
|
+
.Popover-message--right::before,
|
|
6221
|
+
.Popover-message--right::after,
|
|
6222
|
+
.Popover-message--right-top::before,
|
|
6223
|
+
.Popover-message--right-top::after,
|
|
6224
|
+
.Popover-message--right-bottom::before,
|
|
6225
|
+
.Popover-message--right-bottom::after,
|
|
6226
|
+
.Popover-message--left::before,
|
|
6227
|
+
.Popover-message--left::after,
|
|
6228
|
+
.Popover-message--left-top::before,
|
|
6229
|
+
.Popover-message--left-top::after,
|
|
6230
|
+
.Popover-message--left-bottom::before,
|
|
6231
|
+
.Popover-message--left-bottom::after {
|
|
6232
|
+
top: 50%;
|
|
6233
|
+
left: auto;
|
|
6234
|
+
margin-left: 0;
|
|
6235
|
+
border-bottom-color: transparent;
|
|
6236
|
+
}
|
|
6637
6237
|
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
margin-top: -9px;
|
|
6647
|
-
}
|
|
6238
|
+
.Popover-message--right::before,
|
|
6239
|
+
.Popover-message--right-top::before,
|
|
6240
|
+
.Popover-message--right-bottom::before,
|
|
6241
|
+
.Popover-message--left::before,
|
|
6242
|
+
.Popover-message--left-top::before,
|
|
6243
|
+
.Popover-message--left-bottom::before {
|
|
6244
|
+
margin-top: -9px;
|
|
6245
|
+
}
|
|
6648
6246
|
|
|
6649
|
-
|
|
6650
|
-
|
|
6651
|
-
|
|
6247
|
+
.Popover-message--right::after,
|
|
6248
|
+
.Popover-message--right-top::after,
|
|
6249
|
+
.Popover-message--right-bottom::after,
|
|
6250
|
+
.Popover-message--left::after,
|
|
6251
|
+
.Popover-message--left-top::after,
|
|
6252
|
+
.Popover-message--left-bottom::after {
|
|
6253
|
+
margin-top: -8px;
|
|
6254
|
+
}
|
|
6652
6255
|
|
|
6653
6256
|
/* Right-oriented carets */
|
|
6257
|
+
.Popover-message--right::before,
|
|
6258
|
+
.Popover-message--right-top::before,
|
|
6259
|
+
.Popover-message--right-bottom::before {
|
|
6260
|
+
right: -16px;
|
|
6261
|
+
border-left-color: var(--borderColor-default);
|
|
6262
|
+
}
|
|
6654
6263
|
|
|
6655
|
-
|
|
6656
|
-
|
|
6657
|
-
|
|
6658
|
-
|
|
6659
|
-
|
|
6660
|
-
:
|
|
6661
|
-
|
|
6662
|
-
/* stylelint-disable-next-line primer/colors */
|
|
6663
|
-
border-left-color: var(--overlay-bgColor);
|
|
6664
|
-
}
|
|
6264
|
+
.Popover-message--right::after,
|
|
6265
|
+
.Popover-message--right-top::after,
|
|
6266
|
+
.Popover-message--right-bottom::after {
|
|
6267
|
+
right: -14px;
|
|
6268
|
+
/* stylelint-disable-next-line primer/colors */
|
|
6269
|
+
border-left-color: var(--overlay-bgColor);
|
|
6270
|
+
}
|
|
6665
6271
|
|
|
6666
6272
|
/* Left-oriented carets */
|
|
6667
|
-
|
|
6668
|
-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
|
|
6675
|
-
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6273
|
+
.Popover-message--left::before,
|
|
6274
|
+
.Popover-message--left-top::before,
|
|
6275
|
+
.Popover-message--left-bottom::before {
|
|
6276
|
+
left: -16px;
|
|
6277
|
+
border-right-color: var(--borderColor-default);
|
|
6278
|
+
}
|
|
6279
|
+
|
|
6280
|
+
.Popover-message--left::after,
|
|
6281
|
+
.Popover-message--left-top::after,
|
|
6282
|
+
.Popover-message--left-bottom::after {
|
|
6283
|
+
left: -14px;
|
|
6284
|
+
margin-bottom: 1px;
|
|
6285
|
+
/* stylelint-disable-next-line primer/colors */
|
|
6286
|
+
border-right-color: var(--overlay-bgColor);
|
|
6287
|
+
}
|
|
6679
6288
|
|
|
6680
6289
|
/* Right and Left: Top-oriented carets */
|
|
6681
|
-
|
|
6682
|
-
|
|
6683
|
-
|
|
6684
|
-
|
|
6290
|
+
.Popover-message--right-top::before,
|
|
6291
|
+
.Popover-message--right-top::after,
|
|
6292
|
+
.Popover-message--left-top::before,
|
|
6293
|
+
.Popover-message--left-top::after {
|
|
6294
|
+
top: var(--base-size-24);
|
|
6295
|
+
}
|
|
6685
6296
|
|
|
6686
6297
|
/* Right and Left: Bottom-oriented carets */
|
|
6298
|
+
.Popover-message--right-bottom::before,
|
|
6299
|
+
.Popover-message--right-bottom::after,
|
|
6300
|
+
.Popover-message--left-bottom::before,
|
|
6301
|
+
.Popover-message--left-bottom::after {
|
|
6302
|
+
top: auto;
|
|
6303
|
+
}
|
|
6687
6304
|
|
|
6688
|
-
|
|
6689
|
-
|
|
6690
|
-
|
|
6691
|
-
|
|
6692
|
-
:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before {
|
|
6693
|
-
bottom: var(--base-size-16);
|
|
6694
|
-
}
|
|
6305
|
+
.Popover-message--right-bottom::before,
|
|
6306
|
+
.Popover-message--left-bottom::before {
|
|
6307
|
+
bottom: var(--base-size-16);
|
|
6308
|
+
}
|
|
6695
6309
|
|
|
6696
|
-
|
|
6697
|
-
|
|
6698
|
-
|
|
6699
|
-
|
|
6310
|
+
.Popover-message--right-bottom::after,
|
|
6311
|
+
.Popover-message--left-bottom::after {
|
|
6312
|
+
bottom: var(--base-size-16);
|
|
6313
|
+
margin-bottom: 1px;
|
|
6314
|
+
}
|
|
6700
6315
|
|
|
6701
6316
|
@media (min-width: 544px) {
|
|
6702
6317
|
.Popover-message--large {
|
|
@@ -6736,7 +6351,6 @@ select-panel dialog::backdrop {
|
|
|
6736
6351
|
display: none;
|
|
6737
6352
|
}
|
|
6738
6353
|
}
|
|
6739
|
-
|
|
6740
6354
|
/* Progress */
|
|
6741
6355
|
|
|
6742
6356
|
.Progress {
|
|
@@ -6775,7 +6389,6 @@ select-panel dialog::backdrop {
|
|
|
6775
6389
|
forced-color-adjust: none;
|
|
6776
6390
|
}
|
|
6777
6391
|
}
|
|
6778
|
-
|
|
6779
6392
|
/* State */
|
|
6780
6393
|
|
|
6781
6394
|
/* Default 32px */
|
|
@@ -6783,7 +6396,6 @@ select-panel dialog::backdrop {
|
|
|
6783
6396
|
.state, /* TODO: Deprecate */
|
|
6784
6397
|
.State {
|
|
6785
6398
|
display: inline-block;
|
|
6786
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6787
6399
|
padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
|
|
6788
6400
|
font-size: var(--text-body-size-medium);
|
|
6789
6401
|
font-weight: var(--base-text-weight-medium);
|
|
@@ -6835,14 +6447,11 @@ select-panel dialog::backdrop {
|
|
|
6835
6447
|
.State--small .octicon {
|
|
6836
6448
|
width: 1em; /* Ensures different icons don't change State indicator width */
|
|
6837
6449
|
}
|
|
6838
|
-
|
|
6839
6450
|
/* Subhead */
|
|
6840
6451
|
|
|
6841
6452
|
.Subhead {
|
|
6842
6453
|
display: flex;
|
|
6843
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6844
6454
|
padding-bottom: var(--stack-padding-condensed);
|
|
6845
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6846
6455
|
margin-bottom: var(--stack-gap-normal);
|
|
6847
6456
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
|
|
6848
6457
|
flex-flow: row wrap;
|
|
@@ -6850,13 +6459,11 @@ select-panel dialog::backdrop {
|
|
|
6850
6459
|
}
|
|
6851
6460
|
|
|
6852
6461
|
/* Modifier class to give a lot of breathing room between sections of content. */
|
|
6853
|
-
|
|
6854
6462
|
.Subhead--spacious {
|
|
6855
6463
|
margin-top: var(--base-size-40);
|
|
6856
6464
|
}
|
|
6857
6465
|
|
|
6858
6466
|
/* <h2> sized heading with normal font weight */
|
|
6859
|
-
|
|
6860
6467
|
.Subhead-heading {
|
|
6861
6468
|
font-weight: var(--base-text-weight-normal);
|
|
6862
6469
|
flex: 1 1 auto;
|
|
@@ -6873,14 +6480,12 @@ select-panel dialog::backdrop {
|
|
|
6873
6480
|
}
|
|
6874
6481
|
|
|
6875
6482
|
/* Make the text bold and red for dangerous content */
|
|
6876
|
-
|
|
6877
6483
|
.Subhead-heading--danger {
|
|
6878
6484
|
font-weight: var(--base-text-weight-semibold);
|
|
6879
6485
|
color: var(--fgColor-danger);
|
|
6880
6486
|
}
|
|
6881
6487
|
|
|
6882
6488
|
/* One-liner of supporting text */
|
|
6883
|
-
|
|
6884
6489
|
.Subhead-description {
|
|
6885
6490
|
font-size: var(--text-body-size-medium);
|
|
6886
6491
|
color: var(--fgColor-muted);
|
|
@@ -6889,18 +6494,15 @@ select-panel dialog::backdrop {
|
|
|
6889
6494
|
}
|
|
6890
6495
|
|
|
6891
6496
|
/* Add 1 or 2 buttons to the right of the heading */
|
|
6892
|
-
|
|
6893
6497
|
.Subhead-actions {
|
|
6894
6498
|
margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
|
|
6895
6499
|
align-self: center;
|
|
6896
6500
|
justify-content: flex-end;
|
|
6897
6501
|
order: 1;
|
|
6898
6502
|
}
|
|
6899
|
-
|
|
6900
6503
|
.Subhead-actions + .Subhead-description {
|
|
6901
6504
|
margin-top: var(--base-size-4);
|
|
6902
6505
|
}
|
|
6903
|
-
|
|
6904
6506
|
/* Truncate */
|
|
6905
6507
|
|
|
6906
6508
|
.Truncate {
|
|
@@ -6918,7 +6520,6 @@ select-panel dialog::backdrop {
|
|
|
6918
6520
|
}
|
|
6919
6521
|
|
|
6920
6522
|
:is(.Truncate > .Truncate-text) + .Truncate-text {
|
|
6921
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6922
6523
|
margin-left: var(--control-small-gap);
|
|
6923
6524
|
}
|
|
6924
6525
|
|
|
@@ -6933,15 +6534,12 @@ select-panel dialog::backdrop {
|
|
|
6933
6534
|
}
|
|
6934
6535
|
|
|
6935
6536
|
/* to be renamed */
|
|
6936
|
-
|
|
6937
6537
|
/* TimelineItem */
|
|
6938
6538
|
|
|
6939
6539
|
.TimelineItem {
|
|
6940
6540
|
position: relative;
|
|
6941
6541
|
display: flex;
|
|
6942
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6943
6542
|
padding: var(--stack-padding-normal) 0;
|
|
6944
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6945
6543
|
margin-left: var(--stack-gap-normal);
|
|
6946
6544
|
|
|
6947
6545
|
/* The Timeline */
|
|
@@ -6971,7 +6569,6 @@ select-panel dialog::backdrop {
|
|
|
6971
6569
|
display: flex;
|
|
6972
6570
|
width: var(--control-medium-size);
|
|
6973
6571
|
height: var(--control-medium-size);
|
|
6974
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6975
6572
|
margin-right: var(--controlStack-medium-gap-condensed);
|
|
6976
6573
|
/* stylelint-disable-next-line primer/spacing */
|
|
6977
6574
|
margin-left: calc(var(--control-medium-size) / -2 + 1px);
|
|
@@ -7012,7 +6609,6 @@ select-panel dialog::backdrop {
|
|
|
7012
6609
|
z-index: 1;
|
|
7013
6610
|
height: var(--stack-gap-spacious);
|
|
7014
6611
|
margin: 0;
|
|
7015
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7016
6612
|
margin-bottom: calc(var(--stack-gap-normal) * -1);
|
|
7017
6613
|
/* stylelint-disable-next-line primer/spacing */
|
|
7018
6614
|
margin-left: -56px;
|
|
@@ -7029,7 +6625,6 @@ select-panel dialog::backdrop {
|
|
|
7029
6625
|
}
|
|
7030
6626
|
|
|
7031
6627
|
.TimelineItem--condensed:last-child {
|
|
7032
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7033
6628
|
padding-bottom: var(--stack-gap-normal);
|
|
7034
6629
|
}
|
|
7035
6630
|
|
|
@@ -7041,7 +6636,6 @@ select-panel dialog::backdrop {
|
|
|
7041
6636
|
background-color: var(--bgColor-default);
|
|
7042
6637
|
border: 0;
|
|
7043
6638
|
}
|
|
7044
|
-
|
|
7045
6639
|
/* CSS truncate */
|
|
7046
6640
|
|
|
7047
6641
|
/* css-truncate will shorten text with an ellipsis. */
|
|
@@ -7065,9 +6659,7 @@ select-panel dialog::backdrop {
|
|
|
7065
6659
|
.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,.css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,.css-truncate.expandable:hover .css-truncate-target,.css-truncate.expandable.css-truncate-target:hover {
|
|
7066
6660
|
max-width: 10000px !important;
|
|
7067
6661
|
}
|
|
7068
|
-
|
|
7069
6662
|
/* CSS for ActionBar */
|
|
7070
|
-
|
|
7071
6663
|
.ActionBar {
|
|
7072
6664
|
position: relative;
|
|
7073
6665
|
display: flex !important;
|
|
@@ -7110,26 +6702,21 @@ select-panel dialog::backdrop {
|
|
|
7110
6702
|
bottom: 50%;
|
|
7111
6703
|
float: left;
|
|
7112
6704
|
height: calc(var(--control-medium-size) / 2);
|
|
7113
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7114
6705
|
margin: 0 var(--controlStack-medium-gap-condensed);
|
|
7115
6706
|
border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
|
|
7116
6707
|
transform: translateY(-50%);
|
|
7117
6708
|
}
|
|
7118
6709
|
|
|
7119
6710
|
.ActionBar--small .ActionBar-divider {
|
|
7120
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7121
6711
|
margin: 0 var(--controlStack-small-gap-condensed);
|
|
7122
6712
|
}
|
|
7123
6713
|
|
|
7124
6714
|
.ActionBar--large .ActionBar-divider {
|
|
7125
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7126
6715
|
margin: 0 var(--controlStack-large-gap-condensed);
|
|
7127
6716
|
}
|
|
7128
6717
|
|
|
7129
6718
|
/* OP specifics */
|
|
7130
|
-
|
|
7131
6719
|
/* stylelint-disable selector-max-type, selector-max-specificity */
|
|
7132
|
-
|
|
7133
6720
|
/* Type selectors are required for the avatar-fallback custom element wrapper.
|
|
7134
6721
|
Specificity overrides are needed to properly style nested avatar stacking. */
|
|
7135
6722
|
|
|
@@ -7168,7 +6755,6 @@ select-panel dialog::backdrop {
|
|
|
7168
6755
|
display: contents;
|
|
7169
6756
|
opacity: 1;
|
|
7170
6757
|
}
|
|
7171
|
-
|
|
7172
6758
|
/* OP PageHeader */
|
|
7173
6759
|
|
|
7174
6760
|
.PageHeader {
|
|
@@ -7212,13 +6798,13 @@ select-panel dialog::backdrop {
|
|
|
7212
6798
|
}
|
|
7213
6799
|
|
|
7214
6800
|
/* One-liner of supporting text */
|
|
7215
|
-
|
|
7216
6801
|
.PageHeader-description {
|
|
7217
6802
|
font-size: var(--text-body-size-medium);
|
|
7218
6803
|
color: var(--fgColor-muted);
|
|
7219
6804
|
flex: 1 auto;
|
|
7220
6805
|
}
|
|
7221
6806
|
|
|
6807
|
+
/* stylelint-disable-next-line selector-max-type -- description holds rich text; links can only be targeted by the `a` type selector */
|
|
7222
6808
|
.PageHeader-description--underlined-links a {
|
|
7223
6809
|
/* Ensure the accessibility is met, given that the description is written in light grey */
|
|
7224
6810
|
-webkit-text-decoration: underline;
|
|
@@ -7245,7 +6831,6 @@ select-panel dialog::backdrop {
|
|
|
7245
6831
|
}
|
|
7246
6832
|
|
|
7247
6833
|
/* OpenProject legacy form markup inside header actions: match Primer / dark theme */
|
|
7248
|
-
|
|
7249
6834
|
.PageHeader-actions .form--label {
|
|
7250
6835
|
color: var(--fgColor-muted);
|
|
7251
6836
|
min-width: 0;
|
|
@@ -7291,7 +6876,6 @@ select-panel dialog::backdrop {
|
|
|
7291
6876
|
}
|
|
7292
6877
|
|
|
7293
6878
|
/* Hide the context bar on desktop when no breadcrumb is visible */
|
|
7294
|
-
|
|
7295
6879
|
@media screen and (min-width: 543.98px) {
|
|
7296
6880
|
.PageHeader--noBreadcrumb .PageHeader-contextBar {
|
|
7297
6881
|
display: none;
|
|
@@ -7299,47 +6883,46 @@ select-panel dialog::backdrop {
|
|
|
7299
6883
|
}
|
|
7300
6884
|
|
|
7301
6885
|
/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
|
|
7302
|
-
|
|
7303
6886
|
.PageHeader--noBreadcrumb .PageHeader-titleBar {
|
|
6887
|
+
/* stylelint-disable-next-line primer/typography -- control size var intentionally matches the toggle-menu button height for vertical alignment */
|
|
7304
6888
|
line-height: var(--control-small-size);
|
|
7305
6889
|
}
|
|
7306
|
-
|
|
7307
6890
|
.PageHeader--noBreadcrumb .PageHeader-actions {
|
|
7308
6891
|
height: var(--control-small-size);
|
|
7309
6892
|
}
|
|
7310
|
-
|
|
7311
6893
|
/* CSS for DragHandle */
|
|
7312
6894
|
|
|
7313
6895
|
.DragHandle {
|
|
7314
6896
|
cursor: move;
|
|
7315
6897
|
color: var(--fgColor-muted);
|
|
7316
6898
|
}
|
|
7317
|
-
|
|
7318
6899
|
/* CSS for BorderGrid */
|
|
7319
6900
|
|
|
7320
6901
|
.BorderGrid {
|
|
7321
6902
|
display: table;
|
|
7322
6903
|
width: 100%;
|
|
7323
|
-
margin-top: -
|
|
7324
|
-
margin-bottom: -
|
|
6904
|
+
margin-top: calc(-1 * var(--base-size-16));
|
|
6905
|
+
margin-bottom: calc(-1 * var(--base-size-16));
|
|
7325
6906
|
table-layout: fixed;
|
|
6907
|
+
/* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */
|
|
7326
6908
|
border-collapse: collapse;
|
|
6909
|
+
/* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */
|
|
7327
6910
|
border-style: hidden
|
|
7328
6911
|
}
|
|
7329
6912
|
|
|
7330
6913
|
.BorderGrid .BorderGrid-cell {
|
|
7331
|
-
padding-top:
|
|
7332
|
-
padding-bottom:
|
|
6914
|
+
padding-top: var(--base-size-16);
|
|
6915
|
+
padding-bottom: var(--base-size-16)
|
|
7333
6916
|
}
|
|
7334
6917
|
|
|
7335
6918
|
.BorderGrid--spacious {
|
|
7336
|
-
margin-top: -
|
|
7337
|
-
margin-bottom: -
|
|
6919
|
+
margin-top: calc(-1 * var(--base-size-24));
|
|
6920
|
+
margin-bottom: calc(-1 * var(--base-size-24))
|
|
7338
6921
|
}
|
|
7339
6922
|
|
|
7340
6923
|
.BorderGrid--spacious .BorderGrid-cell {
|
|
7341
|
-
padding-top:
|
|
7342
|
-
padding-bottom:
|
|
6924
|
+
padding-top: var(--base-size-24);
|
|
6925
|
+
padding-bottom: var(--base-size-24)
|
|
7343
6926
|
}
|
|
7344
6927
|
|
|
7345
6928
|
.BorderGrid-row {
|
|
@@ -7348,37 +6931,29 @@ select-panel dialog::backdrop {
|
|
|
7348
6931
|
|
|
7349
6932
|
.BorderGrid-cell {
|
|
7350
6933
|
display: table-cell;
|
|
7351
|
-
border:
|
|
6934
|
+
border: var(--borderWidth-thin) solid var(--borderColor-muted)
|
|
7352
6935
|
}
|
|
7353
|
-
|
|
7354
6936
|
.InputGroup.InputGroup-input-width--auto {
|
|
7355
6937
|
width: auto;
|
|
7356
6938
|
}
|
|
7357
|
-
|
|
7358
6939
|
.InputGroup.InputGroup-input-width--xsmall {
|
|
7359
6940
|
max-width: min(144px, 100vw - 2rem);
|
|
7360
6941
|
}
|
|
7361
|
-
|
|
7362
6942
|
.InputGroup.InputGroup-input-width--small {
|
|
7363
6943
|
max-width: min(256px, 100vw - 2rem);
|
|
7364
6944
|
}
|
|
7365
|
-
|
|
7366
6945
|
.InputGroup.InputGroup-input-width--medium {
|
|
7367
6946
|
max-width: min(320px, 100vw - 2rem);
|
|
7368
6947
|
}
|
|
7369
|
-
|
|
7370
6948
|
.InputGroup.InputGroup-input-width--large {
|
|
7371
6949
|
max-width: min(480px, 100vw - 2rem);
|
|
7372
6950
|
}
|
|
7373
|
-
|
|
7374
6951
|
.InputGroup.InputGroup-input-width--xlarge {
|
|
7375
6952
|
max-width: min(680px, 100vw - 2rem);
|
|
7376
6953
|
}
|
|
7377
|
-
|
|
7378
6954
|
.InputGroup.InputGroup-input-width--xxlarge {
|
|
7379
6955
|
max-width: min(960px, 100vw - 2rem);
|
|
7380
6956
|
}
|
|
7381
|
-
|
|
7382
6957
|
.InlineMessage {
|
|
7383
6958
|
display: grid;
|
|
7384
6959
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -7391,29 +6966,23 @@ select-panel dialog::backdrop {
|
|
|
7391
6966
|
grid-template-columns: auto 1fr;
|
|
7392
6967
|
align-items: start;
|
|
7393
6968
|
}
|
|
7394
|
-
|
|
7395
6969
|
.InlineMessage[data-size='small'] {
|
|
7396
6970
|
--inline-message-fontSize: var(--text-body-size-small);
|
|
7397
6971
|
--inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
|
|
7398
6972
|
}
|
|
7399
|
-
|
|
7400
6973
|
.InlineMessage[data-size='medium'] {
|
|
7401
6974
|
--inline-message-fontSize: var(--text-body-size-medium);
|
|
7402
6975
|
--inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
|
|
7403
6976
|
}
|
|
7404
|
-
|
|
7405
6977
|
.InlineMessage[data-variant='warning'] {
|
|
7406
6978
|
--inline-message-fgColor: var(--fgColor-attention);
|
|
7407
6979
|
}
|
|
7408
|
-
|
|
7409
6980
|
.InlineMessage[data-variant='critical'] {
|
|
7410
6981
|
--inline-message-fgColor: var(--fgColor-danger);
|
|
7411
6982
|
}
|
|
7412
|
-
|
|
7413
6983
|
.InlineMessage[data-variant='success'] {
|
|
7414
6984
|
--inline-message-fgColor: var(--fgColor-success);
|
|
7415
6985
|
}
|
|
7416
|
-
|
|
7417
6986
|
.InlineMessage[data-variant='unavailable'] {
|
|
7418
6987
|
--inline-message-fgColor: var(--fgColor-muted);
|
|
7419
6988
|
}
|
|
@@ -7421,7 +6990,6 @@ select-panel dialog::backdrop {
|
|
|
7421
6990
|
.InlineMessageIcon {
|
|
7422
6991
|
min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
|
|
7423
6992
|
}
|
|
7424
|
-
|
|
7425
6993
|
/* CSS for SubHeader */
|
|
7426
6994
|
|
|
7427
6995
|
.SubHeader {
|
|
@@ -7510,18 +7078,17 @@ select-panel dialog::backdrop {
|
|
|
7510
7078
|
margin-top: var(--base-size-16);
|
|
7511
7079
|
}
|
|
7512
7080
|
}
|
|
7513
|
-
|
|
7514
7081
|
/* CSS for OpenProject::SidePanel::Section */
|
|
7515
7082
|
|
|
7516
7083
|
.SidePanel-sectionHeader {
|
|
7517
7084
|
display: flex;
|
|
7518
7085
|
align-items: center;
|
|
7519
7086
|
height: 32px;
|
|
7520
|
-
margin-bottom:
|
|
7087
|
+
margin-bottom: var(--base-size-8);
|
|
7521
7088
|
}
|
|
7522
7089
|
|
|
7523
7090
|
.SidePanel-sectionCounter {
|
|
7524
|
-
margin-left:
|
|
7091
|
+
margin-left: var(--base-size-8);
|
|
7525
7092
|
}
|
|
7526
7093
|
|
|
7527
7094
|
.SidePanel-sectionAction {
|
|
@@ -7536,11 +7103,12 @@ select-panel dialog::backdrop {
|
|
|
7536
7103
|
}
|
|
7537
7104
|
|
|
7538
7105
|
:is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child) {
|
|
7539
|
-
margin-bottom:
|
|
7106
|
+
margin-bottom: var(--base-size-16);
|
|
7540
7107
|
}
|
|
7541
|
-
|
|
7542
7108
|
/* CSS for BorderBox::CollapsibleHeader */
|
|
7543
7109
|
|
|
7110
|
+
/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
|
|
7111
|
+
|
|
7544
7112
|
.CollapsibleHeader {
|
|
7545
7113
|
display: block;
|
|
7546
7114
|
container-name: collapsible-header-container;
|
|
@@ -7599,7 +7167,7 @@ select-panel dialog::backdrop {
|
|
|
7599
7167
|
|
|
7600
7168
|
.CollapsibleHeader--multi-line .CollapsibleHeader-description {
|
|
7601
7169
|
overflow: visible;
|
|
7602
|
-
text-overflow:
|
|
7170
|
+
text-overflow: clip;
|
|
7603
7171
|
white-space: normal;
|
|
7604
7172
|
width: 100%;
|
|
7605
7173
|
}
|
|
@@ -7622,12 +7190,12 @@ select-panel dialog::backdrop {
|
|
|
7622
7190
|
-webkit-user-select: text;
|
|
7623
7191
|
user-select: text;
|
|
7624
7192
|
}
|
|
7625
|
-
|
|
7626
7193
|
/* CSS for CollapsibleSection */
|
|
7627
7194
|
|
|
7628
7195
|
.CollapsibleSection--triggerArea {
|
|
7629
7196
|
cursor: pointer;
|
|
7630
7197
|
}
|
|
7198
|
+
/* stylelint-disable selector-max-type -- pagination arrows are styled via `.Page[rel] > svg`; the svg icon can only be targeted by its type selector */
|
|
7631
7199
|
|
|
7632
7200
|
.Page {
|
|
7633
7201
|
min-width: var(--base-size-32);
|
|
@@ -7638,7 +7206,7 @@ select-panel dialog::backdrop {
|
|
|
7638
7206
|
white-space: nowrap;
|
|
7639
7207
|
vertical-align: middle;
|
|
7640
7208
|
cursor: pointer;
|
|
7641
|
-
border-radius: var(--borderRadius-medium
|
|
7209
|
+
border-radius: var(--borderRadius-medium);
|
|
7642
7210
|
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
7643
7211
|
display: inline-flex;
|
|
7644
7212
|
align-items: center;
|
|
@@ -7694,6 +7262,7 @@ select-panel dialog::backdrop {
|
|
|
7694
7262
|
|
|
7695
7263
|
.Page[aria-current]:focus-visible {
|
|
7696
7264
|
outline: 2px solid var(--bgColor-accent-emphasis);
|
|
7265
|
+
/* stylelint-disable-next-line primer/box-shadow -- custom focus-ring built from Primer size/color primitives; no single Primer box-shadow token matches */
|
|
7697
7266
|
box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
|
|
7698
7267
|
}
|
|
7699
7268
|
|
|
@@ -7716,7 +7285,6 @@ select-panel dialog::backdrop {
|
|
|
7716
7285
|
display: none;
|
|
7717
7286
|
}
|
|
7718
7287
|
}
|
|
7719
|
-
|
|
7720
7288
|
/* CSS for FilterableTreeView */
|
|
7721
7289
|
|
|
7722
7290
|
/* Scroll layout
|
|
@@ -7729,7 +7297,6 @@ select-panel dialog::backdrop {
|
|
|
7729
7297
|
*/
|
|
7730
7298
|
|
|
7731
7299
|
/* stylelint-disable-next-line selector-max-type */
|
|
7732
|
-
|
|
7733
7300
|
filterable-tree-view {
|
|
7734
7301
|
display: flex;
|
|
7735
7302
|
flex-direction: column;
|
|
@@ -7749,30 +7316,26 @@ filterable-tree-view {
|
|
|
7749
7316
|
}
|
|
7750
7317
|
|
|
7751
7318
|
/* Highlight style for CSS Custom Highlight API */
|
|
7752
|
-
|
|
7753
7319
|
::highlight(primer-filterable-tree-view-search-results) {
|
|
7320
|
+
/* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
|
|
7754
7321
|
background-color: var(--display-yellow-scale-2);
|
|
7755
7322
|
}
|
|
7756
7323
|
|
|
7757
7324
|
/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
|
|
7758
|
-
|
|
7759
7325
|
/* stylelint-disable-next-line selector-max-type */
|
|
7760
|
-
|
|
7761
7326
|
filterable-tree-view mark {
|
|
7327
|
+
/* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
|
|
7762
7328
|
background-color: var(--display-yellow-scale-2);
|
|
7763
7329
|
color: inherit;
|
|
7764
7330
|
}
|
|
7765
7331
|
|
|
7766
7332
|
/* Loading skeleton */
|
|
7767
|
-
|
|
7768
7333
|
.FilterableTreeViewLoadingSkeleton {
|
|
7769
7334
|
display: none;
|
|
7770
7335
|
}
|
|
7771
7336
|
|
|
7772
7337
|
/* stylelint-disable selector-no-qualifying-type */
|
|
7773
|
-
|
|
7774
7338
|
/* stylelint-disable selector-max-type */
|
|
7775
|
-
|
|
7776
7339
|
filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
|
|
7777
7340
|
display: block;
|
|
7778
7341
|
}
|