@mixtint/primer-view-components 0.89.2 → 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 +206 -646
- 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 +63 -0
- 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.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/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 +31 -11
- 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 +26 -0
- package/static/previews.json +2404 -2378
|
@@ -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,7 +1079,6 @@ 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;
|
|
@@ -1215,7 +1112,6 @@ dialog.Overlay:not([open]) {
|
|
|
1215
1112
|
* A FOUC occurs in browsers which do not support :popover-open.
|
|
1216
1113
|
* We can try to hide the popover if :popover-open is not supported.
|
|
1217
1114
|
*/
|
|
1218
|
-
|
|
1219
1115
|
@supports not selector(:popover-open) {
|
|
1220
1116
|
[popover]:not(.\:popover-open) {
|
|
1221
1117
|
display: none;
|
|
@@ -1384,7 +1280,6 @@ dialog.Overlay:not([open]) {
|
|
|
1384
1280
|
}
|
|
1385
1281
|
|
|
1386
1282
|
/* for <form> element that wraps entire contents of overlay */
|
|
1387
|
-
|
|
1388
1283
|
.Overlay-form {
|
|
1389
1284
|
display: flex;
|
|
1390
1285
|
overflow: auto;
|
|
@@ -1457,7 +1352,6 @@ dialog.Overlay:not([open]) {
|
|
|
1457
1352
|
}
|
|
1458
1353
|
|
|
1459
1354
|
/* generic body content slot */
|
|
1460
|
-
|
|
1461
1355
|
.Overlay-body {
|
|
1462
1356
|
padding: var(--stack-padding-normal);
|
|
1463
1357
|
overflow-y: auto;
|
|
@@ -1465,18 +1359,15 @@ dialog.Overlay:not([open]) {
|
|
|
1465
1359
|
font-size: var(--text-body-size-medium);
|
|
1466
1360
|
flex-grow: 1;
|
|
1467
1361
|
}
|
|
1468
|
-
|
|
1469
1362
|
.Overlay-body.Overlay-body--paddingCondensed {
|
|
1470
1363
|
padding: var(--stack-padding-condensed);
|
|
1471
1364
|
padding-top: 0;
|
|
1472
1365
|
}
|
|
1473
|
-
|
|
1474
1366
|
.Overlay-body.Overlay-body--paddingNone {
|
|
1475
1367
|
padding: 0;
|
|
1476
1368
|
}
|
|
1477
1369
|
|
|
1478
1370
|
/* generic footer slot */
|
|
1479
|
-
|
|
1480
1371
|
.Overlay-footer {
|
|
1481
1372
|
z-index: 1;
|
|
1482
1373
|
display: flex;
|
|
@@ -1485,30 +1376,25 @@ dialog.Overlay:not([open]) {
|
|
|
1485
1376
|
flex-shrink: 0;
|
|
1486
1377
|
flex-wrap: wrap;
|
|
1487
1378
|
}
|
|
1488
|
-
|
|
1489
1379
|
.Overlay-footer.Overlay-footer--divided {
|
|
1490
1380
|
padding-top: var(--stack-padding-normal);
|
|
1491
1381
|
/* stylelint-disable-next-line primer/box-shadow */
|
|
1492
1382
|
box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
|
|
1493
1383
|
}
|
|
1494
|
-
|
|
1495
1384
|
.Overlay-footer.Overlay-footer--alignStart {
|
|
1496
1385
|
justify-content: flex-start;
|
|
1497
1386
|
gap: var(--stack-gap-condensed);
|
|
1498
1387
|
}
|
|
1499
|
-
|
|
1500
1388
|
.Overlay-footer.Overlay-footer--alignCenter {
|
|
1501
1389
|
justify-content: center;
|
|
1502
1390
|
gap: var(--stack-gap-condensed);
|
|
1503
1391
|
}
|
|
1504
|
-
|
|
1505
1392
|
.Overlay-footer.Overlay-footer--alignEnd {
|
|
1506
1393
|
justify-content: flex-end;
|
|
1507
1394
|
gap: var(--stack-gap-condensed);
|
|
1508
1395
|
}
|
|
1509
1396
|
|
|
1510
1397
|
/* TODO: replace with refactored IconButton */
|
|
1511
|
-
|
|
1512
1398
|
.Overlay-closeButton {
|
|
1513
1399
|
position: relative;
|
|
1514
1400
|
display: grid;
|
|
@@ -1528,15 +1414,12 @@ dialog.Overlay:not([open]) {
|
|
|
1528
1414
|
align-self: flex-start;
|
|
1529
1415
|
flex-shrink: 0;
|
|
1530
1416
|
}
|
|
1531
|
-
|
|
1532
1417
|
.Overlay-closeButton:hover,.Overlay-closeButton:focus {
|
|
1533
1418
|
background-color: var(--button-default-bgColor-hover);
|
|
1534
1419
|
/* stylelint-disable-next-line primer/colors */
|
|
1535
1420
|
border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
|
|
1536
1421
|
}
|
|
1537
|
-
|
|
1538
1422
|
/* Override .close-button's `border: 0` that triggers a border-color transition on hover */
|
|
1539
|
-
|
|
1540
1423
|
.Overlay-closeButton.close-button {
|
|
1541
1424
|
border: var(--borderWidth-thin) solid transparent;
|
|
1542
1425
|
}
|
|
@@ -1546,7 +1429,6 @@ dialog.Overlay:not([open]) {
|
|
|
1546
1429
|
/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
|
|
1547
1430
|
|
|
1548
1431
|
/* full width */
|
|
1549
|
-
|
|
1550
1432
|
.Overlay--full {
|
|
1551
1433
|
width: 100%;
|
|
1552
1434
|
max-width: 100vw;
|
|
@@ -1559,7 +1441,6 @@ dialog.Overlay:not([open]) {
|
|
|
1559
1441
|
/* responsive variants */
|
|
1560
1442
|
|
|
1561
1443
|
/* --viewportRange-narrowLandscape */
|
|
1562
|
-
|
|
1563
1444
|
@media (max-width: 767px) {
|
|
1564
1445
|
.Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
|
|
1565
1446
|
position: fixed;
|
|
@@ -1635,7 +1516,6 @@ dialog.Overlay:not([open]) {
|
|
|
1635
1516
|
transform: translateX(100%);
|
|
1636
1517
|
}
|
|
1637
1518
|
}
|
|
1638
|
-
|
|
1639
1519
|
/* dropdown */
|
|
1640
1520
|
|
|
1641
1521
|
.dropdown {
|
|
@@ -1715,7 +1595,6 @@ dialog.Overlay:not([open]) {
|
|
|
1715
1595
|
}
|
|
1716
1596
|
|
|
1717
1597
|
/* Dropdown items (can be links or buttons) */
|
|
1718
|
-
|
|
1719
1598
|
.dropdown-item {
|
|
1720
1599
|
display: block;
|
|
1721
1600
|
padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
|
|
@@ -1724,28 +1603,23 @@ dialog.Overlay:not([open]) {
|
|
|
1724
1603
|
text-overflow: ellipsis;
|
|
1725
1604
|
white-space: nowrap;
|
|
1726
1605
|
}
|
|
1727
|
-
|
|
1728
1606
|
.dropdown-item:hover {
|
|
1729
1607
|
color: var(--fgColor-onEmphasis);
|
|
1730
1608
|
-webkit-text-decoration: none;
|
|
1731
1609
|
text-decoration: none;
|
|
1732
1610
|
background-color: var(--bgColor-accent-emphasis);
|
|
1733
1611
|
}
|
|
1734
|
-
|
|
1735
1612
|
.dropdown-item:hover > .octicon {
|
|
1736
1613
|
color: inherit;
|
|
1737
1614
|
opacity: 1;
|
|
1738
1615
|
}
|
|
1739
|
-
|
|
1740
1616
|
.dropdown-item:hover [class*='color-fg-'] {
|
|
1741
1617
|
color: inherit !important;
|
|
1742
1618
|
}
|
|
1743
|
-
|
|
1744
1619
|
.dropdown-item:hover > .Label {
|
|
1745
1620
|
color: inherit !important;
|
|
1746
1621
|
border-color: currentcolor;
|
|
1747
1622
|
}
|
|
1748
|
-
|
|
1749
1623
|
.dropdown-item.btn-link {
|
|
1750
1624
|
width: 100%;
|
|
1751
1625
|
text-align: left;
|
|
@@ -1928,9 +1802,10 @@ dialog.Overlay:not([open]) {
|
|
|
1928
1802
|
/* stylelint-disable-next-line primer/spacing */
|
|
1929
1803
|
left: calc(var(--base-size-8) + var(--borderWidth-thin));
|
|
1930
1804
|
}
|
|
1931
|
-
|
|
1932
1805
|
/* Layout */
|
|
1933
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
|
+
|
|
1934
1809
|
.Layout {
|
|
1935
1810
|
display: grid;
|
|
1936
1811
|
|
|
@@ -2124,7 +1999,7 @@ dialog.Overlay:not([open]) {
|
|
|
2124
1999
|
|
|
2125
2000
|
grid-auto-flow: column;
|
|
2126
2001
|
grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
|
|
2127
|
-
|
|
2002
|
+
gap: var(--Layout-gutter);
|
|
2128
2003
|
}
|
|
2129
2004
|
|
|
2130
2005
|
.Layout .Layout-sidebar {
|
|
@@ -2303,13 +2178,11 @@ dialog.Overlay:not([open]) {
|
|
|
2303
2178
|
.Layout-main .Layout-main-centered-xl {
|
|
2304
2179
|
max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
|
2305
2180
|
}
|
|
2306
|
-
|
|
2307
2181
|
/* menu */
|
|
2308
2182
|
|
|
2309
2183
|
/* A menu on the side of a page, defaults to left side. e.g. github.com/about */
|
|
2310
2184
|
|
|
2311
2185
|
.menu {
|
|
2312
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2313
2186
|
margin-bottom: var(--stack-gap-normal);
|
|
2314
2187
|
list-style: none;
|
|
2315
2188
|
background-color: var(--bgColor-default);
|
|
@@ -2320,7 +2193,6 @@ dialog.Overlay:not([open]) {
|
|
|
2320
2193
|
.menu-item {
|
|
2321
2194
|
position: relative;
|
|
2322
2195
|
display: block;
|
|
2323
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2324
2196
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
2325
2197
|
color: var(--fgColor-default);
|
|
2326
2198
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
@@ -2374,7 +2246,6 @@ dialog.Overlay:not([open]) {
|
|
|
2374
2246
|
|
|
2375
2247
|
.menu-item .octicon {
|
|
2376
2248
|
width: 16px;
|
|
2377
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2378
2249
|
margin-right: var(--control-medium-gap);
|
|
2379
2250
|
color: var(--fgColor-muted);
|
|
2380
2251
|
text-align: center;
|
|
@@ -2382,7 +2253,6 @@ dialog.Overlay:not([open]) {
|
|
|
2382
2253
|
|
|
2383
2254
|
.menu-item .Counter {
|
|
2384
2255
|
float: right;
|
|
2385
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2386
2256
|
margin-left: var(--control-small-gap);
|
|
2387
2257
|
}
|
|
2388
2258
|
|
|
@@ -2393,7 +2263,6 @@ dialog.Overlay:not([open]) {
|
|
|
2393
2263
|
|
|
2394
2264
|
.menu-item .avatar {
|
|
2395
2265
|
float: left;
|
|
2396
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2397
2266
|
margin-right: var(--control-small-gap);
|
|
2398
2267
|
}
|
|
2399
2268
|
|
|
@@ -2403,7 +2272,6 @@ dialog.Overlay:not([open]) {
|
|
|
2403
2272
|
|
|
2404
2273
|
.menu-heading {
|
|
2405
2274
|
display: block;
|
|
2406
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2407
2275
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
2408
2276
|
margin-top: 0;
|
|
2409
2277
|
margin-bottom: 0;
|
|
@@ -2428,7 +2296,6 @@ dialog.Overlay:not([open]) {
|
|
|
2428
2296
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
2429
2297
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
2430
2298
|
}
|
|
2431
|
-
|
|
2432
2299
|
/* SegmentedControl */
|
|
2433
2300
|
|
|
2434
2301
|
.SegmentedControl {
|
|
@@ -2535,9 +2402,7 @@ dialog.Overlay:not([open]) {
|
|
|
2535
2402
|
.SegmentedControl-item:not(:first-child)::before {
|
|
2536
2403
|
position: absolute;
|
|
2537
2404
|
inset: 0 0 0 -1px;
|
|
2538
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2539
2405
|
margin-top: var(--control-medium-paddingBlock);
|
|
2540
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2541
2406
|
margin-bottom: var(--control-medium-paddingBlock);
|
|
2542
2407
|
content: '';
|
|
2543
2408
|
border-left: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
@@ -2581,16 +2446,13 @@ dialog.Overlay:not([open]) {
|
|
|
2581
2446
|
}
|
|
2582
2447
|
|
|
2583
2448
|
/* fullWidth */
|
|
2584
|
-
|
|
2585
2449
|
.SegmentedControl--fullWidth {
|
|
2586
2450
|
display: flex;
|
|
2587
2451
|
}
|
|
2588
|
-
|
|
2589
2452
|
.SegmentedControl--fullWidth .SegmentedControl-item {
|
|
2590
2453
|
flex: 1;
|
|
2591
2454
|
justify-content: center;
|
|
2592
2455
|
}
|
|
2593
|
-
|
|
2594
2456
|
.SelectPanel-loadingPanel {
|
|
2595
2457
|
min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
|
|
2596
2458
|
}
|
|
@@ -2601,7 +2463,6 @@ dialog.Overlay:not([open]) {
|
|
|
2601
2463
|
display: flex;
|
|
2602
2464
|
justify-content: center;
|
|
2603
2465
|
}
|
|
2604
|
-
|
|
2605
2466
|
.Stack {
|
|
2606
2467
|
display: flex;
|
|
2607
2468
|
flex-flow: column;
|
|
@@ -2611,100 +2472,76 @@ dialog.Overlay:not([open]) {
|
|
|
2611
2472
|
|
|
2612
2473
|
/* non-responsive values */
|
|
2613
2474
|
}
|
|
2614
|
-
|
|
2615
2475
|
.Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
|
|
2616
2476
|
padding: 0;
|
|
2617
2477
|
}
|
|
2618
|
-
|
|
2619
2478
|
.Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
|
|
2620
2479
|
/* stylelint-disable-next-line primer/spacing */
|
|
2621
2480
|
padding: var(--stack-padding-condensed, 8px);
|
|
2622
2481
|
}
|
|
2623
|
-
|
|
2624
2482
|
.Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
|
|
2625
2483
|
/* stylelint-disable-next-line primer/spacing */
|
|
2626
2484
|
padding: var(--stack-padding-normal, 16px);
|
|
2627
2485
|
}
|
|
2628
|
-
|
|
2629
2486
|
.Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
|
|
2630
2487
|
/* stylelint-disable-next-line primer/spacing */
|
|
2631
2488
|
padding: var(--stack-padding-spacious, 24px);
|
|
2632
2489
|
}
|
|
2633
|
-
|
|
2634
2490
|
.Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
|
|
2635
2491
|
flex-flow: row;
|
|
2636
2492
|
}
|
|
2637
|
-
|
|
2638
2493
|
.Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
|
|
2639
2494
|
flex-flow: column;
|
|
2640
2495
|
}
|
|
2641
|
-
|
|
2642
2496
|
.Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
|
|
2643
2497
|
--stack-gap: var(--stack-gap-none, 0);
|
|
2644
2498
|
}
|
|
2645
|
-
|
|
2646
2499
|
.Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
|
|
2647
2500
|
--stack-gap: var(--stack-gap-condensed, 0.5rem);
|
|
2648
2501
|
}
|
|
2649
|
-
|
|
2650
2502
|
.Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
|
|
2651
2503
|
--stack-gap: var(--stack-gap-normal, 1rem);
|
|
2652
2504
|
}
|
|
2653
|
-
|
|
2654
2505
|
.Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
|
|
2655
2506
|
--stack-gap: var(--stack-gap-spacious, 1.5rem);
|
|
2656
2507
|
}
|
|
2657
|
-
|
|
2658
2508
|
.Stack[data-align='start'],.Stack[data-align-narrow='start'] {
|
|
2659
2509
|
align-items: flex-start;
|
|
2660
2510
|
}
|
|
2661
|
-
|
|
2662
2511
|
.Stack[data-align='center'],.Stack[data-align-narrow='center'] {
|
|
2663
2512
|
align-items: center;
|
|
2664
2513
|
}
|
|
2665
|
-
|
|
2666
2514
|
.Stack[data-align='end'],.Stack[data-align-narrow='end'] {
|
|
2667
2515
|
align-items: flex-end;
|
|
2668
2516
|
}
|
|
2669
|
-
|
|
2670
2517
|
.Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
|
|
2671
2518
|
align-items: baseline;
|
|
2672
2519
|
}
|
|
2673
|
-
|
|
2674
2520
|
.Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
|
|
2675
2521
|
justify-content: flex-start;
|
|
2676
2522
|
}
|
|
2677
|
-
|
|
2678
2523
|
.Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
|
|
2679
2524
|
justify-content: center;
|
|
2680
2525
|
}
|
|
2681
|
-
|
|
2682
2526
|
.Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
|
|
2683
2527
|
justify-content: flex-end;
|
|
2684
2528
|
}
|
|
2685
|
-
|
|
2686
2529
|
.Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
|
|
2687
2530
|
justify-content: space-between;
|
|
2688
2531
|
}
|
|
2689
|
-
|
|
2690
2532
|
.Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
|
|
2691
2533
|
justify-content: space-evenly;
|
|
2692
2534
|
}
|
|
2693
|
-
|
|
2694
2535
|
.Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
|
|
2695
2536
|
flex-wrap: wrap;
|
|
2696
2537
|
}
|
|
2697
|
-
|
|
2698
2538
|
.Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
|
|
2699
2539
|
flex-wrap: nowrap;
|
|
2700
2540
|
}
|
|
2701
|
-
|
|
2702
2541
|
.Stack[data-wrap='reverse'],.Stack[data-wrap-narrow='reverse'] {
|
|
2703
2542
|
flex-wrap: wrap-reverse;
|
|
2704
2543
|
}
|
|
2705
|
-
|
|
2706
2544
|
/* @custom-media --veiwportRange-regular */
|
|
2707
|
-
|
|
2708
2545
|
@media (min-width: 48rem) {
|
|
2709
2546
|
.Stack[data-padding-regular='none'] {
|
|
2710
2547
|
padding: 0;
|
|
@@ -2797,9 +2634,7 @@ dialog.Overlay:not([open]) {
|
|
|
2797
2634
|
flex-wrap: wrap-reverse;
|
|
2798
2635
|
}
|
|
2799
2636
|
}
|
|
2800
|
-
|
|
2801
2637
|
/* @custom-media --viewportRange-wide */
|
|
2802
|
-
|
|
2803
2638
|
@media (min-width: 87.5rem) {
|
|
2804
2639
|
.Stack[data-padding-wide='none'] {
|
|
2805
2640
|
padding: 0;
|
|
@@ -2892,18 +2727,14 @@ dialog.Overlay:not([open]) {
|
|
|
2892
2727
|
flex-wrap: wrap-reverse;
|
|
2893
2728
|
}
|
|
2894
2729
|
}
|
|
2895
|
-
|
|
2896
2730
|
.StackItem {
|
|
2897
2731
|
flex: 0 1 auto;
|
|
2898
2732
|
min-inline-size: 0;
|
|
2899
2733
|
}
|
|
2900
|
-
|
|
2901
2734
|
.StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] {
|
|
2902
2735
|
flex-grow: 1;
|
|
2903
2736
|
}
|
|
2904
|
-
|
|
2905
2737
|
/* @custom-media --veiwportRange-regular */
|
|
2906
|
-
|
|
2907
2738
|
@media (min-width: 48rem) {
|
|
2908
2739
|
.StackItem[data-grow-regular='true'] {
|
|
2909
2740
|
flex-grow: 1;
|
|
@@ -2913,9 +2744,7 @@ dialog.Overlay:not([open]) {
|
|
|
2913
2744
|
flex-grow: 0;
|
|
2914
2745
|
}
|
|
2915
2746
|
}
|
|
2916
|
-
|
|
2917
2747
|
/* @custom-media --viewportRange-wide */
|
|
2918
|
-
|
|
2919
2748
|
@media (min-width: 87.5rem) {
|
|
2920
2749
|
.StackItem[data-grow-wide='true'] {
|
|
2921
2750
|
flex-grow: 1;
|
|
@@ -2925,14 +2754,11 @@ dialog.Overlay:not([open]) {
|
|
|
2925
2754
|
flex-grow: 0;
|
|
2926
2755
|
}
|
|
2927
2756
|
}
|
|
2928
|
-
|
|
2929
2757
|
/* tabnav */
|
|
2930
2758
|
|
|
2931
2759
|
/* Outer wrapper */
|
|
2932
|
-
|
|
2933
2760
|
.tabnav {
|
|
2934
2761
|
margin-top: 0;
|
|
2935
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2936
2762
|
margin-bottom: var(--stack-gap-normal);
|
|
2937
2763
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
|
2938
2764
|
}
|
|
@@ -2954,7 +2780,6 @@ dialog.Overlay:not([open]) {
|
|
|
2954
2780
|
.tabnav-tab {
|
|
2955
2781
|
display: inline-block;
|
|
2956
2782
|
flex-shrink: 0;
|
|
2957
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
2958
2783
|
padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
|
|
2959
2784
|
font-size: var(--text-body-size-medium);
|
|
2960
2785
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -2996,13 +2821,11 @@ dialog.Overlay:not([open]) {
|
|
|
2996
2821
|
}
|
|
2997
2822
|
|
|
2998
2823
|
.tabnav-tab .octicon {
|
|
2999
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
3000
2824
|
margin-right: var(--control-small-gap);
|
|
3001
2825
|
color: var(--fgColor-muted);
|
|
3002
2826
|
}
|
|
3003
2827
|
|
|
3004
2828
|
.tabnav-tab .Counter {
|
|
3005
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
3006
2829
|
margin-left: var(--control-small-gap);
|
|
3007
2830
|
color: inherit;
|
|
3008
2831
|
}
|
|
@@ -3027,9 +2850,7 @@ dialog.Overlay:not([open]) {
|
|
|
3027
2850
|
}
|
|
3028
2851
|
|
|
3029
2852
|
/* When tabnav-extra are anchors */
|
|
3030
|
-
|
|
3031
2853
|
/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
|
|
3032
|
-
|
|
3033
2854
|
a.tabnav-extra:hover {
|
|
3034
2855
|
color: var(--fgColor-accent);
|
|
3035
2856
|
-webkit-text-decoration: none;
|
|
@@ -3042,22 +2863,16 @@ a.tabnav-extra:hover {
|
|
|
3042
2863
|
** the buttons to be floated or inline-block. */
|
|
3043
2864
|
|
|
3044
2865
|
.tabnav-btn {
|
|
3045
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
3046
2866
|
margin-left: var(--controlStack-medium-gap-condensed);
|
|
3047
2867
|
}
|
|
3048
|
-
|
|
3049
2868
|
/* stylelint-disable selector-max-type */
|
|
3050
|
-
|
|
3051
2869
|
/* stylelint-disable max-nesting-depth */
|
|
3052
|
-
|
|
3053
2870
|
/* stylelint-disable selector-max-specificity */
|
|
3054
|
-
|
|
3055
2871
|
/* stylelint-disable primer/spacing */
|
|
3056
2872
|
|
|
3057
2873
|
/* FormControl */
|
|
3058
2874
|
|
|
3059
2875
|
/* groups label, field, caption and inline error message */
|
|
3060
|
-
|
|
3061
2876
|
.FormControl {
|
|
3062
2877
|
display: inline-flex;
|
|
3063
2878
|
flex-direction: column;
|
|
@@ -3065,13 +2880,11 @@ a.tabnav-extra:hover {
|
|
|
3065
2880
|
}
|
|
3066
2881
|
|
|
3067
2882
|
/* fill container */
|
|
3068
|
-
|
|
3069
2883
|
.FormControl--fullWidth {
|
|
3070
2884
|
display: flex;
|
|
3071
2885
|
}
|
|
3072
2886
|
|
|
3073
2887
|
/* <label> */
|
|
3074
|
-
|
|
3075
2888
|
.FormControl-label {
|
|
3076
2889
|
font-size: var(--text-body-size-medium);
|
|
3077
2890
|
font-weight: var(--base-text-weight-semibold);
|
|
@@ -3080,7 +2893,6 @@ a.tabnav-extra:hover {
|
|
|
3080
2893
|
}
|
|
3081
2894
|
|
|
3082
2895
|
/* optional caption */
|
|
3083
|
-
|
|
3084
2896
|
.FormControl-caption {
|
|
3085
2897
|
margin-bottom: 0;
|
|
3086
2898
|
font-size: var(--text-caption-size);
|
|
@@ -3095,7 +2907,6 @@ a.tabnav-extra:hover {
|
|
|
3095
2907
|
}
|
|
3096
2908
|
|
|
3097
2909
|
/* inline validation message */
|
|
3098
|
-
|
|
3099
2910
|
.FormControl-inlineValidation {
|
|
3100
2911
|
display: flex;
|
|
3101
2912
|
font-size: var(--text-caption-size);
|
|
@@ -3107,7 +2918,6 @@ a.tabnav-extra:hover {
|
|
|
3107
2918
|
align-items: flex-start;
|
|
3108
2919
|
gap: var(--base-size-4);
|
|
3109
2920
|
}
|
|
3110
|
-
|
|
3111
2921
|
.FormControl-inlineValidation p {
|
|
3112
2922
|
margin-bottom: 0;
|
|
3113
2923
|
}
|
|
@@ -3135,6 +2945,8 @@ a.tabnav-extra:hover {
|
|
|
3135
2945
|
}
|
|
3136
2946
|
|
|
3137
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 */
|
|
3138
2950
|
|
|
3139
2951
|
/* TextInput structure
|
|
3140
2952
|
** ===================
|
|
@@ -3304,42 +3116,35 @@ a.tabnav-extra:hover {
|
|
|
3304
3116
|
}
|
|
3305
3117
|
|
|
3306
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 */
|
|
3307
3121
|
|
|
3308
3122
|
/* positioning for leading/trailing items for TextInput */
|
|
3309
|
-
|
|
3310
3123
|
.FormControl-input-wrap {
|
|
3311
3124
|
position: relative;
|
|
3312
3125
|
display: grid;
|
|
3313
3126
|
}
|
|
3314
|
-
|
|
3315
3127
|
.FormControl-input-wrap.FormControl-input-width--auto {
|
|
3316
3128
|
width: auto;
|
|
3317
3129
|
}
|
|
3318
|
-
|
|
3319
3130
|
.FormControl-input-wrap.FormControl-input-width--xsmall {
|
|
3320
3131
|
max-width: min(144px, 100vw - 2rem);
|
|
3321
3132
|
}
|
|
3322
|
-
|
|
3323
3133
|
.FormControl-input-wrap.FormControl-input-width--small {
|
|
3324
3134
|
max-width: min(256px, 100vw - 2rem);
|
|
3325
3135
|
}
|
|
3326
|
-
|
|
3327
3136
|
.FormControl-input-wrap.FormControl-input-width--medium {
|
|
3328
3137
|
max-width: min(320px, 100vw - 2rem);
|
|
3329
3138
|
}
|
|
3330
|
-
|
|
3331
3139
|
.FormControl-input-wrap.FormControl-input-width--large {
|
|
3332
3140
|
max-width: min(480px, 100vw - 2rem);
|
|
3333
3141
|
}
|
|
3334
|
-
|
|
3335
3142
|
.FormControl-input-wrap.FormControl-input-width--xlarge {
|
|
3336
3143
|
max-width: min(680px, 100vw - 2rem);
|
|
3337
3144
|
}
|
|
3338
|
-
|
|
3339
3145
|
.FormControl-input-wrap.FormControl-input-width--xxlarge {
|
|
3340
3146
|
max-width: min(960px, 100vw - 2rem);
|
|
3341
3147
|
}
|
|
3342
|
-
|
|
3343
3148
|
.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
|
|
3344
3149
|
position: absolute;
|
|
3345
3150
|
top: var(--base-size-8);
|
|
@@ -3352,13 +3157,11 @@ a.tabnav-extra:hover {
|
|
|
3352
3157
|
|
|
3353
3158
|
/* octicon */
|
|
3354
3159
|
}
|
|
3355
|
-
|
|
3356
3160
|
:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual {
|
|
3357
3161
|
display: block;
|
|
3358
3162
|
-webkit-user-select: none;
|
|
3359
3163
|
user-select: none;
|
|
3360
3164
|
}
|
|
3361
|
-
|
|
3362
3165
|
.FormControl-input-wrap .FormControl-input-trailingVisualWrap {
|
|
3363
3166
|
position: absolute;
|
|
3364
3167
|
top: var(--base-size-8);
|
|
@@ -3370,24 +3173,19 @@ a.tabnav-extra:hover {
|
|
|
3370
3173
|
color: var(--fgColor-muted);
|
|
3371
3174
|
pointer-events: none;
|
|
3372
3175
|
}
|
|
3373
|
-
|
|
3374
3176
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText) {
|
|
3375
3177
|
max-width: 25%;
|
|
3376
3178
|
padding-left: var(--base-size-8);
|
|
3377
3179
|
}
|
|
3378
|
-
|
|
3379
3180
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel) {
|
|
3380
3181
|
max-width: 25%;
|
|
3381
3182
|
padding-left: var(--base-size-8);
|
|
3382
3183
|
}
|
|
3383
|
-
|
|
3384
3184
|
:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel {
|
|
3385
3185
|
overflow: hidden;
|
|
3386
3186
|
text-overflow: ellipsis;
|
|
3387
3187
|
}
|
|
3388
|
-
|
|
3389
3188
|
/* TODO: replace with new Button component */
|
|
3390
|
-
|
|
3391
3189
|
.FormControl-input-wrap .FormControl-input-trailingAction {
|
|
3392
3190
|
position: absolute;
|
|
3393
3191
|
top: var(--base-size-4);
|
|
@@ -3407,27 +3205,21 @@ a.tabnav-extra:hover {
|
|
|
3407
3205
|
align-items: center;
|
|
3408
3206
|
justify-content: center;
|
|
3409
3207
|
}
|
|
3410
|
-
|
|
3411
3208
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg {
|
|
3412
3209
|
-webkit-user-select: none;
|
|
3413
3210
|
user-select: none;
|
|
3414
3211
|
}
|
|
3415
|
-
|
|
3416
3212
|
[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction) {
|
|
3417
3213
|
color: var(--control-fgColor-disabled);
|
|
3418
3214
|
pointer-events: none;
|
|
3419
3215
|
}
|
|
3420
|
-
|
|
3421
3216
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover {
|
|
3422
3217
|
background: var(--control-transparent-bgColor-hover);
|
|
3423
3218
|
}
|
|
3424
|
-
|
|
3425
3219
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction):active {
|
|
3426
3220
|
background: var(--control-transparent-bgColor-active);
|
|
3427
3221
|
}
|
|
3428
|
-
|
|
3429
3222
|
/* show vertical divider line between field and button */
|
|
3430
|
-
|
|
3431
3223
|
.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before {
|
|
3432
3224
|
position: absolute;
|
|
3433
3225
|
top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
|
|
@@ -3439,7 +3231,6 @@ a.tabnav-extra:hover {
|
|
|
3439
3231
|
/* stylelint-disable-next-line primer/colors */
|
|
3440
3232
|
background: var(--borderColor-default);
|
|
3441
3233
|
}
|
|
3442
|
-
|
|
3443
3234
|
:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after) {
|
|
3444
3235
|
position: absolute;
|
|
3445
3236
|
top: 50%;
|
|
@@ -3450,17 +3241,13 @@ a.tabnav-extra:hover {
|
|
|
3450
3241
|
content: "";
|
|
3451
3242
|
transform: translateX(-50%) translateY(-50%);
|
|
3452
3243
|
}
|
|
3453
|
-
|
|
3454
3244
|
@media (pointer: coarse) {
|
|
3455
|
-
|
|
3456
3245
|
:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after {
|
|
3457
3246
|
min-width: var(--control-minTarget-coarse);
|
|
3458
3247
|
min-height: var(--control-minTarget-coarse);
|
|
3459
3248
|
}
|
|
3460
3249
|
}
|
|
3461
|
-
|
|
3462
3250
|
/* if leadingVisual is present */
|
|
3463
|
-
|
|
3464
3251
|
/*
|
|
3465
3252
|
┌──32px──┬────────────────────┐
|
|
3466
3253
|
╎ ┌───┐ ┌────────────────┐ ╎
|
|
@@ -3468,15 +3255,12 @@ a.tabnav-extra:hover {
|
|
|
3468
3255
|
╎ └───┘ └────────────────┘ ╎
|
|
3469
3256
|
└───────8px───────────────────┘
|
|
3470
3257
|
*/
|
|
3471
|
-
|
|
3472
3258
|
.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input {
|
|
3473
3259
|
padding-inline-start: calc(
|
|
3474
3260
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
|
|
3475
3261
|
); /* 32px */
|
|
3476
3262
|
}
|
|
3477
|
-
|
|
3478
3263
|
/* if trailingVisual is present */
|
|
3479
|
-
|
|
3480
3264
|
/*
|
|
3481
3265
|
┌──────────────────┬──32px──┐
|
|
3482
3266
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3484,19 +3268,15 @@ a.tabnav-extra:hover {
|
|
|
3484
3268
|
╎ └──────────────┘ └────┘ ╎
|
|
3485
3269
|
└──────────────────┴────────┘
|
|
3486
3270
|
*/
|
|
3487
|
-
|
|
3488
3271
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input {
|
|
3489
3272
|
padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
|
|
3490
3273
|
}
|
|
3491
|
-
|
|
3492
3274
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
|
|
3493
3275
|
padding-inline-end: 25%
|
|
3494
3276
|
}
|
|
3495
|
-
|
|
3496
3277
|
.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
|
|
3497
3278
|
padding-inline-end: 25%
|
|
3498
3279
|
}
|
|
3499
|
-
|
|
3500
3280
|
/*
|
|
3501
3281
|
┌──────────────────┬──32px──┐
|
|
3502
3282
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3504,15 +3284,12 @@ a.tabnav-extra:hover {
|
|
|
3504
3284
|
╎ └──────────────┘ └────┘ ╎
|
|
3505
3285
|
└──────────────────┴────────┘
|
|
3506
3286
|
*/
|
|
3507
|
-
|
|
3508
3287
|
/* if trailingAction is present */
|
|
3509
|
-
|
|
3510
3288
|
.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input {
|
|
3511
3289
|
padding-inline-end: calc(
|
|
3512
3290
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
|
|
3513
3291
|
); /* 32px */
|
|
3514
3292
|
}
|
|
3515
|
-
|
|
3516
3293
|
/*
|
|
3517
3294
|
32px + 1px border
|
|
3518
3295
|
┌──────────────────┬──33px──┐
|
|
@@ -3521,30 +3298,24 @@ a.tabnav-extra:hover {
|
|
|
3521
3298
|
╎ └──────────────┘ └────┘ ╎
|
|
3522
3299
|
└──────────────────┴────────┘
|
|
3523
3300
|
*/
|
|
3524
|
-
|
|
3525
3301
|
/* if trailingAction divider is present, add 1px padding to accomodate input field text
|
|
3526
3302
|
** can be refactored to has(.FormControl-input-trailingAction--divider) */
|
|
3527
|
-
|
|
3528
3303
|
.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input {
|
|
3529
3304
|
padding-inline-end: calc(
|
|
3530
3305
|
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
|
|
3531
3306
|
var(--borderWidth-thin)
|
|
3532
3307
|
); /* 33px */
|
|
3533
3308
|
}
|
|
3534
|
-
|
|
3535
3309
|
/* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
|
|
3536
3310
|
// sizes */
|
|
3537
|
-
|
|
3538
3311
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap {
|
|
3539
3312
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3540
3313
|
left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3541
3314
|
}
|
|
3542
|
-
|
|
3543
3315
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap {
|
|
3544
3316
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3545
3317
|
right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3546
3318
|
}
|
|
3547
|
-
|
|
3548
3319
|
/*
|
|
3549
3320
|
┌──────────────────┬──28px──┐
|
|
3550
3321
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3552,13 +3323,11 @@ a.tabnav-extra:hover {
|
|
|
3552
3323
|
╎ └──────────────┘ └────┘ ╎
|
|
3553
3324
|
└──────────────────┴────────┘
|
|
3554
3325
|
*/
|
|
3555
|
-
|
|
3556
3326
|
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small {
|
|
3557
3327
|
padding-inline-end: calc(
|
|
3558
3328
|
var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
|
|
3559
3329
|
); /* 28px */
|
|
3560
3330
|
}
|
|
3561
|
-
|
|
3562
3331
|
/*
|
|
3563
3332
|
28px + 1px border
|
|
3564
3333
|
┌──────────────────┬──29px──┐
|
|
@@ -3567,33 +3336,27 @@ a.tabnav-extra:hover {
|
|
|
3567
3336
|
╎ └──────────────┘ └────┘ ╎
|
|
3568
3337
|
└──────────────────┴────────┘
|
|
3569
3338
|
*/
|
|
3570
|
-
|
|
3571
3339
|
.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small {
|
|
3572
3340
|
padding-inline-end: calc(
|
|
3573
3341
|
var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
|
|
3574
3342
|
var(--borderWidth-thin)
|
|
3575
3343
|
); /* 29px */
|
|
3576
3344
|
}
|
|
3577
|
-
|
|
3578
3345
|
.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction {
|
|
3579
3346
|
width: calc(var(--control-small-size) - var(--base-size-8));
|
|
3580
3347
|
height: calc(var(--control-small-size) - var(--base-size-8));
|
|
3581
3348
|
}
|
|
3582
|
-
|
|
3583
3349
|
:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction)::before {
|
|
3584
3350
|
top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
|
|
3585
3351
|
}
|
|
3586
|
-
|
|
3587
3352
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap {
|
|
3588
3353
|
top: var(--control-medium-paddingInline-normal);
|
|
3589
3354
|
left: var(--control-medium-paddingInline-normal);
|
|
3590
3355
|
}
|
|
3591
|
-
|
|
3592
3356
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap {
|
|
3593
3357
|
top: var(--control-medium-paddingInline-normal);
|
|
3594
3358
|
right: var(--control-medium-paddingInline-normal);
|
|
3595
3359
|
}
|
|
3596
|
-
|
|
3597
3360
|
/*
|
|
3598
3361
|
┌──36px──┬───12px padding──────┐
|
|
3599
3362
|
╎ ┌───┐ ┌────────────────┐ ╎
|
|
@@ -3601,33 +3364,26 @@ a.tabnav-extra:hover {
|
|
|
3601
3364
|
╎ └───┘ └────────────────┘ ╎
|
|
3602
3365
|
└12px───8px───────────────────┘
|
|
3603
3366
|
*/
|
|
3604
|
-
|
|
3605
3367
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large {
|
|
3606
3368
|
padding-inline-start: calc(
|
|
3607
3369
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
|
|
3608
3370
|
); /* 36px */
|
|
3609
3371
|
}
|
|
3610
|
-
|
|
3611
3372
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input {
|
|
3612
3373
|
padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
|
|
3613
3374
|
}
|
|
3614
|
-
|
|
3615
3375
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
|
|
3616
3376
|
padding-inline-end: 25%
|
|
3617
3377
|
}
|
|
3618
|
-
|
|
3619
3378
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
|
|
3620
3379
|
padding-inline-end: 25%
|
|
3621
3380
|
}
|
|
3622
|
-
|
|
3623
3381
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large {
|
|
3624
3382
|
padding-inline-end: 25%;
|
|
3625
3383
|
}
|
|
3626
|
-
|
|
3627
3384
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large {
|
|
3628
3385
|
padding-inline-end: 25%;
|
|
3629
3386
|
}
|
|
3630
|
-
|
|
3631
3387
|
/*
|
|
3632
3388
|
┌──────────────────┬──36px──┐
|
|
3633
3389
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3635,13 +3391,11 @@ a.tabnav-extra:hover {
|
|
|
3635
3391
|
╎ └──────────────┘ └────┘ ╎
|
|
3636
3392
|
└──────────────────┴────────┘
|
|
3637
3393
|
*/
|
|
3638
|
-
|
|
3639
3394
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large {
|
|
3640
3395
|
padding-inline-end: calc(
|
|
3641
3396
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
|
|
3642
3397
|
); /* 36px */
|
|
3643
3398
|
}
|
|
3644
|
-
|
|
3645
3399
|
/*
|
|
3646
3400
|
┌──────────────────┬──37px──┐
|
|
3647
3401
|
╎ ┌──────────────┐ ┌────┐ ╎
|
|
@@ -3649,21 +3403,18 @@ a.tabnav-extra:hover {
|
|
|
3649
3403
|
╎ └──────────────┘ └────┘ ╎
|
|
3650
3404
|
└──────────────────┴────────┘
|
|
3651
3405
|
*/
|
|
3652
|
-
|
|
3653
3406
|
.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large {
|
|
3654
3407
|
padding-inline-end: calc(
|
|
3655
3408
|
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
|
|
3656
3409
|
var(--borderWidth-thin)
|
|
3657
3410
|
); /* 37px */
|
|
3658
3411
|
}
|
|
3659
|
-
|
|
3660
3412
|
.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction {
|
|
3661
3413
|
top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3662
3414
|
right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
|
|
3663
3415
|
width: var(--control-small-size);
|
|
3664
3416
|
height: var(--control-small-size);
|
|
3665
3417
|
}
|
|
3666
|
-
|
|
3667
3418
|
:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before {
|
|
3668
3419
|
top: unset;
|
|
3669
3420
|
height: var(--base-size-20);
|
|
@@ -3754,16 +3505,20 @@ a.tabnav-extra:hover {
|
|
|
3754
3505
|
gap: var(--base-size-8);
|
|
3755
3506
|
}
|
|
3756
3507
|
|
|
3757
|
-
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap {
|
|
3758
|
-
display: flex;
|
|
3759
|
-
flex-direction: column;
|
|
3760
|
-
gap: var(--base-size-4);
|
|
3761
|
-
}
|
|
3762
|
-
|
|
3763
3508
|
:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label {
|
|
3764
3509
|
cursor: pointer;
|
|
3765
3510
|
}
|
|
3766
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
|
+
|
|
3767
3522
|
.FormControl-radio-group-wrap fieldset {
|
|
3768
3523
|
padding: 0;
|
|
3769
3524
|
margin: 0;
|
|
@@ -3778,14 +3533,12 @@ a.tabnav-extra:hover {
|
|
|
3778
3533
|
|
|
3779
3534
|
/* these selectors are temporary to override base.scss
|
|
3780
3535
|
** once Field styles are widely adopted, we can adjust this and the global base styles */
|
|
3781
|
-
|
|
3782
3536
|
.FormControl-checkbox {
|
|
3783
3537
|
color: var(--fgColor-default);
|
|
3784
3538
|
background-color: var(--bgColor-default);
|
|
3785
3539
|
border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
|
|
3786
3540
|
box-shadow: var(--shadow-inset);
|
|
3787
3541
|
}
|
|
3788
|
-
|
|
3789
3542
|
.FormControl-checkbox[disabled] {
|
|
3790
3543
|
color: var(--control-fgColor-disabled);
|
|
3791
3544
|
cursor: not-allowed;
|
|
@@ -3795,15 +3548,12 @@ a.tabnav-extra:hover {
|
|
|
3795
3548
|
opacity: 1;
|
|
3796
3549
|
-webkit-text-fill-color: var(--control-fgColor-disabled);
|
|
3797
3550
|
}
|
|
3798
|
-
|
|
3799
3551
|
.FormControl-checkbox[invalid='true']:not(:focus) {
|
|
3800
3552
|
border-color: var(--control-borderColor-danger);
|
|
3801
3553
|
}
|
|
3802
|
-
|
|
3803
3554
|
.FormControl-checkbox[invalid='false']:not(:focus) {
|
|
3804
3555
|
border-color: var(--control-borderColor-success);
|
|
3805
3556
|
}
|
|
3806
|
-
|
|
3807
3557
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus {
|
|
3808
3558
|
border-color: var(--focus-outlineColor);
|
|
3809
3559
|
outline: none;
|
|
@@ -3811,7 +3561,6 @@ a.tabnav-extra:hover {
|
|
|
3811
3561
|
|
|
3812
3562
|
/* remove fallback :focus if :focus-visible is supported */
|
|
3813
3563
|
}
|
|
3814
|
-
|
|
3815
3564
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
|
|
3816
3565
|
border-color: transparent;
|
|
3817
3566
|
|
|
@@ -3821,15 +3570,12 @@ a.tabnav-extra:hover {
|
|
|
3821
3570
|
|
|
3822
3571
|
box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
|
|
3823
3572
|
}
|
|
3824
|
-
|
|
3825
3573
|
/* default focus state */
|
|
3826
|
-
|
|
3827
3574
|
.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible {
|
|
3828
3575
|
border-color: var(--focus-outlineColor);
|
|
3829
3576
|
outline: none;
|
|
3830
3577
|
box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
|
|
3831
3578
|
}
|
|
3832
|
-
|
|
3833
3579
|
.FormControl-checkbox {
|
|
3834
3580
|
|
|
3835
3581
|
position: relative;
|
|
@@ -3845,7 +3591,6 @@ a.tabnav-extra:hover {
|
|
|
3845
3591
|
appearance: none;
|
|
3846
3592
|
place-content: center;
|
|
3847
3593
|
}
|
|
3848
|
-
|
|
3849
3594
|
.FormControl-checkbox::before {
|
|
3850
3595
|
width: var(--base-size-16);
|
|
3851
3596
|
height: var(--base-size-16);
|
|
@@ -3863,9 +3608,7 @@ a.tabnav-extra:hover {
|
|
|
3863
3608
|
mask-position: center;
|
|
3864
3609
|
animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
|
|
3865
3610
|
}
|
|
3866
|
-
|
|
3867
3611
|
/* extend touch target */
|
|
3868
|
-
|
|
3869
3612
|
:is(.FormControl-checkbox::after) {
|
|
3870
3613
|
position: absolute;
|
|
3871
3614
|
top: 50%;
|
|
@@ -3876,24 +3619,20 @@ a.tabnav-extra:hover {
|
|
|
3876
3619
|
content: "";
|
|
3877
3620
|
transform: translateX(-50%) translateY(-50%);
|
|
3878
3621
|
}
|
|
3879
|
-
|
|
3880
3622
|
:is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label {
|
|
3881
3623
|
color: var(--control-fgColor-disabled);
|
|
3882
3624
|
cursor: not-allowed;
|
|
3883
3625
|
}
|
|
3884
|
-
|
|
3885
3626
|
.FormControl-checkbox:checked {
|
|
3886
3627
|
background: var(--control-checked-bgColor-rest, var(--color-accent-fg));
|
|
3887
3628
|
border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
|
|
3888
3629
|
transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
|
|
3889
3630
|
}
|
|
3890
|
-
|
|
3891
3631
|
.FormControl-checkbox:checked::before {
|
|
3892
3632
|
visibility: visible;
|
|
3893
3633
|
transition: visibility 0s linear 0s;
|
|
3894
3634
|
animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
|
|
3895
3635
|
}
|
|
3896
|
-
|
|
3897
3636
|
.FormControl-checkbox:checked:disabled {
|
|
3898
3637
|
cursor: not-allowed;
|
|
3899
3638
|
/* stylelint-disable-next-line primer/colors */
|
|
@@ -3902,28 +3641,22 @@ a.tabnav-extra:hover {
|
|
|
3902
3641
|
border-color: var(--control-fgColor-disabled);
|
|
3903
3642
|
opacity: 1;
|
|
3904
3643
|
}
|
|
3905
|
-
|
|
3906
3644
|
.FormControl-checkbox:checked:disabled::before {
|
|
3907
3645
|
/* stylelint-disable-next-line primer/colors */
|
|
3908
3646
|
background-color: var(--control-checked-fgColor-rest);
|
|
3909
3647
|
}
|
|
3910
|
-
|
|
3911
3648
|
/* Windows High Contrast mode */
|
|
3912
|
-
|
|
3913
3649
|
@media (forced-colors: active) {
|
|
3914
|
-
|
|
3915
3650
|
.FormControl-checkbox:checked {
|
|
3916
3651
|
background-color: canvastext;
|
|
3917
3652
|
border-color: canvastext;
|
|
3918
3653
|
}
|
|
3919
3654
|
}
|
|
3920
|
-
|
|
3921
3655
|
.FormControl-checkbox:focus-visible {
|
|
3922
3656
|
outline: 2px solid var(--focus-outlineColor);
|
|
3923
3657
|
outline-offset: 2px;
|
|
3924
3658
|
box-shadow: none;
|
|
3925
3659
|
}
|
|
3926
|
-
|
|
3927
3660
|
.FormControl-checkbox:indeterminate::before {
|
|
3928
3661
|
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
|
|
3929
3662
|
visibility: visible;
|
|
@@ -4062,17 +3795,18 @@ a.tabnav-extra:hover {
|
|
|
4062
3795
|
clip-path: inset(var(--base-size-16) 0 0 0);
|
|
4063
3796
|
}
|
|
4064
3797
|
}
|
|
4065
|
-
|
|
4066
3798
|
/* ToggleSwitch */
|
|
4067
3799
|
|
|
4068
3800
|
/* Catalyst in dotcom applies a display: block to all web component elements. This
|
|
4069
3801
|
** rule overrides it so the status label and toggle switch are laid out correctly. */
|
|
4070
|
-
|
|
4071
3802
|
.ToggleSwitch.ToggleSwitch {
|
|
4072
3803
|
display: inline-flex;
|
|
4073
3804
|
}
|
|
4074
3805
|
|
|
4075
3806
|
.ToggleSwitch {
|
|
3807
|
+
--toggleSwitch-knob-inset: var(--borderWidth-thin);
|
|
3808
|
+
--toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset));
|
|
3809
|
+
|
|
4076
3810
|
align-items: center;
|
|
4077
3811
|
display: inline-flex;
|
|
4078
3812
|
gap: var(--controlStack-medium-gap-condensed);
|
|
@@ -4167,7 +3901,7 @@ a.tabnav-extra:hover {
|
|
|
4167
3901
|
.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-knob {
|
|
4168
3902
|
background-color: var(--controlKnob-bgColor-checked);
|
|
4169
3903
|
border-color: var(--controlKnob-borderColor-checked);
|
|
4170
|
-
transform: translateX(100%);
|
|
3904
|
+
transform: translateX(calc(100% - var(--toggleSwitch-knob-offset)));
|
|
4171
3905
|
}
|
|
4172
3906
|
|
|
4173
3907
|
.ToggleSwitch-track[aria-pressed='true'] .ToggleSwitch-lineIcon {
|
|
@@ -4187,7 +3921,6 @@ a.tabnav-extra:hover {
|
|
|
4187
3921
|
|
|
4188
3922
|
.ToggleSwitch-track[disabled] .ToggleSwitch-knob {
|
|
4189
3923
|
border-color: var(--borderColor-default);
|
|
4190
|
-
box-shadow: none;
|
|
4191
3924
|
}
|
|
4192
3925
|
|
|
4193
3926
|
.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon {
|
|
@@ -4228,14 +3961,14 @@ a.tabnav-extra:hover {
|
|
|
4228
3961
|
|
|
4229
3962
|
.ToggleSwitch-knob {
|
|
4230
3963
|
position: absolute;
|
|
4231
|
-
|
|
4232
|
-
|
|
3964
|
+
inset-block: var(--toggleSwitch-knob-inset);
|
|
3965
|
+
inset-inline-start: var(--toggleSwitch-knob-inset);
|
|
4233
3966
|
z-index: 1;
|
|
4234
3967
|
width: 50%;
|
|
4235
3968
|
background-color: var(--controlKnob-bgColor-rest);
|
|
4236
3969
|
border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
|
|
4237
|
-
|
|
4238
|
-
|
|
3970
|
+
/* stylelint-disable-next-line primer/borders */
|
|
3971
|
+
border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));
|
|
4239
3972
|
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
|
4240
3973
|
transition-duration: 80ms;
|
|
4241
3974
|
transition-property: transform;
|
|
@@ -4293,7 +4026,6 @@ a.tabnav-extra:hover {
|
|
|
4293
4026
|
.ToggleSwitch--statusAtEnd .ToggleSwitch-status {
|
|
4294
4027
|
text-align: left;
|
|
4295
4028
|
}
|
|
4296
|
-
|
|
4297
4029
|
/* UnderlineNav */
|
|
4298
4030
|
|
|
4299
4031
|
.UnderlineNav {
|
|
@@ -4308,7 +4040,6 @@ a.tabnav-extra:hover {
|
|
|
4308
4040
|
}
|
|
4309
4041
|
|
|
4310
4042
|
.UnderlineNav .Counter {
|
|
4311
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4312
4043
|
margin-left: var(--control-medium-gap);
|
|
4313
4044
|
color: var(--fgColor-default);
|
|
4314
4045
|
background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
|
@@ -4329,7 +4060,6 @@ a.tabnav-extra:hover {
|
|
|
4329
4060
|
.UnderlineNav-item {
|
|
4330
4061
|
position: relative;
|
|
4331
4062
|
display: flex;
|
|
4332
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4333
4063
|
padding: 0 var(--control-medium-paddingInline-condensed);
|
|
4334
4064
|
font-size: var(--text-body-size-medium);
|
|
4335
4065
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -4434,7 +4164,6 @@ a.tabnav-extra:hover {
|
|
|
4434
4164
|
|
|
4435
4165
|
.UnderlineNav-octicon {
|
|
4436
4166
|
display: inline !important;
|
|
4437
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
4438
4167
|
margin-right: var(--control-medium-gap);
|
|
4439
4168
|
color: var(--fgColor-muted);
|
|
4440
4169
|
fill: var(--fgColor-muted);
|
|
@@ -4444,7 +4173,6 @@ a.tabnav-extra:hover {
|
|
|
4444
4173
|
display: flex;
|
|
4445
4174
|
justify-content: space-between;
|
|
4446
4175
|
}
|
|
4447
|
-
|
|
4448
4176
|
@keyframes shimmer {
|
|
4449
4177
|
from {
|
|
4450
4178
|
mask-position: 200%;
|
|
@@ -4481,7 +4209,6 @@ a.tabnav-extra:hover {
|
|
|
4481
4209
|
outline-offset: -1px;
|
|
4482
4210
|
}
|
|
4483
4211
|
}
|
|
4484
|
-
|
|
4485
4212
|
/* stylelint-disable selector-max-type -- Copied from primer/react */
|
|
4486
4213
|
|
|
4487
4214
|
.TreeViewRootUlStyles {
|
|
@@ -4853,6 +4580,7 @@ a.tabnav-extra:hover {
|
|
|
4853
4580
|
/* stylelint-disable-next-line primer/spacing */
|
|
4854
4581
|
margin: -1px;
|
|
4855
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 */
|
|
4856
4584
|
clip: rect(0, 0, 0, 0);
|
|
4857
4585
|
white-space: nowrap;
|
|
4858
4586
|
border-width: 0;
|
|
@@ -4905,7 +4633,6 @@ a.tabnav-extra:hover {
|
|
|
4905
4633
|
}
|
|
4906
4634
|
|
|
4907
4635
|
/* beta */
|
|
4908
|
-
|
|
4909
4636
|
/* avatar */
|
|
4910
4637
|
|
|
4911
4638
|
.avatar {
|
|
@@ -4928,7 +4655,6 @@ a.tabnav-extra:hover {
|
|
|
4928
4655
|
}
|
|
4929
4656
|
|
|
4930
4657
|
/* User for example on /stars and /user for grids of avatars */
|
|
4931
|
-
|
|
4932
4658
|
.avatar-group-item {
|
|
4933
4659
|
display: inline-block;
|
|
4934
4660
|
margin-bottom: var(--base-size-4);
|
|
@@ -4983,9 +4709,7 @@ a.tabnav-extra:hover {
|
|
|
4983
4709
|
width: var(--base-size-64);
|
|
4984
4710
|
height: var(--base-size-64);
|
|
4985
4711
|
}
|
|
4986
|
-
|
|
4987
4712
|
/* stylelint-disable selector-max-specificity */
|
|
4988
|
-
|
|
4989
4713
|
/* The selector-max-specificity rule is disabled here because the nested selectors
|
|
4990
4714
|
in AvatarStack require high specificity to properly override default styles and
|
|
4991
4715
|
achieve the intended visual stacking. */
|
|
@@ -5142,15 +4866,12 @@ a.tabnav-extra:hover {
|
|
|
5142
4866
|
/* stylelint-disable-next-line primer/spacing */
|
|
5143
4867
|
margin-left: -11px;
|
|
5144
4868
|
}
|
|
5145
|
-
|
|
5146
4869
|
/* stylelint-disable primer/spacing */
|
|
5147
|
-
|
|
5148
4870
|
/* stylelint-disable primer/typography */
|
|
5149
4871
|
|
|
5150
4872
|
/* BorderBox */
|
|
5151
4873
|
|
|
5152
4874
|
/* TODO: Rename to BorderBox to match PVC */
|
|
5153
|
-
|
|
5154
4875
|
.Box {
|
|
5155
4876
|
background-color: var(--bgColor-default);
|
|
5156
4877
|
border-color: var(--borderColor-default);
|
|
@@ -5160,29 +4881,23 @@ a.tabnav-extra:hover {
|
|
|
5160
4881
|
}
|
|
5161
4882
|
|
|
5162
4883
|
/* Box padding density options */
|
|
5163
|
-
|
|
5164
4884
|
.Box--condensed {
|
|
5165
4885
|
line-height: 1.25;
|
|
5166
4886
|
}
|
|
5167
|
-
|
|
5168
4887
|
.Box--condensed .Box-header {
|
|
5169
4888
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5170
4889
|
}
|
|
5171
|
-
|
|
5172
4890
|
.Box--condensed .Box-body {
|
|
5173
4891
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5174
4892
|
}
|
|
5175
|
-
|
|
5176
4893
|
.Box--condensed .Box-footer {
|
|
5177
4894
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5178
4895
|
}
|
|
5179
|
-
|
|
5180
4896
|
.btn-octicon:is(.Box--condensed .Box-btn-octicon) {
|
|
5181
4897
|
padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
|
|
5182
4898
|
margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
|
|
5183
4899
|
line-height: 1.25;
|
|
5184
4900
|
}
|
|
5185
|
-
|
|
5186
4901
|
.Box--condensed .Box-row {
|
|
5187
4902
|
padding: var(--stack-padding-condensed) var(--stack-padding-normal);
|
|
5188
4903
|
}
|
|
@@ -5243,7 +4958,6 @@ a.tabnav-extra:hover {
|
|
|
5243
4958
|
}
|
|
5244
4959
|
|
|
5245
4960
|
/* Box rows */
|
|
5246
|
-
|
|
5247
4961
|
.Box-row {
|
|
5248
4962
|
padding: var(--stack-padding-normal);
|
|
5249
4963
|
margin-top: calc(var(--borderWidth-thin) * -1);
|
|
@@ -5252,53 +4966,40 @@ a.tabnav-extra:hover {
|
|
|
5252
4966
|
border-top-style: solid;
|
|
5253
4967
|
border-top-width: var(--borderWidth-thin);
|
|
5254
4968
|
}
|
|
5255
|
-
|
|
5256
4969
|
.Box-row:first-of-type {
|
|
5257
4970
|
border-top-left-radius: var(--borderRadius-medium);
|
|
5258
4971
|
border-top-right-radius: var(--borderRadius-medium);
|
|
5259
4972
|
}
|
|
5260
|
-
|
|
5261
4973
|
.Box-row:last-of-type {
|
|
5262
4974
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
5263
4975
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
5264
4976
|
}
|
|
5265
|
-
|
|
5266
4977
|
/* Adds a blue vertical line to the left of the row
|
|
5267
4978
|
** For indicating a row item is unread */
|
|
5268
|
-
|
|
5269
4979
|
.Box-row.Box-row--unread,.Box-row.unread {
|
|
5270
4980
|
/* stylelint-disable-next-line primer/box-shadow */
|
|
5271
4981
|
box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
|
|
5272
4982
|
}
|
|
5273
|
-
|
|
5274
4983
|
/* Focus styles for when drag icon */
|
|
5275
|
-
|
|
5276
4984
|
.Box-row.navigation-focus .Box-row--drag-button {
|
|
5277
4985
|
color: var(--fgColor-accent);
|
|
5278
4986
|
cursor: grab;
|
|
5279
4987
|
opacity: 100;
|
|
5280
4988
|
}
|
|
5281
|
-
|
|
5282
4989
|
/* Grabbing while row is dragged */
|
|
5283
|
-
|
|
5284
4990
|
.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
|
|
5285
4991
|
cursor: grabbing;
|
|
5286
4992
|
}
|
|
5287
|
-
|
|
5288
4993
|
/* Row dragging styles */
|
|
5289
|
-
|
|
5290
4994
|
.Box-row.navigation-focus.sortable-chosen {
|
|
5291
4995
|
background-color: var(--bgColor-muted);
|
|
5292
4996
|
}
|
|
5293
|
-
|
|
5294
4997
|
/* Makes dragging row background gray */
|
|
5295
|
-
|
|
5296
4998
|
.Box-row.navigation-focus.sortable-ghost {
|
|
5297
4999
|
background-color: var(--bgColor-muted);
|
|
5298
5000
|
|
|
5299
5001
|
/* Hides contents of row while dragging so row looks solid gray */
|
|
5300
5002
|
}
|
|
5301
|
-
|
|
5302
5003
|
.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
|
|
5303
5004
|
opacity: 0;
|
|
5304
5005
|
}
|
|
@@ -5322,9 +5023,7 @@ a.tabnav-extra:hover {
|
|
|
5322
5023
|
/* Optional link style
|
|
5323
5024
|
** Makes links on mobile blue since they don't have hover state,
|
|
5324
5025
|
** and links are dark-gray with blue hover on desktop. */
|
|
5325
|
-
|
|
5326
5026
|
@media (min-width: 768px) {
|
|
5327
|
-
|
|
5328
5027
|
.Box-row-link {
|
|
5329
5028
|
color: var(--fgColor-default);
|
|
5330
5029
|
-webkit-text-decoration: none;
|
|
@@ -5340,7 +5039,6 @@ a.tabnav-extra:hover {
|
|
|
5340
5039
|
|
|
5341
5040
|
/* Optional drag icon styles for reordering items
|
|
5342
5041
|
** Focus styles included in .Box-row above */
|
|
5343
|
-
|
|
5344
5042
|
.Box-row--drag-button {
|
|
5345
5043
|
opacity: 0;
|
|
5346
5044
|
}
|
|
@@ -5355,7 +5053,6 @@ a.tabnav-extra:hover {
|
|
|
5355
5053
|
}
|
|
5356
5054
|
|
|
5357
5055
|
/* Option for a box with scrolling content */
|
|
5358
|
-
|
|
5359
5056
|
.Box--scrollable {
|
|
5360
5057
|
max-height: 324px;
|
|
5361
5058
|
overflow: scroll;
|
|
@@ -5386,15 +5083,12 @@ a.tabnav-extra:hover {
|
|
|
5386
5083
|
|
|
5387
5084
|
/* Applies and red border to the outside of the box,
|
|
5388
5085
|
** but not to the border separating rows. */
|
|
5389
|
-
|
|
5390
5086
|
.Box--danger {
|
|
5391
5087
|
border-color: var(--borderColor-danger-emphasis);
|
|
5392
5088
|
}
|
|
5393
|
-
|
|
5394
5089
|
:is(.Box--danger .Box-row):first-of-type {
|
|
5395
5090
|
border-color: var(--borderColor-danger-emphasis);
|
|
5396
5091
|
}
|
|
5397
|
-
|
|
5398
5092
|
:is(.Box--danger .Box-body):last-of-type {
|
|
5399
5093
|
border-color: var(--borderColor-danger-emphasis);
|
|
5400
5094
|
}
|
|
@@ -5419,15 +5113,12 @@ a.tabnav-extra:hover {
|
|
|
5419
5113
|
}
|
|
5420
5114
|
|
|
5421
5115
|
/* Box with btn-octicon */
|
|
5422
|
-
|
|
5423
5116
|
/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
|
|
5424
|
-
|
|
5425
5117
|
.Box-btn-octicon.btn-octicon {
|
|
5426
5118
|
padding: var(--control-medium-paddingInline-spacious);
|
|
5427
5119
|
margin: calc(var(--controlStack-small-gap-spacious) * -1);
|
|
5428
5120
|
line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */
|
|
5429
5121
|
}
|
|
5430
|
-
|
|
5431
5122
|
/* blankslate */
|
|
5432
5123
|
|
|
5433
5124
|
.blankslate-container {
|
|
@@ -5448,7 +5139,7 @@ a.tabnav-extra:hover {
|
|
|
5448
5139
|
}
|
|
5449
5140
|
|
|
5450
5141
|
.blankslate p {
|
|
5451
|
-
font-size: var(--text-body-size-
|
|
5142
|
+
font-size: var(--text-body-size-medium);
|
|
5452
5143
|
color: var(--fgColor-muted);
|
|
5453
5144
|
max-width: 56rem;
|
|
5454
5145
|
margin: auto;
|
|
@@ -5472,23 +5163,19 @@ a.tabnav-extra:hover {
|
|
|
5472
5163
|
}
|
|
5473
5164
|
|
|
5474
5165
|
.blankslate-icon {
|
|
5475
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5476
5166
|
margin-right: var(--control-small-gap);
|
|
5477
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5478
5167
|
margin-bottom: var(--stack-gap-condensed);
|
|
5479
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5480
5168
|
margin-left: var(--control-small-gap);
|
|
5481
5169
|
color: var(--fgColor-muted);
|
|
5482
5170
|
}
|
|
5483
5171
|
|
|
5484
5172
|
.blankslate-image {
|
|
5485
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5486
5173
|
margin-bottom: var(--stack-gap-normal);
|
|
5487
5174
|
}
|
|
5488
5175
|
|
|
5489
5176
|
.blankslate-heading {
|
|
5490
5177
|
margin-bottom: var(--base-size-4);
|
|
5491
|
-
font-size: var(--text-title-size-
|
|
5178
|
+
font-size: var(--text-title-size-small);
|
|
5492
5179
|
font-weight: var(--text-title-weight-medium);
|
|
5493
5180
|
text-wrap: balance;
|
|
5494
5181
|
}
|
|
@@ -5498,17 +5185,14 @@ a.tabnav-extra:hover {
|
|
|
5498
5185
|
}
|
|
5499
5186
|
|
|
5500
5187
|
.blankslate-action {
|
|
5501
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5502
5188
|
margin-top: var(--stack-gap-normal);
|
|
5503
5189
|
}
|
|
5504
5190
|
|
|
5505
5191
|
.blankslate-action:first-of-type {
|
|
5506
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5507
5192
|
margin-top: var(--stack-gap-spacious);
|
|
5508
5193
|
}
|
|
5509
5194
|
|
|
5510
5195
|
.blankslate-action:last-of-type {
|
|
5511
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5512
5196
|
margin-bottom: var(--stack-gap-condensed);
|
|
5513
5197
|
}
|
|
5514
5198
|
|
|
@@ -5528,84 +5212,30 @@ a.tabnav-extra:hover {
|
|
|
5528
5212
|
|
|
5529
5213
|
/* was .large-format
|
|
5530
5214
|
** QUESTION: should we deprecate this? */
|
|
5531
|
-
|
|
5532
5215
|
/* stylelint-disable-next-line selector-max-type */
|
|
5533
|
-
|
|
5534
5216
|
.blankslate-large img {
|
|
5535
5217
|
width: 80px;
|
|
5536
5218
|
height: 80px;
|
|
5537
5219
|
}
|
|
5538
|
-
|
|
5539
5220
|
/* stylelint-disable-next-line selector-max-type */
|
|
5540
|
-
|
|
5541
5221
|
.blankslate-large h3 {
|
|
5542
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5543
5222
|
margin: var(--stack-gap-normal) 0;
|
|
5544
5223
|
|
|
5545
5224
|
/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
|
|
5546
5225
|
/* stylelint-disable-next-line primer/typography */
|
|
5547
5226
|
font-size: 24px;
|
|
5548
5227
|
}
|
|
5549
|
-
|
|
5550
5228
|
/* stylelint-disable-next-line selector-max-type */
|
|
5551
|
-
|
|
5552
5229
|
.blankslate-large p {
|
|
5553
5230
|
font-size: var(--text-body-size-large);
|
|
5554
5231
|
}
|
|
5555
5232
|
|
|
5556
5233
|
/* was .clean-background
|
|
5557
5234
|
** TO DO: deprecate this and use utility instead */
|
|
5558
|
-
|
|
5559
5235
|
.blankslate-clean-background {
|
|
5560
5236
|
border: 0;
|
|
5561
5237
|
}
|
|
5562
|
-
|
|
5563
|
-
/* At the time these styles were written,
|
|
5564
|
-
`34rem` was our "small" breakpoint width */
|
|
5565
|
-
|
|
5566
|
-
@container (max-width: 34rem) {
|
|
5567
|
-
.blankslate {
|
|
5568
|
-
--blankslate-outer-padding-block: var(--base-size-20);
|
|
5569
|
-
--blankslate-outer-padding-inline: var(--base-size-20);
|
|
5570
|
-
}
|
|
5571
|
-
|
|
5572
|
-
.blankslate-spacious {
|
|
5573
|
-
--blankslate-outer-padding-block: var(--base-size-44);
|
|
5574
|
-
--blankslate-outer-padding-inline: var(--base-size-28);
|
|
5575
|
-
}
|
|
5576
|
-
|
|
5577
|
-
.blankslate-icon {
|
|
5578
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5579
|
-
margin-bottom: var(--stack-gap-condensed);
|
|
5580
|
-
}
|
|
5581
|
-
|
|
5582
|
-
.blankslate-heading {
|
|
5583
|
-
font-size: var(--text-title-size-small);
|
|
5584
|
-
}
|
|
5585
|
-
|
|
5586
|
-
/* stylelint-disable-next-line selector-max-type */
|
|
5587
|
-
.blankslate p {
|
|
5588
|
-
font-size: var(--text-body-size-medium);
|
|
5589
|
-
}
|
|
5590
|
-
|
|
5591
|
-
.blankslate-action {
|
|
5592
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5593
|
-
margin-top: var(--stack-gap-condensed);
|
|
5594
|
-
}
|
|
5595
|
-
|
|
5596
|
-
.blankslate-action:first-of-type {
|
|
5597
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5598
|
-
margin-top: var(--stack-gap-normal);
|
|
5599
|
-
}
|
|
5600
|
-
|
|
5601
|
-
.blankslate-action:last-of-type {
|
|
5602
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
5603
|
-
margin-bottom: calc(var(--stack-gap-condensed) / 2);
|
|
5604
|
-
}
|
|
5605
|
-
}
|
|
5606
|
-
|
|
5607
5238
|
/* stylelint-disable selector-max-type, selector-no-qualifying-type */
|
|
5608
|
-
|
|
5609
5239
|
anchored-position[popover] {
|
|
5610
5240
|
position: absolute;
|
|
5611
5241
|
min-width: 192px;
|
|
@@ -5635,13 +5265,11 @@ select-panel dialog::backdrop {
|
|
|
5635
5265
|
outline: solid 1px transparent;
|
|
5636
5266
|
}
|
|
5637
5267
|
}
|
|
5638
|
-
|
|
5639
5268
|
.breadcrumb-item {
|
|
5640
5269
|
display: inline-block;
|
|
5641
5270
|
list-style: none;
|
|
5642
5271
|
max-width: 100%;
|
|
5643
5272
|
}
|
|
5644
|
-
|
|
5645
5273
|
.breadcrumb-item::after {
|
|
5646
5274
|
display: inline-block;
|
|
5647
5275
|
height: 0.8em;
|
|
@@ -5653,36 +5281,33 @@ select-panel dialog::backdrop {
|
|
|
5653
5281
|
transform: rotate(15deg) translateY(0.0625em);
|
|
5654
5282
|
}
|
|
5655
5283
|
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
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
|
+
}
|
|
5659
5291
|
|
|
5660
5292
|
/* stylelint-disable-next-line selector-max-type */
|
|
5661
|
-
|
|
5662
5293
|
.breadcrumb-item-selected a {
|
|
5663
5294
|
color: var(--fgColor-default);
|
|
5664
5295
|
-webkit-text-decoration: none !important;
|
|
5665
5296
|
text-decoration: none !important;
|
|
5666
5297
|
cursor: default !important;
|
|
5667
5298
|
}
|
|
5668
|
-
|
|
5669
5299
|
/* stylelint-disable selector-no-qualifying-type */
|
|
5670
|
-
|
|
5671
5300
|
/* stylelint-disable selector-max-type */
|
|
5672
5301
|
|
|
5673
|
-
/* stylelint-disable primer/spacing */
|
|
5674
|
-
|
|
5675
5302
|
/* CSS for Button */
|
|
5676
5303
|
|
|
5677
5304
|
/* temporary, pre primitives release */
|
|
5678
|
-
|
|
5679
5305
|
:root {
|
|
5680
5306
|
--duration-fast: 80ms;
|
|
5681
5307
|
--easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
|
|
5682
5308
|
}
|
|
5683
5309
|
|
|
5684
5310
|
/* base button */
|
|
5685
|
-
|
|
5686
5311
|
.Button {
|
|
5687
5312
|
position: relative;
|
|
5688
5313
|
display: inline-flex;
|
|
@@ -5709,7 +5334,6 @@ select-panel dialog::backdrop {
|
|
|
5709
5334
|
|
|
5710
5335
|
/* mobile friendly sizing */
|
|
5711
5336
|
}
|
|
5712
|
-
|
|
5713
5337
|
@media (pointer: coarse) {
|
|
5714
5338
|
:is(.Button::before) {
|
|
5715
5339
|
position: absolute;
|
|
@@ -5723,22 +5347,17 @@ select-panel dialog::backdrop {
|
|
|
5723
5347
|
min-width: 48px;
|
|
5724
5348
|
}
|
|
5725
5349
|
}
|
|
5726
|
-
|
|
5727
5350
|
/* base states */
|
|
5728
|
-
|
|
5729
5351
|
.Button:hover {
|
|
5730
5352
|
transition-duration: var(--duration-fast);
|
|
5731
5353
|
}
|
|
5732
|
-
|
|
5733
5354
|
.Button:active {
|
|
5734
5355
|
transition: none;
|
|
5735
5356
|
}
|
|
5736
|
-
|
|
5737
5357
|
.Button:disabled,.Button[aria-disabled='true'] {
|
|
5738
5358
|
cursor: not-allowed;
|
|
5739
5359
|
box-shadow: none;
|
|
5740
5360
|
}
|
|
5741
|
-
|
|
5742
5361
|
.Button.Button--iconOnly {
|
|
5743
5362
|
color: var(--fgColor-muted);
|
|
5744
5363
|
}
|
|
@@ -5749,7 +5368,6 @@ select-panel dialog::backdrop {
|
|
|
5749
5368
|
}
|
|
5750
5369
|
|
|
5751
5370
|
/* wrap grid content to allow trailingAction to lock-right */
|
|
5752
|
-
|
|
5753
5371
|
.Button-content {
|
|
5754
5372
|
flex: 1 0 auto;
|
|
5755
5373
|
display: grid;
|
|
@@ -5760,13 +5378,11 @@ select-panel dialog::backdrop {
|
|
|
5760
5378
|
|
|
5761
5379
|
/* padding-bottom: 1px; optical alignment for firefox */
|
|
5762
5380
|
}
|
|
5763
|
-
|
|
5764
5381
|
.Button-content > :not(:last-child) {
|
|
5765
5382
|
margin-right: var(--control-medium-gap);
|
|
5766
5383
|
}
|
|
5767
5384
|
|
|
5768
5385
|
/* center child elements for fullWidth */
|
|
5769
|
-
|
|
5770
5386
|
.Button-content--alignStart {
|
|
5771
5387
|
justify-content: start;
|
|
5772
5388
|
}
|
|
@@ -5774,12 +5390,10 @@ select-panel dialog::backdrop {
|
|
|
5774
5390
|
/* button child elements */
|
|
5775
5391
|
|
|
5776
5392
|
/* align svg */
|
|
5777
|
-
|
|
5778
5393
|
.Button-visual {
|
|
5779
5394
|
display: flex;
|
|
5780
5395
|
pointer-events: none; /* allow click handler to work, avoiding visuals */
|
|
5781
5396
|
}
|
|
5782
|
-
|
|
5783
5397
|
.Button-visual .Counter {
|
|
5784
5398
|
color: inherit;
|
|
5785
5399
|
background-color: var(--buttonCounter-default-bgColor-rest);
|
|
@@ -5883,7 +5497,6 @@ select-panel dialog::backdrop {
|
|
|
5883
5497
|
/* variants */
|
|
5884
5498
|
|
|
5885
5499
|
/* primary */
|
|
5886
|
-
|
|
5887
5500
|
.Button--primary {
|
|
5888
5501
|
color: var(--button-primary-fgColor-rest);
|
|
5889
5502
|
fill: var(--button-primary-iconColor-rest);
|
|
@@ -5891,18 +5504,14 @@ select-panel dialog::backdrop {
|
|
|
5891
5504
|
border-color: var(--button-primary-borderColor-rest);
|
|
5892
5505
|
box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
|
|
5893
5506
|
}
|
|
5894
|
-
|
|
5895
5507
|
.Button--primary.Button--iconOnly {
|
|
5896
5508
|
color: var(--button-primary-iconColor-rest);
|
|
5897
5509
|
}
|
|
5898
|
-
|
|
5899
5510
|
.Button--primary:hover:not(:disabled,.Button--inactive) {
|
|
5900
5511
|
background-color: var(--button-primary-bgColor-hover);
|
|
5901
5512
|
border-color: var(--button-primary-borderColor-hover);
|
|
5902
5513
|
}
|
|
5903
|
-
|
|
5904
5514
|
/* fallback :focus state */
|
|
5905
|
-
|
|
5906
5515
|
.Button--primary:focus {
|
|
5907
5516
|
outline: 2px solid var(--focus-outlineColor);
|
|
5908
5517
|
outline-offset: -2px;
|
|
@@ -5910,39 +5519,32 @@ select-panel dialog::backdrop {
|
|
|
5910
5519
|
|
|
5911
5520
|
/* remove fallback :focus if :focus-visible is supported */
|
|
5912
5521
|
}
|
|
5913
|
-
|
|
5914
5522
|
.Button--primary:focus:not(:focus-visible) {
|
|
5915
5523
|
outline: solid 1px transparent;
|
|
5916
5524
|
box-shadow: none;
|
|
5917
5525
|
}
|
|
5918
|
-
|
|
5919
5526
|
/* default focus state */
|
|
5920
|
-
|
|
5921
5527
|
.Button--primary:focus-visible {
|
|
5922
5528
|
outline: 2px solid var(--focus-outlineColor);
|
|
5923
5529
|
outline-offset: -2px;
|
|
5924
5530
|
box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
|
|
5925
5531
|
}
|
|
5926
|
-
|
|
5927
5532
|
.Button--primary:active:not(:disabled),.Button--primary[aria-pressed='true'] {
|
|
5928
5533
|
background-color: var(--button-primary-bgColor-active);
|
|
5929
5534
|
box-shadow: var(--button-primary-shadow-selected);
|
|
5930
5535
|
}
|
|
5931
|
-
|
|
5932
5536
|
.Button--primary:disabled,.Button--primary[aria-disabled='true'] {
|
|
5933
5537
|
color: var(--button-primary-fgColor-disabled);
|
|
5934
5538
|
fill: var(--button-primary-fgColor-disabled);
|
|
5935
5539
|
background-color: var(--button-primary-bgColor-disabled);
|
|
5936
5540
|
border-color: var(--button-primary-borderColor-disabled);
|
|
5937
5541
|
}
|
|
5938
|
-
|
|
5939
5542
|
.Button--primary .Counter {
|
|
5940
5543
|
color: inherit;
|
|
5941
5544
|
background-color: var(--buttonCounter-primary-bgColor-rest);
|
|
5942
5545
|
}
|
|
5943
5546
|
|
|
5944
5547
|
/* default (secondary) */
|
|
5945
|
-
|
|
5946
5548
|
.Button--secondary {
|
|
5947
5549
|
color: var(--button-default-fgColor-rest);
|
|
5948
5550
|
fill: var(--fgColor-muted); /* help this */
|
|
@@ -5950,22 +5552,18 @@ select-panel dialog::backdrop {
|
|
|
5950
5552
|
border-color: var(--button-default-borderColor-rest);
|
|
5951
5553
|
box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
|
|
5952
5554
|
}
|
|
5953
|
-
|
|
5954
5555
|
.Button--secondary:hover:not(:disabled,.Button--inactive) {
|
|
5955
5556
|
background-color: var(--button-default-bgColor-hover);
|
|
5956
5557
|
border-color: var(--button-default-borderColor-hover);
|
|
5957
5558
|
}
|
|
5958
|
-
|
|
5959
5559
|
.Button--secondary:active:not(:disabled) {
|
|
5960
5560
|
background-color: var(--button-default-bgColor-active);
|
|
5961
5561
|
border-color: var(--button-default-borderColor-active);
|
|
5962
5562
|
}
|
|
5963
|
-
|
|
5964
5563
|
.Button--secondary[aria-pressed='true'] {
|
|
5965
5564
|
background-color: var(--button-default-bgColor-selected);
|
|
5966
5565
|
box-shadow: var(--shadow-inset);
|
|
5967
5566
|
}
|
|
5968
|
-
|
|
5969
5567
|
.Button--secondary:disabled,.Button--secondary[aria-disabled='true'] {
|
|
5970
5568
|
color: var(--control-fgColor-disabled);
|
|
5971
5569
|
fill: var(--control-fgColor-disabled);
|
|
@@ -6042,7 +5640,6 @@ select-panel dialog::backdrop {
|
|
|
6042
5640
|
}
|
|
6043
5641
|
|
|
6044
5642
|
/* danger */
|
|
6045
|
-
|
|
6046
5643
|
.Button--danger {
|
|
6047
5644
|
color: var(--button-danger-fgColor-rest);
|
|
6048
5645
|
fill: var(--button-danger-iconColor-rest);
|
|
@@ -6050,11 +5647,9 @@ select-panel dialog::backdrop {
|
|
|
6050
5647
|
border-color: var(--button-danger-borderColor-rest);
|
|
6051
5648
|
box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
|
|
6052
5649
|
}
|
|
6053
|
-
|
|
6054
5650
|
.Button--danger.Button--iconOnly {
|
|
6055
5651
|
color: var(--button-danger-iconColor-rest);
|
|
6056
5652
|
}
|
|
6057
|
-
|
|
6058
5653
|
.Button--danger:hover:not(:disabled,.Button--inactive) {
|
|
6059
5654
|
color: var(--button-danger-fgColor-hover);
|
|
6060
5655
|
fill: var(--button-danger-fgColor-hover);
|
|
@@ -6062,12 +5657,10 @@ select-panel dialog::backdrop {
|
|
|
6062
5657
|
border-color: var(--button-danger-borderColor-hover);
|
|
6063
5658
|
box-shadow: var(--shadow-resting-small);
|
|
6064
5659
|
}
|
|
6065
|
-
|
|
6066
5660
|
.Button--danger:hover:not(:disabled,.Button--inactive) .Counter {
|
|
6067
5661
|
color: var(--buttonCounter-danger-fgColor-hover);
|
|
6068
5662
|
background-color: var(--buttonCounter-danger-bgColor-hover);
|
|
6069
5663
|
}
|
|
6070
|
-
|
|
6071
5664
|
.Button--danger:active:not(:disabled),.Button--danger[aria-pressed='true'] {
|
|
6072
5665
|
color: var(--button-danger-fgColor-active);
|
|
6073
5666
|
fill: var(--button-danger-fgColor-active);
|
|
@@ -6075,19 +5668,16 @@ select-panel dialog::backdrop {
|
|
|
6075
5668
|
border-color: var(--button-danger-borderColor-active);
|
|
6076
5669
|
box-shadow: var(--button-danger-shadow-selected);
|
|
6077
5670
|
}
|
|
6078
|
-
|
|
6079
5671
|
.Button--danger:disabled,.Button--danger[aria-disabled='true'] {
|
|
6080
5672
|
color: var(--button-danger-fgColor-disabled);
|
|
6081
5673
|
fill: var(--button-danger-fgColor-disabled);
|
|
6082
5674
|
background-color: var(--button-danger-bgColor-disabled);
|
|
6083
5675
|
border-color: var(--button-default-borderColor-disabled);
|
|
6084
5676
|
}
|
|
6085
|
-
|
|
6086
5677
|
:is(.Button--danger:disabled,.Button--danger[aria-disabled='true']) .Counter {
|
|
6087
5678
|
color: var(--buttonCounter-danger-fgColor-disabled);
|
|
6088
5679
|
background-color: var(--buttonCounter-danger-bgColor-disabled);
|
|
6089
5680
|
}
|
|
6090
|
-
|
|
6091
5681
|
.Button--danger .Counter {
|
|
6092
5682
|
color: var(--buttonCounter-danger-fgColor-rest);
|
|
6093
5683
|
background-color: var(--buttonCounter-danger-bgColor-rest);
|
|
@@ -6109,39 +5699,32 @@ select-panel dialog::backdrop {
|
|
|
6109
5699
|
}
|
|
6110
5700
|
|
|
6111
5701
|
/* `disabled` takes precedence over `inactive` */
|
|
6112
|
-
|
|
6113
5702
|
.Button--inactive:not([aria-disabled='true'], :disabled) {
|
|
6114
5703
|
color: var(--button-inactive-fgColor);
|
|
6115
5704
|
cursor: default;
|
|
6116
5705
|
background-color: var(--button-inactive-bgColor);
|
|
6117
5706
|
border: 0;
|
|
6118
5707
|
}
|
|
6119
|
-
|
|
6120
5708
|
.ButtonGroup {
|
|
6121
5709
|
display: inline-flex;
|
|
6122
5710
|
}
|
|
6123
|
-
|
|
6124
5711
|
.ButtonGroup .Button {
|
|
6125
5712
|
/* stylelint-disable-next-line primer/spacing */
|
|
6126
5713
|
margin-inline-end: -1px;
|
|
6127
5714
|
position: relative;
|
|
6128
5715
|
border-radius: 0;
|
|
6129
5716
|
}
|
|
6130
|
-
|
|
6131
5717
|
:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):hover {
|
|
6132
5718
|
z-index: 1;
|
|
6133
5719
|
}
|
|
6134
|
-
|
|
6135
5720
|
.ButtonGroup > :first-child .Button {
|
|
6136
5721
|
border-top-left-radius: var(--borderRadius-medium);
|
|
6137
5722
|
border-bottom-left-radius: var(--borderRadius-medium);
|
|
6138
5723
|
}
|
|
6139
|
-
|
|
6140
5724
|
.ButtonGroup > :last-child .Button {
|
|
6141
5725
|
border-top-right-radius: var(--borderRadius-medium);
|
|
6142
5726
|
border-bottom-right-radius: var(--borderRadius-medium);
|
|
6143
5727
|
}
|
|
6144
|
-
|
|
6145
5728
|
/* Counter */
|
|
6146
5729
|
|
|
6147
5730
|
.Counter {
|
|
@@ -6180,13 +5763,11 @@ select-panel dialog::backdrop {
|
|
|
6180
5763
|
color: var(--fgColor-muted);
|
|
6181
5764
|
background-color: var(--bgColor-neutral-muted);
|
|
6182
5765
|
}
|
|
6183
|
-
|
|
6184
5766
|
/* stylelint-disable primer/spacing */
|
|
6185
5767
|
|
|
6186
5768
|
/* flash */
|
|
6187
5769
|
|
|
6188
5770
|
/* Default flash */
|
|
6189
|
-
|
|
6190
5771
|
.flash:not(.Banner) {
|
|
6191
5772
|
position: relative;
|
|
6192
5773
|
padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
|
|
@@ -6199,26 +5780,21 @@ select-panel dialog::backdrop {
|
|
|
6199
5780
|
border-width: var(--borderWidth-thin);
|
|
6200
5781
|
border-radius: var(--borderRadius-medium);
|
|
6201
5782
|
}
|
|
6202
|
-
|
|
6203
5783
|
.flash:not(.Banner) .octicon {
|
|
6204
5784
|
margin-right: var(--base-size-12);
|
|
6205
5785
|
color: var(--fgColor-accent);
|
|
6206
5786
|
}
|
|
6207
|
-
|
|
6208
5787
|
/* stylelint-disable-next-line selector-max-type */
|
|
6209
|
-
|
|
6210
5788
|
.flash:not(.Banner) p:last-child {
|
|
6211
5789
|
margin-bottom: 0;
|
|
6212
5790
|
}
|
|
6213
5791
|
|
|
6214
5792
|
/* Contain the flash messages */
|
|
6215
|
-
|
|
6216
5793
|
.flash-messages {
|
|
6217
5794
|
margin-bottom: var(--stack-gap-spacious);
|
|
6218
5795
|
}
|
|
6219
5796
|
|
|
6220
5797
|
/* Close button */
|
|
6221
|
-
|
|
6222
5798
|
.flash-close:not(.Banner-close) {
|
|
6223
5799
|
float: right;
|
|
6224
5800
|
margin-top: calc(var(--base-size-4) * -1);
|
|
@@ -6230,37 +5806,30 @@ select-panel dialog::backdrop {
|
|
|
6230
5806
|
border: 0;
|
|
6231
5807
|
appearance: none;
|
|
6232
5808
|
}
|
|
6233
|
-
|
|
6234
5809
|
.flash-close:not(.Banner-close):hover {
|
|
6235
5810
|
opacity: 0.7;
|
|
6236
5811
|
}
|
|
6237
|
-
|
|
6238
5812
|
.flash-close:not(.Banner-close):active {
|
|
6239
5813
|
opacity: 0.5;
|
|
6240
5814
|
}
|
|
6241
|
-
|
|
6242
5815
|
.flash-close:not(.Banner-close) .octicon {
|
|
6243
5816
|
margin-right: 0;
|
|
6244
5817
|
}
|
|
6245
5818
|
|
|
6246
5819
|
/* Action button */
|
|
6247
|
-
|
|
6248
5820
|
.flash-action:not(.Banner-actions) {
|
|
6249
5821
|
float: right;
|
|
6250
5822
|
margin-top: -3px;
|
|
6251
5823
|
margin-left: var(--stack-gap-spacious);
|
|
6252
5824
|
background-clip: padding-box;
|
|
6253
5825
|
}
|
|
6254
|
-
|
|
6255
5826
|
.flash-action.btn:not(.Banner-actions) .octicon {
|
|
6256
5827
|
margin-right: var(--control-small-gap);
|
|
6257
5828
|
color: var(--fgColor-muted);
|
|
6258
5829
|
}
|
|
6259
|
-
|
|
6260
5830
|
.flash-action.btn-primary:not(.Banner-actions) {
|
|
6261
5831
|
background-clip: border-box;
|
|
6262
5832
|
}
|
|
6263
|
-
|
|
6264
5833
|
.flash-action.btn-primary:not(.Banner-actions) .octicon {
|
|
6265
5834
|
color: inherit;
|
|
6266
5835
|
}
|
|
@@ -6306,7 +5875,6 @@ select-panel dialog::backdrop {
|
|
|
6306
5875
|
}
|
|
6307
5876
|
|
|
6308
5877
|
/* A banner rendered at the top of the page. */
|
|
6309
|
-
|
|
6310
5878
|
.flash-banner {
|
|
6311
5879
|
position: fixed;
|
|
6312
5880
|
top: 0;
|
|
@@ -6319,25 +5887,21 @@ select-panel dialog::backdrop {
|
|
|
6319
5887
|
}
|
|
6320
5888
|
|
|
6321
5889
|
/* Makes sure the background is opaque to cover any content underneath */
|
|
6322
|
-
|
|
6323
5890
|
.flash-full,
|
|
6324
5891
|
.flash-banner {
|
|
6325
5892
|
background-color: var(--bgColor-default);
|
|
6326
5893
|
}
|
|
6327
5894
|
|
|
6328
5895
|
/* FIXME deprecate this */
|
|
6329
|
-
|
|
6330
5896
|
.warning {
|
|
6331
5897
|
padding: 0.5em;
|
|
6332
5898
|
margin-bottom: 0.8em;
|
|
6333
5899
|
font-weight: var(--base-text-weight-semibold);
|
|
6334
5900
|
background-color: var(--bgColor-attention-muted);
|
|
6335
5901
|
}
|
|
6336
|
-
|
|
6337
5902
|
/* Labels */
|
|
6338
5903
|
|
|
6339
5904
|
/* Provide a wrapper to ensure labels stick together */
|
|
6340
|
-
|
|
6341
5905
|
.labels {
|
|
6342
5906
|
position: relative;
|
|
6343
5907
|
}
|
|
@@ -6374,7 +5938,6 @@ select-panel dialog::backdrop {
|
|
|
6374
5938
|
|
|
6375
5939
|
/* Doesn't increase height of parent element
|
|
6376
5940
|
** Can be used with different font-sizes */
|
|
6377
|
-
|
|
6378
5941
|
.Label--inline {
|
|
6379
5942
|
display: inline;
|
|
6380
5943
|
/* stylelint-disable-next-line primer/spacing */
|
|
@@ -6443,7 +6006,6 @@ select-panel dialog::backdrop {
|
|
|
6443
6006
|
color: var(--fgColor-sponsors);
|
|
6444
6007
|
border-color: var(--borderColor-sponsors-emphasis);
|
|
6445
6008
|
}
|
|
6446
|
-
|
|
6447
6009
|
/* Links */
|
|
6448
6010
|
|
|
6449
6011
|
.Link {
|
|
@@ -6500,7 +6062,6 @@ select-panel dialog::backdrop {
|
|
|
6500
6062
|
|
|
6501
6063
|
/* Set the link color only on hover
|
|
6502
6064
|
Useful when you want only part of a link to turn blue on hover */
|
|
6503
|
-
|
|
6504
6065
|
.Link--onHover:hover {
|
|
6505
6066
|
color: var(--fgColor-accent) !important;
|
|
6506
6067
|
-webkit-text-decoration: underline;
|
|
@@ -6510,7 +6071,6 @@ select-panel dialog::backdrop {
|
|
|
6510
6071
|
|
|
6511
6072
|
/* When using a color utility class inside of a link class
|
|
6512
6073
|
color should change with link on hover. */
|
|
6513
|
-
|
|
6514
6074
|
:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg'] {
|
|
6515
6075
|
color: inherit !important;
|
|
6516
6076
|
}
|
|
@@ -6523,7 +6083,6 @@ select-panel dialog::backdrop {
|
|
|
6523
6083
|
gap: var(--base-size-4);
|
|
6524
6084
|
text-decoration: inherit;
|
|
6525
6085
|
}
|
|
6526
|
-
|
|
6527
6086
|
/* stylelint-disable primer/spacing */
|
|
6528
6087
|
|
|
6529
6088
|
/* Popover */
|
|
@@ -6543,6 +6102,7 @@ select-panel dialog::backdrop {
|
|
|
6543
6102
|
border-radius: var(--borderRadius-medium);
|
|
6544
6103
|
|
|
6545
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 */
|
|
6546
6106
|
box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
|
|
6547
6107
|
|
|
6548
6108
|
/* Carets */
|
|
@@ -6573,133 +6133,185 @@ select-panel dialog::backdrop {
|
|
|
6573
6133
|
}
|
|
6574
6134
|
|
|
6575
6135
|
/* No caret */
|
|
6576
|
-
|
|
6577
6136
|
.Popover-message--no-caret::before,.Popover-message--no-caret::after {
|
|
6578
6137
|
display: none;
|
|
6579
6138
|
}
|
|
6580
6139
|
|
|
6581
|
-
/*
|
|
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. */
|
|
6582
6145
|
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6586
|
-
|
|
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
|
+
}
|
|
6587
6156
|
|
|
6588
|
-
|
|
6589
|
-
|
|
6590
|
-
|
|
6591
|
-
|
|
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
|
+
}
|
|
6592
6163
|
|
|
6593
|
-
|
|
6594
|
-
|
|
6595
|
-
|
|
6596
|
-
|
|
6597
|
-
|
|
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
|
+
}
|
|
6598
6171
|
|
|
6599
6172
|
/* Top and Bottom: Right-oriented carets */
|
|
6600
|
-
|
|
6601
6173
|
.Popover-message--top-right,
|
|
6602
6174
|
.Popover-message--bottom-right {
|
|
6603
6175
|
right: -9px;
|
|
6604
6176
|
margin-right: 0;
|
|
6605
6177
|
}
|
|
6606
6178
|
|
|
6607
|
-
|
|
6608
|
-
|
|
6609
|
-
|
|
6610
|
-
|
|
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
|
+
}
|
|
6611
6186
|
|
|
6612
|
-
|
|
6613
|
-
|
|
6614
|
-
|
|
6187
|
+
.Popover-message--top-right::before,
|
|
6188
|
+
.Popover-message--bottom-right::before {
|
|
6189
|
+
right: var(--base-size-20);
|
|
6190
|
+
}
|
|
6615
6191
|
|
|
6616
|
-
|
|
6617
|
-
|
|
6618
|
-
|
|
6619
|
-
|
|
6192
|
+
.Popover-message--top-right::after,
|
|
6193
|
+
.Popover-message--bottom-right::after {
|
|
6194
|
+
right: var(--base-size-20);
|
|
6195
|
+
margin-right: 1px;
|
|
6196
|
+
}
|
|
6620
6197
|
|
|
6621
6198
|
/* Top and Bottom: Left-oriented carets */
|
|
6622
|
-
|
|
6623
6199
|
.Popover-message--top-left,
|
|
6624
6200
|
.Popover-message--bottom-left {
|
|
6625
6201
|
left: -9px;
|
|
6626
6202
|
margin-left: 0;
|
|
6627
6203
|
}
|
|
6628
6204
|
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
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
|
+
}
|
|
6633
6212
|
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6213
|
+
.Popover-message--top-left::after,
|
|
6214
|
+
.Popover-message--bottom-left::after {
|
|
6215
|
+
left: var(--base-size-24);
|
|
6216
|
+
margin-left: 1px;
|
|
6217
|
+
}
|
|
6638
6218
|
|
|
6639
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
|
+
}
|
|
6640
6237
|
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
|
|
6647
|
-
|
|
6648
|
-
|
|
6649
|
-
margin-top: -9px;
|
|
6650
|
-
}
|
|
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
|
+
}
|
|
6651
6246
|
|
|
6652
|
-
|
|
6653
|
-
|
|
6654
|
-
|
|
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
|
+
}
|
|
6655
6255
|
|
|
6656
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
|
+
}
|
|
6657
6263
|
|
|
6658
|
-
|
|
6659
|
-
|
|
6660
|
-
|
|
6661
|
-
|
|
6662
|
-
|
|
6663
|
-
:
|
|
6664
|
-
|
|
6665
|
-
/* stylelint-disable-next-line primer/colors */
|
|
6666
|
-
border-left-color: var(--overlay-bgColor);
|
|
6667
|
-
}
|
|
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
|
+
}
|
|
6668
6271
|
|
|
6669
6272
|
/* Left-oriented carets */
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
|
|
6675
|
-
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6680
|
-
|
|
6681
|
-
|
|
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
|
+
}
|
|
6682
6288
|
|
|
6683
6289
|
/* Right and Left: Top-oriented carets */
|
|
6684
|
-
|
|
6685
|
-
|
|
6686
|
-
|
|
6687
|
-
|
|
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
|
+
}
|
|
6688
6296
|
|
|
6689
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
|
+
}
|
|
6690
6304
|
|
|
6691
|
-
|
|
6692
|
-
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before {
|
|
6696
|
-
bottom: var(--base-size-16);
|
|
6697
|
-
}
|
|
6305
|
+
.Popover-message--right-bottom::before,
|
|
6306
|
+
.Popover-message--left-bottom::before {
|
|
6307
|
+
bottom: var(--base-size-16);
|
|
6308
|
+
}
|
|
6698
6309
|
|
|
6699
|
-
|
|
6700
|
-
|
|
6701
|
-
|
|
6702
|
-
|
|
6310
|
+
.Popover-message--right-bottom::after,
|
|
6311
|
+
.Popover-message--left-bottom::after {
|
|
6312
|
+
bottom: var(--base-size-16);
|
|
6313
|
+
margin-bottom: 1px;
|
|
6314
|
+
}
|
|
6703
6315
|
|
|
6704
6316
|
@media (min-width: 544px) {
|
|
6705
6317
|
.Popover-message--large {
|
|
@@ -6739,7 +6351,6 @@ select-panel dialog::backdrop {
|
|
|
6739
6351
|
display: none;
|
|
6740
6352
|
}
|
|
6741
6353
|
}
|
|
6742
|
-
|
|
6743
6354
|
/* Progress */
|
|
6744
6355
|
|
|
6745
6356
|
.Progress {
|
|
@@ -6778,7 +6389,6 @@ select-panel dialog::backdrop {
|
|
|
6778
6389
|
forced-color-adjust: none;
|
|
6779
6390
|
}
|
|
6780
6391
|
}
|
|
6781
|
-
|
|
6782
6392
|
/* State */
|
|
6783
6393
|
|
|
6784
6394
|
/* Default 32px */
|
|
@@ -6786,7 +6396,6 @@ select-panel dialog::backdrop {
|
|
|
6786
6396
|
.state, /* TODO: Deprecate */
|
|
6787
6397
|
.State {
|
|
6788
6398
|
display: inline-block;
|
|
6789
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6790
6399
|
padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
|
|
6791
6400
|
font-size: var(--text-body-size-medium);
|
|
6792
6401
|
font-weight: var(--base-text-weight-medium);
|
|
@@ -6838,14 +6447,11 @@ select-panel dialog::backdrop {
|
|
|
6838
6447
|
.State--small .octicon {
|
|
6839
6448
|
width: 1em; /* Ensures different icons don't change State indicator width */
|
|
6840
6449
|
}
|
|
6841
|
-
|
|
6842
6450
|
/* Subhead */
|
|
6843
6451
|
|
|
6844
6452
|
.Subhead {
|
|
6845
6453
|
display: flex;
|
|
6846
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6847
6454
|
padding-bottom: var(--stack-padding-condensed);
|
|
6848
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6849
6455
|
margin-bottom: var(--stack-gap-normal);
|
|
6850
6456
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
|
|
6851
6457
|
flex-flow: row wrap;
|
|
@@ -6853,13 +6459,11 @@ select-panel dialog::backdrop {
|
|
|
6853
6459
|
}
|
|
6854
6460
|
|
|
6855
6461
|
/* Modifier class to give a lot of breathing room between sections of content. */
|
|
6856
|
-
|
|
6857
6462
|
.Subhead--spacious {
|
|
6858
6463
|
margin-top: var(--base-size-40);
|
|
6859
6464
|
}
|
|
6860
6465
|
|
|
6861
6466
|
/* <h2> sized heading with normal font weight */
|
|
6862
|
-
|
|
6863
6467
|
.Subhead-heading {
|
|
6864
6468
|
font-weight: var(--base-text-weight-normal);
|
|
6865
6469
|
flex: 1 1 auto;
|
|
@@ -6876,14 +6480,12 @@ select-panel dialog::backdrop {
|
|
|
6876
6480
|
}
|
|
6877
6481
|
|
|
6878
6482
|
/* Make the text bold and red for dangerous content */
|
|
6879
|
-
|
|
6880
6483
|
.Subhead-heading--danger {
|
|
6881
6484
|
font-weight: var(--base-text-weight-semibold);
|
|
6882
6485
|
color: var(--fgColor-danger);
|
|
6883
6486
|
}
|
|
6884
6487
|
|
|
6885
6488
|
/* One-liner of supporting text */
|
|
6886
|
-
|
|
6887
6489
|
.Subhead-description {
|
|
6888
6490
|
font-size: var(--text-body-size-medium);
|
|
6889
6491
|
color: var(--fgColor-muted);
|
|
@@ -6892,18 +6494,15 @@ select-panel dialog::backdrop {
|
|
|
6892
6494
|
}
|
|
6893
6495
|
|
|
6894
6496
|
/* Add 1 or 2 buttons to the right of the heading */
|
|
6895
|
-
|
|
6896
6497
|
.Subhead-actions {
|
|
6897
6498
|
margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
|
|
6898
6499
|
align-self: center;
|
|
6899
6500
|
justify-content: flex-end;
|
|
6900
6501
|
order: 1;
|
|
6901
6502
|
}
|
|
6902
|
-
|
|
6903
6503
|
.Subhead-actions + .Subhead-description {
|
|
6904
6504
|
margin-top: var(--base-size-4);
|
|
6905
6505
|
}
|
|
6906
|
-
|
|
6907
6506
|
/* Truncate */
|
|
6908
6507
|
|
|
6909
6508
|
.Truncate {
|
|
@@ -6921,7 +6520,6 @@ select-panel dialog::backdrop {
|
|
|
6921
6520
|
}
|
|
6922
6521
|
|
|
6923
6522
|
:is(.Truncate > .Truncate-text) + .Truncate-text {
|
|
6924
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6925
6523
|
margin-left: var(--control-small-gap);
|
|
6926
6524
|
}
|
|
6927
6525
|
|
|
@@ -6936,15 +6534,12 @@ select-panel dialog::backdrop {
|
|
|
6936
6534
|
}
|
|
6937
6535
|
|
|
6938
6536
|
/* to be renamed */
|
|
6939
|
-
|
|
6940
6537
|
/* TimelineItem */
|
|
6941
6538
|
|
|
6942
6539
|
.TimelineItem {
|
|
6943
6540
|
position: relative;
|
|
6944
6541
|
display: flex;
|
|
6945
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6946
6542
|
padding: var(--stack-padding-normal) 0;
|
|
6947
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6948
6543
|
margin-left: var(--stack-gap-normal);
|
|
6949
6544
|
|
|
6950
6545
|
/* The Timeline */
|
|
@@ -6974,7 +6569,6 @@ select-panel dialog::backdrop {
|
|
|
6974
6569
|
display: flex;
|
|
6975
6570
|
width: var(--control-medium-size);
|
|
6976
6571
|
height: var(--control-medium-size);
|
|
6977
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
6978
6572
|
margin-right: var(--controlStack-medium-gap-condensed);
|
|
6979
6573
|
/* stylelint-disable-next-line primer/spacing */
|
|
6980
6574
|
margin-left: calc(var(--control-medium-size) / -2 + 1px);
|
|
@@ -7015,7 +6609,6 @@ select-panel dialog::backdrop {
|
|
|
7015
6609
|
z-index: 1;
|
|
7016
6610
|
height: var(--stack-gap-spacious);
|
|
7017
6611
|
margin: 0;
|
|
7018
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7019
6612
|
margin-bottom: calc(var(--stack-gap-normal) * -1);
|
|
7020
6613
|
/* stylelint-disable-next-line primer/spacing */
|
|
7021
6614
|
margin-left: -56px;
|
|
@@ -7032,7 +6625,6 @@ select-panel dialog::backdrop {
|
|
|
7032
6625
|
}
|
|
7033
6626
|
|
|
7034
6627
|
.TimelineItem--condensed:last-child {
|
|
7035
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7036
6628
|
padding-bottom: var(--stack-gap-normal);
|
|
7037
6629
|
}
|
|
7038
6630
|
|
|
@@ -7044,7 +6636,6 @@ select-panel dialog::backdrop {
|
|
|
7044
6636
|
background-color: var(--bgColor-default);
|
|
7045
6637
|
border: 0;
|
|
7046
6638
|
}
|
|
7047
|
-
|
|
7048
6639
|
/* CSS truncate */
|
|
7049
6640
|
|
|
7050
6641
|
/* css-truncate will shorten text with an ellipsis. */
|
|
@@ -7068,9 +6659,7 @@ select-panel dialog::backdrop {
|
|
|
7068
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 {
|
|
7069
6660
|
max-width: 10000px !important;
|
|
7070
6661
|
}
|
|
7071
|
-
|
|
7072
6662
|
/* CSS for ActionBar */
|
|
7073
|
-
|
|
7074
6663
|
.ActionBar {
|
|
7075
6664
|
position: relative;
|
|
7076
6665
|
display: flex !important;
|
|
@@ -7113,26 +6702,21 @@ select-panel dialog::backdrop {
|
|
|
7113
6702
|
bottom: 50%;
|
|
7114
6703
|
float: left;
|
|
7115
6704
|
height: calc(var(--control-medium-size) / 2);
|
|
7116
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7117
6705
|
margin: 0 var(--controlStack-medium-gap-condensed);
|
|
7118
6706
|
border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
|
|
7119
6707
|
transform: translateY(-50%);
|
|
7120
6708
|
}
|
|
7121
6709
|
|
|
7122
6710
|
.ActionBar--small .ActionBar-divider {
|
|
7123
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7124
6711
|
margin: 0 var(--controlStack-small-gap-condensed);
|
|
7125
6712
|
}
|
|
7126
6713
|
|
|
7127
6714
|
.ActionBar--large .ActionBar-divider {
|
|
7128
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
7129
6715
|
margin: 0 var(--controlStack-large-gap-condensed);
|
|
7130
6716
|
}
|
|
7131
6717
|
|
|
7132
6718
|
/* OP specifics */
|
|
7133
|
-
|
|
7134
6719
|
/* stylelint-disable selector-max-type, selector-max-specificity */
|
|
7135
|
-
|
|
7136
6720
|
/* Type selectors are required for the avatar-fallback custom element wrapper.
|
|
7137
6721
|
Specificity overrides are needed to properly style nested avatar stacking. */
|
|
7138
6722
|
|
|
@@ -7171,7 +6755,6 @@ select-panel dialog::backdrop {
|
|
|
7171
6755
|
display: contents;
|
|
7172
6756
|
opacity: 1;
|
|
7173
6757
|
}
|
|
7174
|
-
|
|
7175
6758
|
/* OP PageHeader */
|
|
7176
6759
|
|
|
7177
6760
|
.PageHeader {
|
|
@@ -7215,13 +6798,13 @@ select-panel dialog::backdrop {
|
|
|
7215
6798
|
}
|
|
7216
6799
|
|
|
7217
6800
|
/* One-liner of supporting text */
|
|
7218
|
-
|
|
7219
6801
|
.PageHeader-description {
|
|
7220
6802
|
font-size: var(--text-body-size-medium);
|
|
7221
6803
|
color: var(--fgColor-muted);
|
|
7222
6804
|
flex: 1 auto;
|
|
7223
6805
|
}
|
|
7224
6806
|
|
|
6807
|
+
/* stylelint-disable-next-line selector-max-type -- description holds rich text; links can only be targeted by the `a` type selector */
|
|
7225
6808
|
.PageHeader-description--underlined-links a {
|
|
7226
6809
|
/* Ensure the accessibility is met, given that the description is written in light grey */
|
|
7227
6810
|
-webkit-text-decoration: underline;
|
|
@@ -7248,7 +6831,6 @@ select-panel dialog::backdrop {
|
|
|
7248
6831
|
}
|
|
7249
6832
|
|
|
7250
6833
|
/* OpenProject legacy form markup inside header actions: match Primer / dark theme */
|
|
7251
|
-
|
|
7252
6834
|
.PageHeader-actions .form--label {
|
|
7253
6835
|
color: var(--fgColor-muted);
|
|
7254
6836
|
min-width: 0;
|
|
@@ -7294,7 +6876,6 @@ select-panel dialog::backdrop {
|
|
|
7294
6876
|
}
|
|
7295
6877
|
|
|
7296
6878
|
/* Hide the context bar on desktop when no breadcrumb is visible */
|
|
7297
|
-
|
|
7298
6879
|
@media screen and (min-width: 543.98px) {
|
|
7299
6880
|
.PageHeader--noBreadcrumb .PageHeader-contextBar {
|
|
7300
6881
|
display: none;
|
|
@@ -7302,47 +6883,46 @@ select-panel dialog::backdrop {
|
|
|
7302
6883
|
}
|
|
7303
6884
|
|
|
7304
6885
|
/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
|
|
7305
|
-
|
|
7306
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 */
|
|
7307
6888
|
line-height: var(--control-small-size);
|
|
7308
6889
|
}
|
|
7309
|
-
|
|
7310
6890
|
.PageHeader--noBreadcrumb .PageHeader-actions {
|
|
7311
6891
|
height: var(--control-small-size);
|
|
7312
6892
|
}
|
|
7313
|
-
|
|
7314
6893
|
/* CSS for DragHandle */
|
|
7315
6894
|
|
|
7316
6895
|
.DragHandle {
|
|
7317
6896
|
cursor: move;
|
|
7318
6897
|
color: var(--fgColor-muted);
|
|
7319
6898
|
}
|
|
7320
|
-
|
|
7321
6899
|
/* CSS for BorderGrid */
|
|
7322
6900
|
|
|
7323
6901
|
.BorderGrid {
|
|
7324
6902
|
display: table;
|
|
7325
6903
|
width: 100%;
|
|
7326
|
-
margin-top: -
|
|
7327
|
-
margin-bottom: -
|
|
6904
|
+
margin-top: calc(-1 * var(--base-size-16));
|
|
6905
|
+
margin-bottom: calc(-1 * var(--base-size-16));
|
|
7328
6906
|
table-layout: fixed;
|
|
6907
|
+
/* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */
|
|
7329
6908
|
border-collapse: collapse;
|
|
6909
|
+
/* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */
|
|
7330
6910
|
border-style: hidden
|
|
7331
6911
|
}
|
|
7332
6912
|
|
|
7333
6913
|
.BorderGrid .BorderGrid-cell {
|
|
7334
|
-
padding-top:
|
|
7335
|
-
padding-bottom:
|
|
6914
|
+
padding-top: var(--base-size-16);
|
|
6915
|
+
padding-bottom: var(--base-size-16)
|
|
7336
6916
|
}
|
|
7337
6917
|
|
|
7338
6918
|
.BorderGrid--spacious {
|
|
7339
|
-
margin-top: -
|
|
7340
|
-
margin-bottom: -
|
|
6919
|
+
margin-top: calc(-1 * var(--base-size-24));
|
|
6920
|
+
margin-bottom: calc(-1 * var(--base-size-24))
|
|
7341
6921
|
}
|
|
7342
6922
|
|
|
7343
6923
|
.BorderGrid--spacious .BorderGrid-cell {
|
|
7344
|
-
padding-top:
|
|
7345
|
-
padding-bottom:
|
|
6924
|
+
padding-top: var(--base-size-24);
|
|
6925
|
+
padding-bottom: var(--base-size-24)
|
|
7346
6926
|
}
|
|
7347
6927
|
|
|
7348
6928
|
.BorderGrid-row {
|
|
@@ -7351,37 +6931,29 @@ select-panel dialog::backdrop {
|
|
|
7351
6931
|
|
|
7352
6932
|
.BorderGrid-cell {
|
|
7353
6933
|
display: table-cell;
|
|
7354
|
-
border:
|
|
6934
|
+
border: var(--borderWidth-thin) solid var(--borderColor-muted)
|
|
7355
6935
|
}
|
|
7356
|
-
|
|
7357
6936
|
.InputGroup.InputGroup-input-width--auto {
|
|
7358
6937
|
width: auto;
|
|
7359
6938
|
}
|
|
7360
|
-
|
|
7361
6939
|
.InputGroup.InputGroup-input-width--xsmall {
|
|
7362
6940
|
max-width: min(144px, 100vw - 2rem);
|
|
7363
6941
|
}
|
|
7364
|
-
|
|
7365
6942
|
.InputGroup.InputGroup-input-width--small {
|
|
7366
6943
|
max-width: min(256px, 100vw - 2rem);
|
|
7367
6944
|
}
|
|
7368
|
-
|
|
7369
6945
|
.InputGroup.InputGroup-input-width--medium {
|
|
7370
6946
|
max-width: min(320px, 100vw - 2rem);
|
|
7371
6947
|
}
|
|
7372
|
-
|
|
7373
6948
|
.InputGroup.InputGroup-input-width--large {
|
|
7374
6949
|
max-width: min(480px, 100vw - 2rem);
|
|
7375
6950
|
}
|
|
7376
|
-
|
|
7377
6951
|
.InputGroup.InputGroup-input-width--xlarge {
|
|
7378
6952
|
max-width: min(680px, 100vw - 2rem);
|
|
7379
6953
|
}
|
|
7380
|
-
|
|
7381
6954
|
.InputGroup.InputGroup-input-width--xxlarge {
|
|
7382
6955
|
max-width: min(960px, 100vw - 2rem);
|
|
7383
6956
|
}
|
|
7384
|
-
|
|
7385
6957
|
.InlineMessage {
|
|
7386
6958
|
display: grid;
|
|
7387
6959
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -7394,29 +6966,23 @@ select-panel dialog::backdrop {
|
|
|
7394
6966
|
grid-template-columns: auto 1fr;
|
|
7395
6967
|
align-items: start;
|
|
7396
6968
|
}
|
|
7397
|
-
|
|
7398
6969
|
.InlineMessage[data-size='small'] {
|
|
7399
6970
|
--inline-message-fontSize: var(--text-body-size-small);
|
|
7400
6971
|
--inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
|
|
7401
6972
|
}
|
|
7402
|
-
|
|
7403
6973
|
.InlineMessage[data-size='medium'] {
|
|
7404
6974
|
--inline-message-fontSize: var(--text-body-size-medium);
|
|
7405
6975
|
--inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
|
|
7406
6976
|
}
|
|
7407
|
-
|
|
7408
6977
|
.InlineMessage[data-variant='warning'] {
|
|
7409
6978
|
--inline-message-fgColor: var(--fgColor-attention);
|
|
7410
6979
|
}
|
|
7411
|
-
|
|
7412
6980
|
.InlineMessage[data-variant='critical'] {
|
|
7413
6981
|
--inline-message-fgColor: var(--fgColor-danger);
|
|
7414
6982
|
}
|
|
7415
|
-
|
|
7416
6983
|
.InlineMessage[data-variant='success'] {
|
|
7417
6984
|
--inline-message-fgColor: var(--fgColor-success);
|
|
7418
6985
|
}
|
|
7419
|
-
|
|
7420
6986
|
.InlineMessage[data-variant='unavailable'] {
|
|
7421
6987
|
--inline-message-fgColor: var(--fgColor-muted);
|
|
7422
6988
|
}
|
|
@@ -7424,7 +6990,6 @@ select-panel dialog::backdrop {
|
|
|
7424
6990
|
.InlineMessageIcon {
|
|
7425
6991
|
min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
|
|
7426
6992
|
}
|
|
7427
|
-
|
|
7428
6993
|
/* CSS for SubHeader */
|
|
7429
6994
|
|
|
7430
6995
|
.SubHeader {
|
|
@@ -7513,18 +7078,17 @@ select-panel dialog::backdrop {
|
|
|
7513
7078
|
margin-top: var(--base-size-16);
|
|
7514
7079
|
}
|
|
7515
7080
|
}
|
|
7516
|
-
|
|
7517
7081
|
/* CSS for OpenProject::SidePanel::Section */
|
|
7518
7082
|
|
|
7519
7083
|
.SidePanel-sectionHeader {
|
|
7520
7084
|
display: flex;
|
|
7521
7085
|
align-items: center;
|
|
7522
7086
|
height: 32px;
|
|
7523
|
-
margin-bottom:
|
|
7087
|
+
margin-bottom: var(--base-size-8);
|
|
7524
7088
|
}
|
|
7525
7089
|
|
|
7526
7090
|
.SidePanel-sectionCounter {
|
|
7527
|
-
margin-left:
|
|
7091
|
+
margin-left: var(--base-size-8);
|
|
7528
7092
|
}
|
|
7529
7093
|
|
|
7530
7094
|
.SidePanel-sectionAction {
|
|
@@ -7539,11 +7103,12 @@ select-panel dialog::backdrop {
|
|
|
7539
7103
|
}
|
|
7540
7104
|
|
|
7541
7105
|
:is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child) {
|
|
7542
|
-
margin-bottom:
|
|
7106
|
+
margin-bottom: var(--base-size-16);
|
|
7543
7107
|
}
|
|
7544
|
-
|
|
7545
7108
|
/* CSS for BorderBox::CollapsibleHeader */
|
|
7546
7109
|
|
|
7110
|
+
/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
|
|
7111
|
+
|
|
7547
7112
|
.CollapsibleHeader {
|
|
7548
7113
|
display: block;
|
|
7549
7114
|
container-name: collapsible-header-container;
|
|
@@ -7602,7 +7167,7 @@ select-panel dialog::backdrop {
|
|
|
7602
7167
|
|
|
7603
7168
|
.CollapsibleHeader--multi-line .CollapsibleHeader-description {
|
|
7604
7169
|
overflow: visible;
|
|
7605
|
-
text-overflow:
|
|
7170
|
+
text-overflow: clip;
|
|
7606
7171
|
white-space: normal;
|
|
7607
7172
|
width: 100%;
|
|
7608
7173
|
}
|
|
@@ -7625,12 +7190,12 @@ select-panel dialog::backdrop {
|
|
|
7625
7190
|
-webkit-user-select: text;
|
|
7626
7191
|
user-select: text;
|
|
7627
7192
|
}
|
|
7628
|
-
|
|
7629
7193
|
/* CSS for CollapsibleSection */
|
|
7630
7194
|
|
|
7631
7195
|
.CollapsibleSection--triggerArea {
|
|
7632
7196
|
cursor: pointer;
|
|
7633
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 */
|
|
7634
7199
|
|
|
7635
7200
|
.Page {
|
|
7636
7201
|
min-width: var(--base-size-32);
|
|
@@ -7641,7 +7206,7 @@ select-panel dialog::backdrop {
|
|
|
7641
7206
|
white-space: nowrap;
|
|
7642
7207
|
vertical-align: middle;
|
|
7643
7208
|
cursor: pointer;
|
|
7644
|
-
border-radius: var(--borderRadius-medium
|
|
7209
|
+
border-radius: var(--borderRadius-medium);
|
|
7645
7210
|
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
7646
7211
|
display: inline-flex;
|
|
7647
7212
|
align-items: center;
|
|
@@ -7697,6 +7262,7 @@ select-panel dialog::backdrop {
|
|
|
7697
7262
|
|
|
7698
7263
|
.Page[aria-current]:focus-visible {
|
|
7699
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 */
|
|
7700
7266
|
box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
|
|
7701
7267
|
}
|
|
7702
7268
|
|
|
@@ -7719,7 +7285,6 @@ select-panel dialog::backdrop {
|
|
|
7719
7285
|
display: none;
|
|
7720
7286
|
}
|
|
7721
7287
|
}
|
|
7722
|
-
|
|
7723
7288
|
/* CSS for FilterableTreeView */
|
|
7724
7289
|
|
|
7725
7290
|
/* Scroll layout
|
|
@@ -7732,7 +7297,6 @@ select-panel dialog::backdrop {
|
|
|
7732
7297
|
*/
|
|
7733
7298
|
|
|
7734
7299
|
/* stylelint-disable-next-line selector-max-type */
|
|
7735
|
-
|
|
7736
7300
|
filterable-tree-view {
|
|
7737
7301
|
display: flex;
|
|
7738
7302
|
flex-direction: column;
|
|
@@ -7752,30 +7316,26 @@ filterable-tree-view {
|
|
|
7752
7316
|
}
|
|
7753
7317
|
|
|
7754
7318
|
/* Highlight style for CSS Custom Highlight API */
|
|
7755
|
-
|
|
7756
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 */
|
|
7757
7321
|
background-color: var(--display-yellow-scale-2);
|
|
7758
7322
|
}
|
|
7759
7323
|
|
|
7760
7324
|
/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
|
|
7761
|
-
|
|
7762
7325
|
/* stylelint-disable-next-line selector-max-type */
|
|
7763
|
-
|
|
7764
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 */
|
|
7765
7328
|
background-color: var(--display-yellow-scale-2);
|
|
7766
7329
|
color: inherit;
|
|
7767
7330
|
}
|
|
7768
7331
|
|
|
7769
7332
|
/* Loading skeleton */
|
|
7770
|
-
|
|
7771
7333
|
.FilterableTreeViewLoadingSkeleton {
|
|
7772
7334
|
display: none;
|
|
7773
7335
|
}
|
|
7774
7336
|
|
|
7775
7337
|
/* stylelint-disable selector-no-qualifying-type */
|
|
7776
|
-
|
|
7777
7338
|
/* stylelint-disable selector-max-type */
|
|
7778
|
-
|
|
7779
7339
|
filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
|
|
7780
7340
|
display: block;
|
|
7781
7341
|
}
|