primer_view_components 0.51.4 → 0.51.6

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.
Files changed (99) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.css +1 -1
  8. data/app/components/primer/alpha/action_bar.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +4 -10
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/auto_complete.css +1 -1
  13. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/button_marketing.css +1 -1
  17. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  18. data/app/components/primer/alpha/dialog.css +1 -1
  19. data/app/components/primer/alpha/dialog.css.json +2 -1
  20. data/app/components/primer/alpha/dialog.css.map +1 -1
  21. data/app/components/primer/alpha/dialog.pcss +4 -1
  22. data/app/components/primer/alpha/dropdown.css +1 -1
  23. data/app/components/primer/alpha/dropdown.css.map +1 -1
  24. data/app/components/primer/alpha/dropdown.pcss +8 -12
  25. data/app/components/primer/alpha/layout.css +1 -1
  26. data/app/components/primer/alpha/layout.css.json +10 -14
  27. data/app/components/primer/alpha/layout.css.map +1 -1
  28. data/app/components/primer/alpha/menu.css +1 -1
  29. data/app/components/primer/alpha/menu.css.map +1 -1
  30. data/app/components/primer/alpha/overlay.css +1 -1
  31. data/app/components/primer/alpha/overlay.css.map +1 -1
  32. data/app/components/primer/alpha/segmented_control.css +1 -1
  33. data/app/components/primer/alpha/segmented_control.css.json +1 -2
  34. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  35. data/app/components/primer/alpha/select_panel.css +1 -1
  36. data/app/components/primer/alpha/select_panel.css.map +1 -1
  37. data/app/components/primer/alpha/skeleton_box.css +1 -1
  38. data/app/components/primer/alpha/skeleton_box.css.map +1 -1
  39. data/app/components/primer/alpha/stack.css +1 -1
  40. data/app/components/primer/alpha/stack.css.map +1 -1
  41. data/app/components/primer/alpha/tab_nav.css +1 -1
  42. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  43. data/app/components/primer/alpha/text_field.css +1 -1
  44. data/app/components/primer/alpha/text_field.css.json +1 -2
  45. data/app/components/primer/alpha/text_field.css.map +1 -1
  46. data/app/components/primer/alpha/toggle_switch.css +1 -1
  47. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  48. data/app/components/primer/alpha/tree_view/sub_tree_node.rb +1 -1
  49. data/app/components/primer/alpha/tree_view/visual.rb +1 -1
  50. data/app/components/primer/alpha/tree_view.css +1 -1
  51. data/app/components/primer/alpha/tree_view.css.json +1 -2
  52. data/app/components/primer/alpha/tree_view.css.map +1 -1
  53. data/app/components/primer/alpha/underline_nav.css +1 -1
  54. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  55. data/app/components/primer/beta/avatar.css +1 -1
  56. data/app/components/primer/beta/avatar.css.map +1 -1
  57. data/app/components/primer/beta/avatar_stack.css +1 -1
  58. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  59. data/app/components/primer/beta/blankslate.css +1 -1
  60. data/app/components/primer/beta/blankslate.css.map +1 -1
  61. data/app/components/primer/beta/border_box.css +1 -1
  62. data/app/components/primer/beta/border_box.css.map +1 -1
  63. data/app/components/primer/beta/breadcrumbs.css +1 -1
  64. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  65. data/app/components/primer/beta/button.css +1 -1
  66. data/app/components/primer/beta/button.css.map +1 -1
  67. data/app/components/primer/beta/button_group.css +1 -1
  68. data/app/components/primer/beta/button_group.css.map +1 -1
  69. data/app/components/primer/beta/button_group.rb +1 -1
  70. data/app/components/primer/beta/counter.css +1 -1
  71. data/app/components/primer/beta/counter.css.map +1 -1
  72. data/app/components/primer/beta/flash.css +1 -1
  73. data/app/components/primer/beta/flash.css.map +1 -1
  74. data/app/components/primer/beta/label.css +1 -1
  75. data/app/components/primer/beta/label.css.map +1 -1
  76. data/app/components/primer/beta/link.css +1 -1
  77. data/app/components/primer/beta/link.css.map +1 -1
  78. data/app/components/primer/beta/popover.css +1 -1
  79. data/app/components/primer/beta/popover.css.map +1 -1
  80. data/app/components/primer/beta/progress_bar.css +1 -1
  81. data/app/components/primer/beta/progress_bar.css.map +1 -1
  82. data/app/components/primer/beta/state.css +1 -1
  83. data/app/components/primer/beta/state.css.map +1 -1
  84. data/app/components/primer/beta/subhead.css +1 -1
  85. data/app/components/primer/beta/subhead.css.map +1 -1
  86. data/app/components/primer/beta/timeline_item.css +1 -1
  87. data/app/components/primer/beta/timeline_item.css.map +1 -1
  88. data/app/components/primer/beta/truncate.css +1 -1
  89. data/app/components/primer/beta/truncate.css.map +1 -1
  90. data/app/components/primer/dialog_helper.js +10 -1
  91. data/app/components/primer/dialog_helper.ts +16 -1
  92. data/app/lib/primer/forms/acts_as_component.rb +1 -1
  93. data/app/lib/primer/forms/toggle_switch_form.rb +1 -1
  94. data/lib/primer/form_components.rb +1 -1
  95. data/lib/primer/view_components/version.rb +1 -1
  96. data/previews/primer/alpha/dropdown_preview.rb +12 -0
  97. data/static/info_arch.json +6 -6
  98. data/static/previews.json +6 -6
  99. metadata +2 -2
data/app/components/primer/alpha/action_bar.css CHANGED
@@ -1 +1 @@
1
- .ActionBar{align-items:center;box-sizing:initial;display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size)*3);overflow:hidden;position:relative}.ActionBar-item-container{box-sizing:initial;height:var(--control-medium-size);overflow:hidden}.ActionBar-item{float:left;position:relative}.ActionBar-more-menu{float:left}.ActionBar--small{min-width:calc(var(--control-small-size)*3)}.ActionBar--large{min-width:calc(var(--control-large-size)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin) solid var(--borderColor-muted);bottom:50%;float:left;height:calc(var(--control-medium-size)/2);margin:0 var(--controlStack-medium-gap-condensed);top:50%;transform:translateY(-50%)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed)}
1
+ .ActionBar{position:relative;display:flex!important;min-width:calc(var(--control-medium-size)*3);align-items:center;flex-grow:1;flex-shrink:1;box-sizing:initial;overflow:hidden;justify-content:flex-end}.ActionBar-item-container{height:var(--control-medium-size);box-sizing:initial;overflow:hidden}.ActionBar-item{position:relative;float:left}.ActionBar-more-menu{float:left}.ActionBar--small{min-width:calc(var(--control-small-size)*3)}.ActionBar--large{min-width:calc(var(--control-large-size)*3)}.ActionBar-divider{top:50%;bottom:50%;float:left;height:calc(var(--control-medium-size)/2);margin:0 var(--controlStack-medium-gap-condensed);border-left:var(--borderWidth-thin) solid var(--borderColor-muted);transform:translateY(-50%)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed)}
data/app/components/primer/alpha/action_bar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAIE,kBAAmB,CAGnB,kBAAuB,CALvB,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,4CAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,0BAEE,kBAAuB,CADvB,iCAAkC,CAElC,eACF,CAEA,gBAEE,UAAW,CADX,iBAEF,CAEA,qBACE,UACF,CAEA,kBACE,2CACF,CAEA,kBACE,2CACF,CAIA,mBAOE,kEAAmE,CALnE,UAAW,CACX,UAAW,CACX,yCAA4C,CAE5C,iDAAkD,CALlD,OAAQ,CAOR,0BACF,CAEA,qCAEE,gDACF,CAEA,qCAEE,gDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar */\n.ActionBar {\n position: relative;\n display: flex !important;\n min-width: calc(var(--control-medium-size) * 3);\n align-items: center;\n flex-grow: 1;\n flex-shrink: 1;\n box-sizing: content-box;\n overflow: hidden;\n justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n height: var(--control-medium-size);\n box-sizing: content-box;\n overflow: hidden;\n}\n\n.ActionBar-item {\n position: relative;\n float: left;\n}\n\n.ActionBar-more-menu {\n float: left;\n}\n\n.ActionBar--small {\n min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n top: 50%;\n bottom: 50%;\n float: left;\n height: calc(var(--control-medium-size) / 2);\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-medium-gap-condensed);\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
1
+ {"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WACE,iBAAkB,CAClB,sBAAwB,CACxB,4CAA+C,CAC/C,kBAAmB,CACnB,WAAY,CACZ,aAAc,CACd,kBAAuB,CACvB,eAAgB,CAChB,wBACF,CAEA,0BACE,iCAAkC,CAClC,kBAAuB,CACvB,eACF,CAEA,gBACE,iBAAkB,CAClB,UACF,CAEA,qBACE,UACF,CAEA,kBACE,2CACF,CAEA,kBACE,2CACF,CAIA,mBACE,OAAQ,CACR,UAAW,CACX,UAAW,CACX,yCAA4C,CAE5C,iDAAkD,CAClD,kEAAmE,CACnE,0BACF,CAEA,qCAEE,gDACF,CAEA,qCAEE,gDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar */\n.ActionBar {\n position: relative;\n display: flex !important;\n min-width: calc(var(--control-medium-size) * 3);\n align-items: center;\n flex-grow: 1;\n flex-shrink: 1;\n box-sizing: content-box;\n overflow: hidden;\n justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n height: var(--control-medium-size);\n box-sizing: content-box;\n overflow: hidden;\n}\n\n.ActionBar-item {\n position: relative;\n float: left;\n}\n\n.ActionBar-more-menu {\n float: left;\n}\n\n.ActionBar--small {\n min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n top: 50%;\n bottom: 50%;\n float: left;\n height: calc(var(--control-medium-size) / 2);\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-medium-gap-condensed);\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
data/app/components/primer/alpha/action_list.css CHANGED
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock)}action-list,nav-list{display:block}.ActionListHeader{margin-bottom:var(--base-size-16);margin-left:var(--base-size-8)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{background:var(--borderColor-muted);content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{height:var(--borderWidth-thin)}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);border-radius:var(--borderRadius-medium);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover)}}:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--control-transparent-bgColor-active)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);font-weight:var(--base-text-weight-normal)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-4)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label{color:var(--control-fgColor-disabled)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]):hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active{background:var(--control-danger-bgColor-active)}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-webkit-tap-highlight-color:transparent;align-items:start;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}:is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-24)}:is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-32)}:is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-36)}:is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-40)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark{visibility:visible}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8);position:relative}.ActionListItem-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-small)}.ActionListItem-action,.ActionListItem-visual{align-items:center;color:var(--fgColor-muted);display:flex;fill:var(--fgColor-muted);min-height:var(--base-size-20);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-normal);grid-area:label;line-height:var(--text-body-lineHeight-medium);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small);line-height:var(--text-body-lineHeight-small)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted);display:flex;flex-direction:column;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-small);padding-block:var(--base-size-8);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted);border:0;display:block;height:var(--borderWidth-thin);list-style:none;margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{align-self:flex-start;color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted);border-bottom:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock)}action-list,nav-list{display:block}.ActionListHeader{margin-bottom:var(--base-size-16);margin-left:var(--base-size-8)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);display:block;width:100%;content:"";background:var(--borderColor-muted)}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{height:var(--borderWidth-thin)}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{position:relative;list-style:none;background-color:var(--control-transparent-bgColor-rest);border-radius:var(--borderRadius-medium)}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover)}}:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{cursor:pointer;background-color:var(--control-transparent-bgColor-hover)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1);box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--control-transparent-bgColor-active)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1);box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{font-weight:var(--base-text-weight-normal);background:var(--control-transparent-bgColor-selected)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{position:absolute;top:calc(50% - 12px);left:calc(var(--base-size-4)*-1);width:var(--base-size-4);height:var(--base-size-24);content:"";background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{position:absolute;top:calc(50% - 12px);left:calc(var(--base-size-8)*-1);width:var(--base-size-4);height:var(--base-size-24);content:"";background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) :is(.ActionListItem-description,.ActionListItem-label){color:var(--control-fgColor-disabled)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]):hover{cursor:not-allowed;background-color:initial}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover)}.ActionListItem.ActionListItem--danger:hover :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual){color:var(--control-danger-fgColor-hover)}}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active{background:var(--control-danger-bgColor-active)}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual){color:var(--control-danger-fgColor-hover)}.ActionListContent{position:relative;display:grid;width:100%;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed);color:var(--control-fgColor-rest);text-align:left;-webkit-user-select:none;user-select:none;background-color:initial;border:none;border-radius:var(--borderRadius-medium);transition:background 33.333ms linear;touch-action:manipulation;-webkit-tap-highlight-color:transparent;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;align-items:start}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] :is(.ActionListItem-description,.ActionListItem-label){color:var(--control-fgColor-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{cursor:not-allowed;background-color:initial}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}:is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-24)}:is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-32)}:is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-36)}:is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-40)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transition:transform .12s linear;transform:scaleY(-1)}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transition:transform .12s linear;transform:scaleY(1)}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(calc(var(--base-size-16)*-1))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{position:absolute;top:calc(50% - 12px);left:calc(var(--base-size-8)*-1);width:var(--base-size-4);height:var(--base-size-24);content:"";background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium)}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark{visibility:visible}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear .2s}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{grid-area:label;display:flex;flex-direction:column;gap:var(--base-size-4)}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem-descriptionWrap--inline{position:relative;flex-direction:row;align-items:baseline;gap:var(--base-size-8)}.ActionListItem-description{font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-small);color:var(--fgColor-muted)}.ActionListItem-action,.ActionListItem-visual{display:flex;min-height:var(--base-size-20);color:var(--fgColor-muted);pointer-events:none;fill:var(--fgColor-muted);align-items:center}.ActionListItem-label{position:relative;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-medium);color:var(--fgColor-default);grid-area:label}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small);line-height:var(--text-body-lineHeight-small)}.ActionListItem--withActions{display:flex;flex-wrap:nowrap;align-items:center}.ActionListItem-trailingAction{border-top-left-radius:0;border-bottom-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){display:flex;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-small);color:var(--fgColor-muted);flex-direction:column;padding-inline:var(--actionListContent-paddingBlock);padding-block:var(--base-size-8)}.ActionList-sectionDivider:empty{display:block;height:var(--borderWidth-thin);padding:0;margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-block-end:var(--base-size-8);margin-inline:calc(var(--base-size-8)*-1);list-style:none;background:var(--borderColor-muted);border:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);color:var(--fgColor-muted);align-self:flex-start}.ActionList-sectionDivider--filled{margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-block-end:var(--base-size-8);margin-inline:calc(var(--base-size-8)*-1);background:var(--bgColor-muted);border-top:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-bottom:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider))}.ActionList-sectionDivider--filled:empty{height:var(--base-size-8);box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
data/app/components/primer/alpha/action_list.css.json CHANGED
@@ -46,25 +46,19 @@
46
46
  ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
47
47
  ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
48
48
  ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
49
- ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description",
50
- ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label",
49
+ ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) :is(.ActionListItem-description,.ActionListItem-label)",
51
50
  ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual",
52
51
  ":is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]):hover",
53
52
  ".ActionListItem.ActionListItem--danger .ActionListItem-label",
54
53
  ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
55
54
  ".ActionListItem.ActionListItem--danger:hover",
56
- ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
57
- ".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
58
- ".ActionListItem.ActionListItem--danger:hover .ActionListItem-visual",
55
+ ".ActionListItem.ActionListItem--danger:hover :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual)",
59
56
  ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active",
60
- ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description",
61
- ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label",
62
- ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual",
57
+ ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual)",
63
58
  ".ActionListContent",
64
59
  ".ActionListContent>:not(:last-child)",
65
60
  ".ActionListContent:hover",
66
- ".ActionListContent[aria-disabled=true] .ActionListItem-description",
67
- ".ActionListContent[aria-disabled=true] .ActionListItem-label",
61
+ ".ActionListContent[aria-disabled=true] :is(.ActionListItem-description,.ActionListItem-label)",
68
62
  ".ActionListContent[aria-disabled=true] .ActionListItem-visual",
69
63
  ".ActionListContent[aria-disabled=true]:hover",
70
64
  ".ActionListContent[aria-expanded]+.ActionList--subGroup",
data/app/components/primer/alpha/action_list.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-bottom: var(--base-size-16);\n margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--actionListContent-paddingBlock);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition:\n opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--base-size-20);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n flex-direction: column;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n align-self: flex-start;\n }\n}\n\n.ActionList-sectionDivider--filled {\n /* stylelint-disable-next-line primer/spacing */\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
1
+ {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-bottom: var(--base-size-16);\n margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--actionListContent-paddingBlock);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition:\n opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--base-size-20);\n color: var(--fgColor-muted);\n pointer-events: none;\n fill: var(--fgColor-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n flex-direction: column;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n align-self: flex-start;\n }\n}\n\n.ActionList-sectionDivider--filled {\n /* stylelint-disable-next-line primer/spacing */\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
data/app/components/primer/alpha/auto_complete.css CHANGED
@@ -1 +1 @@
1
- .autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:var(--base-size-4) var(--base-size-8)}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:var(--base-size-8);padding:0}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium);font-size:var(--text-codeBlock-size);left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor);border:0;color:var(--fgColor-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold);overflow:hidden;padding:var(--base-size-4) var(--base-size-8);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item,.autocomplete-item:hover{-webkit-text-decoration:none;text-decoration:none}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis)}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}:is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *{color:inherit!important}
1
+ .autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{position:relative;display:inline}.autocomplete-embedded-icon-wrap{display:inline-flex;padding:var(--base-size-4) var(--base-size-8);align-items:center}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor)}.autocomplete-embedded-icon-wrap .form-control{padding:0;margin-left:var(--base-size-8);border:none;box-shadow:none}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{position:absolute;left:0;z-index:99;width:max-content;min-width:100%;max-height:20em;overflow-y:auto;font-size:var(--text-codeBlock-size);list-style:none;background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium)}.autocomplete-item{display:block;width:100%;padding:var(--base-size-4) var(--base-size-8);overflow:hidden;font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item,.autocomplete-item:hover{-webkit-text-decoration:none;text-decoration:none}.autocomplete-item:hover{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-accent-emphasis)}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}:is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *{color:inherit!important}
data/app/components/primer/alpha/auto_complete.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,gCACF,CAGA,2BACE,cAAe,CACf,+BACF,CAGA,4BACE,2BACE,aAAc,CACd,gCACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,6CAuBF,CApBE,8CCnCA,sCAAuC,CAEvC,oDAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,8BAA+B,CAD/B,SAYF,CAHE,4HACE,eACF,CAKJ,sBAUE,iCAAkC,CAClC,+DAAgE,CAChE,wCAAyC,CACzC,uCAAwC,CALxC,oCAAqC,CANrC,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,uCAAwC,CACxC,QAAS,CAPT,4BAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,4CAA6C,CAD7C,eAAgB,CADhB,6CAA8C,CAI9C,eAAgB,CAEhB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,4CAPA,4BAAqB,CAArB,oBAgBA,CATA,yBAGE,+CAAgD,CAFhD,+BAQF,CAHE,2BACE,uBACF,CAGF,uGAKE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAOF,CAHE,8GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n display: block;\n margin-bottom: var(--base-size-6);\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n display: inline;\n margin-right: var(--base-size-6);\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n .autocomplete-label-inline {\n display: block;\n margin-bottom: var(--base-size-6);\n }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n position: relative;\n display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n display: inline-flex;\n padding: var(--base-size-4) var(--base-size-8);\n align-items: center;\n\n &:focus-within {\n border-color: var(--borderColor-accent-emphasis);\n\n @mixin focusBoxShadowInset;\n }\n\n & .form-control {\n padding: 0;\n margin-left: var(--base-size-8);\n border: none;\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n\n &:focus-visible {\n box-shadow: none;\n }\n }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n position: absolute;\n left: 0;\n z-index: 99;\n width: max-content;\n min-width: 100%;\n max-height: 20em;\n overflow-y: auto;\n font-size: var(--text-codeBlock-size);\n list-style: none;\n background: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n display: block;\n width: 100%;\n padding: var(--base-size-4) var(--base-size-8);\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n text-align: left;\n text-decoration: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--overlay-bgColor);\n border: 0;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n\n &.selected,\n &[aria-selected='true'],\n &.navigation-focus {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
1
+ {"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,gCACF,CAGA,2BACE,cAAe,CACf,+BACF,CAGA,4BACE,2BACE,aAAc,CACd,gCACF,CACF,CAGA,mBACE,iBAAkB,CAClB,cACF,CAGA,iCACE,mBAAoB,CACpB,6CAA8C,CAC9C,kBAsBF,CApBE,8CCnCA,sCAAuC,CACvC,YAAa,CACb,oDDqCA,CAEA,+CACE,SAAU,CACV,8BAA+B,CAC/B,WAAY,CACZ,eASF,CAHE,4HACE,eACF,CAKJ,sBACE,iBAAkB,CAClB,MAAO,CACP,UAAW,CACX,iBAAkB,CAClB,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,oCAAqC,CACrC,eAAgB,CAChB,iCAAkC,CAClC,+DAAgE,CAChE,wCAAyC,CACzC,uCACF,CAKA,mBACE,aAAc,CACd,UAAW,CACX,6CAA8C,CAC9C,eAAgB,CAChB,4CAA6C,CAC7C,4BAA6B,CAC7B,eAAgB,CAEhB,sBAAuB,CACvB,kBAAmB,CACnB,cAAe,CACf,uCAAwC,CACxC,QAyBF,CAvBE,4CAPA,4BAAqB,CAArB,oBAgBA,CATA,yBACE,+BAAgC,CAEhC,+CAMF,CAHE,2BACE,uBACF,CAGF,uGAGE,+BAAgC,CAChC,4BAAqB,CAArB,oBAAqB,CACrB,+CAMF,CAHE,8GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n display: block;\n margin-bottom: var(--base-size-6);\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n display: inline;\n margin-right: var(--base-size-6);\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n .autocomplete-label-inline {\n display: block;\n margin-bottom: var(--base-size-6);\n }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n position: relative;\n display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n display: inline-flex;\n padding: var(--base-size-4) var(--base-size-8);\n align-items: center;\n\n &:focus-within {\n border-color: var(--borderColor-accent-emphasis);\n\n @mixin focusBoxShadowInset;\n }\n\n & .form-control {\n padding: 0;\n margin-left: var(--base-size-8);\n border: none;\n box-shadow: none;\n\n &:focus {\n box-shadow: none;\n }\n\n &:focus-visible {\n box-shadow: none;\n }\n }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n position: absolute;\n left: 0;\n z-index: 99;\n width: max-content;\n min-width: 100%;\n max-height: 20em;\n overflow-y: auto;\n font-size: var(--text-codeBlock-size);\n list-style: none;\n background: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n display: block;\n width: 100%;\n padding: var(--base-size-4) var(--base-size-8);\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n text-align: left;\n text-decoration: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--overlay-bgColor);\n border: 0;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n\n &.selected,\n &[aria-selected='true'],\n &.navigation-focus {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n /* Inherit color on all child elements to ensure enough contrast */\n & * {\n color: inherit !important;\n }\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
data/app/components/primer/alpha/banner.css CHANGED
@@ -1 +1 @@
1
- .Banner{background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border:var(--borderWidth-thin) solid var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8);position:relative}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8) 0 0 var(--base-size-8)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-visual)>.octicon{margin-block:calc(var(--base-size-4)/2)}:is(.Banner .Banner-visual)>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-message) p:last-child{margin-bottom:0}:is(.Banner .Banner-message) .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}:is(.Banner .Banner-actions):last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent)}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention)}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger)}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success)}.Banner.Banner--upsell{background-image:linear-gradient(var(--bgColor-done-muted),var(--bgColor-done-muted));border-color:var(--borderColor-done-muted);color:var(--fgColor-default)}.Banner.Banner--upsell .Banner-visual .octicon{color:var(--fgColor-done)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}}
1
+ .Banner{position:relative;display:grid;padding:var(--base-size-8);color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border:var(--borderWidth-thin) solid var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content}@media (max-width:543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8) 0 0 var(--base-size-8)}}.Banner .Banner-visual{display:grid;padding:var(--base-size-6) var(--base-size-8);grid-area:visual;align-self:start}:is(.Banner .Banner-visual)>.octicon{margin-block:calc(var(--base-size-4)/2)}:is(.Banner .Banner-visual)>*{align-self:center}.Banner .Banner-message{padding:var(--base-size-6) var(--base-size-8);grid-area:message;align-self:center}:is(.Banner .Banner-message) p:last-child{margin-bottom:0}:is(.Banner .Banner-message) .Banner-title:not(:only-child){margin-bottom:0;font-weight:var(--base-text-weight-semibold)}.Banner .Banner-actions{grid-area:actions}:is(.Banner .Banner-actions):last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent)}.Banner.Banner--warning{color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention)}.Banner.Banner--error{color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted)}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger)}.Banner.Banner--success{color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted)}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success)}.Banner.Banner--upsell{color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-done-muted),var(--bgColor-done-muted));border-color:var(--borderColor-done-muted)}.Banner.Banner--upsell .Banner-visual .octicon{color:var(--fgColor-done)}.Banner.Banner--full{margin-top:calc(var(--borderWidth-thin)*-1);border-right:0;border-left:0;border-radius:0}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{margin-top:calc(var(--borderWidth-thin)*-1);border-right:0;border-left:0;border-radius:0}}
data/app/components/primer/alpha/banner.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,yFAA2F,CAC3F,oEAAqE,CACrE,wCAAyC,CAHzC,4BAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,0BAA2B,CAF3B,iBAwIF,CA3HE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAsHJ,CApHI,wBACE,gDACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,6CAWF,CAPE,qCACE,uCACF,CAEA,8BACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,6CAaF,CARE,0CACE,eACF,CAEA,4DAEE,4CAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,wCACE,iBACF,CAIF,sBACE,eAAgB,CAEhB,oDACF,CAEA,gCACE,2BACF,CAEA,wBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,gDACE,8BACF,CAGF,sBAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,8CACE,2BACF,CAGF,wBAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,gDACE,4BACF,CAGF,uBAEE,qFAAuF,CACvF,0CAA2C,CAF3C,4BAOF,CAHE,+CACE,yBACF,CAKF,qBAIE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,2CAIF,CAEA,4BACE,gCAIE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,2CAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8);\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n border-radius: var(--borderRadius-medium);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variation */\n @media (max-width: 543.98px) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8) 0 0 var(--base-size-8);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: message;\n align-self: center;\n\n /* stylelint-disable-next-line selector-max-type */\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--controlStack-medium-gap-condensed);\n }\n\n & .Banner-visual .octicon {\n color: var(--fgColor-accent);\n }\n\n &.Banner--warning {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-attention);\n }\n }\n\n &.Banner--error {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-danger);\n }\n }\n\n &.Banner--success {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-success);\n }\n }\n\n &.Banner--upsell {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));\n border-color: var(--borderColor-done-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-done);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (max-width: 767.98px) {\n &.Banner--full-whenNarrow {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QACE,iBAAkB,CAClB,YAAa,CACb,0BAA2B,CAC3B,4BAA6B,CAC7B,yFAA2F,CAC3F,oEAAqE,CACrE,wCAAyC,CACzC,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BA8HF,CA3HE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAsHJ,CApHI,wBACE,gDACF,CACF,CAIA,uBACE,YAAa,CACb,6CAA8C,CAC9C,gBAAiB,CACjB,gBASF,CAPE,qCACE,uCACF,CAEA,8BACE,iBACF,CAGF,wBACE,6CAA8C,CAC9C,iBAAkB,CAClB,iBAWF,CARE,0CACE,eACF,CAEA,4DACE,eAAgB,CAChB,4CACF,CAGF,wBACE,iBAKF,CAHE,wCACE,iBACF,CAIF,sBACE,eAAgB,CAEhB,oDACF,CAEA,gCACE,2BACF,CAEA,wBACE,4BAA6B,CAC7B,+FAAiG,CACjG,+CAKF,CAHE,gDACE,8BACF,CAGF,sBACE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAKF,CAHE,8CACE,2BACF,CAGF,wBACE,4BAA6B,CAC7B,2FAA6F,CAC7F,6CAKF,CAHE,gDACE,4BACF,CAGF,uBACE,4BAA6B,CAC7B,qFAAuF,CACvF,0CAKF,CAHE,+CACE,yBACF,CAKF,qBAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CAEA,4BACE,gCAEE,2CAA8C,CAC9C,cAAe,CACf,aAAc,CACd,eACF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8);\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n border-radius: var(--borderRadius-medium);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variation */\n @media (max-width: 543.98px) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8) 0 0 var(--base-size-8);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: message;\n align-self: center;\n\n /* stylelint-disable-next-line selector-max-type */\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--controlStack-medium-gap-condensed);\n }\n\n & .Banner-visual .octicon {\n color: var(--fgColor-accent);\n }\n\n &.Banner--warning {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-attention);\n }\n }\n\n &.Banner--error {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-danger);\n }\n }\n\n &.Banner--success {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-success);\n }\n }\n\n &.Banner--upsell {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));\n border-color: var(--borderColor-done-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-done);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (max-width: 767.98px) {\n &.Banner--full-whenNarrow {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
data/app/components/primer/alpha/button_marketing.css CHANGED
@@ -1 +1 @@
1
- .btn-mktg{appearance:none!important;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;color:var(--bgColor-default);display:inline-block;font-size:1rem;font-weight:var(--base-text-weight-semibold);line-height:1;padding:.9rem 1.5rem 1.1rem;position:relative;text-align:center;transition:box-shadow .2s,outline .2s ease;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;z-index:1}.btn-mktg:before{background:linear-gradient(180deg,#ffffff26,#fff0)!important;background-blend-mode:normal;border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s;z-index:-1}.btn-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover)!important;-webkit-text-decoration:none;text-decoration:none}:is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus):before{opacity:1}.btn-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn-muted-mktg{background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline);color:var(--fgColor-default)!important}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--fgColor-default) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--fgColor-default) 0 0 0 1px inset!important}.btn-subtle-mktg{box-shadow:none!important;color:var(--fgColor-default)!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important;color:#fff}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-signup-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-signup-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{font-size:1.25rem;padding:16px 30px 20px!important}
1
+ .btn-mktg{position:relative;z-index:1;display:inline-block;padding:.9rem 1.5rem 1.1rem;font-size:1rem;font-weight:var(--base-text-weight-semibold);line-height:1;color:var(--bgColor-default);text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;transition:box-shadow .2s,outline .2s ease;appearance:none!important}.btn-mktg:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;content:"";background:linear-gradient(180deg,#ffffff26,#fff0)!important;border-radius:inherit;opacity:0;transition:opacity .2s;background-blend-mode:normal}.btn-mktg:hover{-webkit-text-decoration:none;text-decoration:none;box-shadow:var(--color-mktg-btn-shadow-hover)!important}:is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus):before{opacity:1}.btn-mktg:focus{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.btn-mktg:focus:not(:focus-visible){outline:1px solid #0000;box-shadow:none}.btn-mktg:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{pointer-events:none;cursor:default;opacity:.5}.btn-muted-mktg{color:var(--fgColor-default)!important;background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline)}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--fgColor-default) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--fgColor-default) 0 0 0 1px inset!important}.btn-subtle-mktg{color:var(--fgColor-default)!important;box-shadow:none!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{color:#fff;background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.btn-signup-mktg:focus:not(:focus-visible){outline:1px solid #0000;box-shadow:none}.btn-signup-mktg:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:2px;box-shadow:none}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{padding:16px 30px 20px!important;font-size:1.25rem}
data/app/components/primer/alpha/button_marketing.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UA2BE,yBAA2B,CAP3B,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CAXvB,4BAA6B,CAX7B,oBAAqB,CAMrB,cAAe,CACf,4CAA6C,CAE7C,aAAc,CANd,2BAA6B,CAL7B,iBAAkB,CAclB,iBAAkB,CAWlB,0CAA8C,CAR9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAdnB,SAuFF,CA5DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAGE,uDAAyD,CAFzD,4BAAqB,CAArB,oBAGF,CAME,oFACE,SACF,CAIF,gBC3DA,eAAgB,CAFhB,2CAAgC,CAChC,kBDoEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBCtEA,eAAgB,CAFhB,2CAAgC,CAChC,kBDyEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAE3B,+CAAgD,CAHhD,sCAuBF,CAlBE,uBACE,YACF,CAEA,sBAEE,6DACF,CAEA,uBAEE,2DACF,CAEA,yBAEE,2DACF,CAGF,iBAGE,yBAA2B,CAF3B,sCAYF,CARE,yCAHA,yBAKA,CAEA,uBAEE,6DACF,CAGF,iBAKE,wEAAuH,CAHvH,UAyBF,CApBE,wBAEE,gEACF,CAGA,uBC9IA,eAAgB,CAFhB,2CAAgC,CAChC,kBDuJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BCzJA,eAAgB,CAFhB,2CAAgC,CAChC,kBD4JA,CAKF,gBAEE,6BACF,CAEA,gBAKE,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n position: relative;\n z-index: 1;\n display: inline-block;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.9rem 1.5rem 1.1rem;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1rem;\n font-weight: var(--base-text-weight-semibold);\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n /* stylelint-disable-next-line primer/colors */\n color: var(--bgColor-default);\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),\n var(--color-mktg-btn-bg) !important;\n border: 0;\n\n /* stylelint-disable-next-line primer/borders */\n border-radius: 0.375rem;\n transition: box-shadow 0.2s, outline 0.2s ease;\n appearance: none !important;\n\n &::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n content: '';\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.2s;\n background-blend-mode: normal;\n }\n\n &:hover {\n text-decoration: none;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n }\n\n &:hover,\n &:focus,\n &:focus-visible,\n &.focus {\n &::before {\n opacity: 1;\n }\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n }\n\n &:active {\n &::before {\n opacity: 0.5 !important;\n }\n }\n\n &.disabled,\n &[disabled] {\n pointer-events: none;\n cursor: default;\n opacity: 0.5;\n }\n}\n\n.btn-muted-mktg {\n color: var(--fgColor-default) !important;\n background: none !important;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-outline);\n\n &::before {\n display: none;\n }\n\n &:hover {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n\n &:active {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;\n }\n\n &:disabled {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;\n }\n}\n\n.btn-subtle-mktg {\n color: var(--fgColor-default) !important;\n background: none !important;\n box-shadow: none !important;\n\n &::before {\n background: none !important;\n }\n\n &:hover {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n}\n\n.btn-signup-mktg {\n /* stylelint-disable-next-line primer/colors */\n color: #fff;\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;\n\n &::before {\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n /* stylelint-disable-next-line primer/spacing */\n padding: 16px 30px 20px !important;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UACE,iBAAkB,CAClB,SAAU,CACV,oBAAqB,CAGrB,2BAA6B,CAG7B,cAAe,CACf,4CAA6C,CAE7C,aAAc,CAEd,4BAA6B,CAC7B,iBAAkB,CAClB,kBAAmB,CACnB,qBAAsB,CACtB,wBAAiB,CAAjB,gBAAiB,CAEjB,4FACqC,CACrC,QAAS,CAGT,qBAAuB,CACvB,0CAA8C,CAC9C,yBA8DF,CA5DE,iBACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,UAAW,CAGX,4DAAyG,CACzG,qBAAsB,CACtB,SAAU,CACV,sBAAwB,CACxB,4BACF,CAEA,gBACE,4BAAqB,CAArB,oBAAqB,CAErB,uDACF,CAME,oFACE,SACF,CAIF,gBC7DA,2CAAgC,CAChC,kBAA8B,CAC9B,eDmEA,CAJE,oCACE,uBAA8B,CAC9B,eACF,CAIF,wBCxEA,2CAAgC,CAChC,kBAA8B,CAC9B,eDwEA,CAGE,wBACE,oBACF,CAGF,uCAEE,mBAAoB,CACpB,cAAe,CACf,UACF,CAGF,gBACE,sCAAwC,CACxC,yBAA2B,CAE3B,+CAoBF,CAlBE,uBACE,YACF,CAEA,sBAEE,6DACF,CAEA,uBAEE,2DACF,CAEA,yBAEE,2DACF,CAGF,iBACE,sCAAwC,CAExC,yBAUF,CARE,yCAHA,yBAKA,CAEA,uBAEE,6DACF,CAGF,iBAEE,UAAW,CAGX,wEAsBF,CApBE,wBAEE,gEACF,CAGA,uBChJA,2CAAgC,CAChC,kBAA8B,CAC9B,eDsJA,CAJE,2CACE,uBAA8B,CAC9B,eACF,CAIF,+BC3JA,2CAAgC,CAChC,kBAA8B,CAC9B,eD2JA,CAKF,gBAEE,6BACF,CAEA,gBAEE,gCAAkC,CAGlC,iBACF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n position: relative;\n z-index: 1;\n display: inline-block;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.9rem 1.5rem 1.1rem;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1rem;\n font-weight: var(--base-text-weight-semibold);\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n /* stylelint-disable-next-line primer/colors */\n color: var(--bgColor-default);\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),\n var(--color-mktg-btn-bg) !important;\n border: 0;\n\n /* stylelint-disable-next-line primer/borders */\n border-radius: 0.375rem;\n transition: box-shadow 0.2s, outline 0.2s ease;\n appearance: none !important;\n\n &::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n content: '';\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.2s;\n background-blend-mode: normal;\n }\n\n &:hover {\n text-decoration: none;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n }\n\n &:hover,\n &:focus,\n &:focus-visible,\n &.focus {\n &::before {\n opacity: 1;\n }\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n }\n\n &:active {\n &::before {\n opacity: 0.5 !important;\n }\n }\n\n &.disabled,\n &[disabled] {\n pointer-events: none;\n cursor: default;\n opacity: 0.5;\n }\n}\n\n.btn-muted-mktg {\n color: var(--fgColor-default) !important;\n background: none !important;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-outline);\n\n &::before {\n display: none;\n }\n\n &:hover {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n\n &:active {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;\n }\n\n &:disabled {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;\n }\n}\n\n.btn-subtle-mktg {\n color: var(--fgColor-default) !important;\n background: none !important;\n box-shadow: none !important;\n\n &::before {\n background: none !important;\n }\n\n &:hover {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n}\n\n.btn-signup-mktg {\n /* stylelint-disable-next-line primer/colors */\n color: #fff;\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;\n\n &::before {\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--focus-outlineColor);\n }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n /* stylelint-disable-next-line primer/spacing */\n padding: 16px 30px 20px !important;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
data/app/components/primer/alpha/dialog.css CHANGED
@@ -1 +1 @@
1
- @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font:var(--text-title-shorthand-small)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}.Overlay--fullscreen-whenNarrow{border-radius:unset!important;height:100vh;left:0;margin:0;max-height:none!important;max-width:none!important;position:fixed;top:0;width:100vw}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
1
+ @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body.has-modal{padding-right:var(--dialog-scrollgutter)!important}body.has-modal-disable-scroll{overflow:hidden!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;overflow:hidden;visibility:hidden;opacity:0}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{position:static;display:flex;width:min(var(--overlay-width),100vw - 2rem);min-width:192px;max-height:min(calc(100vh - 2rem),var(--overlay-height));padding:0;margin:auto;color:var(--fgColor-default);white-space:normal;flex-direction:column;background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);opacity:1;inset:0}.Overlay.Overlay--size-auto{min-width:192px;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-full{width:100vw;height:100vh}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{position:fixed;height:100%;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{inset:0 auto 0 0;border-top-left-radius:0;border-bottom-left-radius:0;animation-name:Overlay--motion-slideInRight}.Overlay.Overlay--placement-right{inset:0 0 0 auto;border-top-right-radius:0;border-bottom-right-radius:0;animation-name:Overlay--motion-slideInLeft}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{overflow:auto;flex-grow:1}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1;color:var(--fgColor-default)}.Overlay-header.Overlay-header--divided{padding-bottom:var(--stack-padding-condensed);box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font:var(--text-title-shorthand-small)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{display:flex;align-items:flex-start;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed);flex-direction:column;flex-grow:1;gap:var(--control-small-gap)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{margin:0;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{margin:0;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);color:var(--fgColor-muted)}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{padding:var(--stack-padding-normal);overflow-y:auto;scrollbar-width:thin;font-size:var(--text-body-size-medium);flex-grow:1}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{z-index:1;display:flex;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);flex-direction:row;flex-shrink:0;flex-wrap:wrap}.Overlay-footer.Overlay-footer--divided{padding-top:var(--stack-padding-normal);box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default)}.Overlay-footer.Overlay-footer--alignStart{justify-content:flex-start;gap:var(--stack-gap-condensed)}.Overlay-footer.Overlay-footer--alignCenter{justify-content:center;gap:var(--stack-gap-condensed)}.Overlay-footer.Overlay-footer--alignEnd{justify-content:flex-end;gap:var(--stack-gap-condensed)}.Overlay-closeButton{position:relative;display:grid;width:var(--base-size-32);height:var(--base-size-32);padding:0;color:var(--fgColor-muted);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;place-content:center;align-self:flex-start;flex-shrink:0}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{width:100%;max-width:100vw;height:100%;max-height:100vh;border-radius:unset!important;flex-grow:1}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{position:fixed;height:100%;max-height:100vh}.Overlay.Overlay--placement-left-whenNarrow{inset:0 auto 0 0;border-top-left-radius:0;border-bottom-left-radius:0;animation-name:Overlay--motion-slideInLeft}.Overlay.Overlay--placement-right-whenNarrow{inset:0 0 0 auto;border-top-right-radius:0;border-bottom-right-radius:0;animation-name:Overlay--motion-slideInLeft}.Overlay.Overlay--placement-bottom-whenNarrow{width:100%;max-width:100vw;border-bottom-right-radius:0;border-bottom-left-radius:0;animation-name:Overlay--motion-slideUp;inset:auto 0 0}.Overlay--full-whenNarrow{width:100%;max-width:100vw;height:100%;max-height:100vh;border-radius:unset!important;flex-grow:1}.Overlay--fullscreen-whenNarrow{position:fixed;top:0;left:0;width:100vw;max-width:none!important;height:100vh;max-height:none!important;margin:0;border-radius:unset!important}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
data/app/components/primer/alpha/dialog.css.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "alpha/dialog",
3
3
  "selectors": [
4
- "body:has(dialog:modal.Overlay--disableScroll)",
4
+ "body.has-modal",
5
+ "body.has-modal-disable-scroll",
5
6
  "dialog.Overlay:not([open])",
6
7
  ".Overlay--hidden",
7
8
  ".Overlay--visibilityHidden",
data/app/components/primer/alpha/dialog.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: \"<length>\";\n}\n\nbody:has(dialog:modal.Overlay--disableScroll) {\n padding-right: var(--dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n position: static;\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n padding: 0;\n margin: auto;\n color: var(--fgColor-default);\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n inset: 0;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n position: fixed;\n height: 100%;\n max-height: unset;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n color: var(--fgColor-default);\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font: var(--text-title-shorthand-small);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n position: fixed;\n height: 100%;\n max-height: 100vh;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideUp;\n inset: auto 0 0;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n\n .Overlay--fullscreen-whenNarrow {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none !important;\n height: 100vh;\n max-height: none !important;\n margin: 0;\n border-radius: unset !important;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
1
+ {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: \"<length>\";\n}\n\nbody.has-modal {\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\nbody.has-modal-disable-scroll {\n overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n position: static;\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n padding: 0;\n margin: auto;\n color: var(--fgColor-default);\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n inset: 0;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n position: fixed;\n height: 100%;\n max-height: unset;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n color: var(--fgColor-default);\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font: var(--text-title-shorthand-small);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n position: fixed;\n height: 100%;\n max-height: 100vh;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideUp;\n inset: auto 0 0;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n\n .Overlay--fullscreen-whenNarrow {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none !important;\n height: 100vh;\n max-height: none !important;\n margin: 0;\n border-radius: unset !important;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
data/app/components/primer/alpha/dialog.pcss CHANGED
@@ -21,8 +21,11 @@
21
21
  syntax: "<length>";
22
22
  }
23
23
 
24
- body:has(dialog:modal.Overlay--disableScroll) {
24
+ body.has-modal {
25
25
  padding-right: var(--dialog-scrollgutter) !important;
26
+ }
27
+
28
+ body.has-modal-disable-scroll {
26
29
  overflow: hidden !important;
27
30
  }
28
31
 
data/app/components/primer/alpha/dropdown.css CHANGED
@@ -1 +1 @@
1
- .dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:var(--base-size-12)}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:var(--base-size-12)}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
1
+ .dropdown{position:relative}.dropdown-caret{display:inline-block;width:0;height:0;vertical-align:middle;content:"";border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;border-right-color:#0000;border-bottom-color:#0000;border-left-color:#0000}.dropdown-menu{position:absolute;top:100%;left:0;z-index:100;width:160px;padding-top:var(--control-small-paddingBlock);padding-bottom:var(--control-small-paddingBlock);margin-top:var(--base-size-2);list-style:none;background-color:var(--overlay-bgColor);background-clip:padding-box;border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-small)}.dropdown-menu:after,.dropdown-menu:before{position:absolute;display:inline-block;content:""}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);overflow:visible;text-overflow:inherit}.dropdown-item{display:block;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);overflow:hidden;color:var(--fgColor-default);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{color:inherit!important;border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{width:100%;text-align:left}.dropdown-signout{background:none;border:0}.dropdown-divider{display:block;height:0;margin:var(--stack-gap-condensed) 0;border-top:var(--borderWidth-thin) solid var(--borderColor-default)}.dropdown-header{padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);font-size:var(--text-body-size-small);color:var(--fgColor-muted)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{top:0;right:100%;left:auto;width:auto;margin-top:0;margin-right:var(--base-size-8)}.dropdown-menu-w:before{top:10px;right:-16px;left:auto;border-color:#0000;border-left-color:var(--borderColor-default)}.dropdown-menu-w:after{top:calc(var(--base-size-12) - var(--borderWidth-thin));right:-14px;left:auto;border-color:#0000;border-left-color:var(--overlay-bgColor)}.dropdown-menu-e{top:0;left:100%;width:auto;margin-top:0;margin-left:var(--base-size-8)}.dropdown-menu-e:before{top:10px;left:-16px;border-color:#0000;border-right-color:var(--borderColor-default)}.dropdown-menu-e:after{top:calc(var(--base-size-12) - var(--borderWidth-thin));left:-14px;border-color:#0000;border-right-color:var(--overlay-bgColor)}.dropdown-menu-ne{top:auto;bottom:100%;left:0;margin-bottom:var(--base-size-4)}.dropdown-menu-ne:after,.dropdown-menu-ne:before{top:auto;right:auto}.dropdown-menu-ne:before{bottom:-8px;left:var(--base-size-8);border-top:8px solid var(--borderColor-default);border-right:8px solid #0000;border-bottom:0;border-left:8px solid #0000}.dropdown-menu-ne:after{bottom:-7px;left:calc(var(--base-size-8) + var(--borderWidth-thin));border-top:7px solid var(--overlay-bgColor);border-right:7px solid #0000;border-bottom:0;border-left:7px solid #0000}.dropdown-menu-s{right:50%;left:auto;transform:translateX(50%)}.dropdown-menu-s:before{top:-16px;right:50%;transform:translateX(50%)}.dropdown-menu-s:after{top:-14px;right:50%;transform:translateX(50%)}.dropdown-menu-sw{right:0;left:auto}.dropdown-menu-sw:before{top:-16px;right:var(--base-size-8);left:auto}.dropdown-menu-sw:after{top:-14px;right:calc(var(--base-size-8) + var(--borderWidth-thin));left:auto}.dropdown-menu-se:before{top:-16px;left:var(--base-size-8)}.dropdown-menu-se:after{top:-14px;left:calc(var(--base-size-8) + var(--borderWidth-thin))}