RubyGems - openproject-primer_view_components - Versions diffs - 0.89.1 → 0.90.1 - Mend

openproject-primer_view_components 0.89.1 → 0.90.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

data/app/components/primer/alpha/action_bar.css CHANGED Viewed

	@@ -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 Viewed

	@@ -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,CAC5C,iDAAkD,CAClD,kEAAmE,CACnE,0BACF,CAEA,qCACE,gDACF,CAEA,qCACE,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 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 margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}

data/app/components/primer/alpha/action_bar.pcss CHANGED Viewed

@@ -41,18 +41,15 @@
   bottom: 50%;
   float: left;
   height: calc(var(--control-medium-size) / 2);
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
   transform: translateY(-50%);
 }
 .ActionBar--small .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-small-gap-condensed);
 }
 .ActionBar--large .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-large-gap-condensed);
 }

data/app/components/primer/alpha/action_list.css CHANGED Viewed

	@@ -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 Viewed

@@ -46,25 +46,19 @@
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
-    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description",
-    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) :is(.ActionListItem-description,.ActionListItem-label)",
     ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual",
     ":is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]):hover",
     ".ActionListItem.ActionListItem--danger .ActionListItem-label",
     ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
     ".ActionListItem.ActionListItem--danger:hover",
-    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
-    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
-    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger:hover :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual)",
     ":is(.ActionListItem.ActionListItem--danger .ActionListContent):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",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active :is(.ActionListItem-description,.ActionListItem-label,.ActionListItem-visual)",
     ".ActionListContent",
     ".ActionListContent>:not(:last-child)",
     ".ActionListContent:hover",
-    ".ActionListContent[aria-disabled=true] .ActionListItem-description",
-    ".ActionListContent[aria-disabled=true] .ActionListItem-label",
+    ".ActionListContent[aria-disabled=true] :is(.ActionListItem-description,.ActionListItem-label)",
     ".ActionListContent[aria-disabled=true] .ActionListItem-visual",
     ".ActionListContent[aria-disabled=true]:hover",
     ".ActionListContent[aria-expanded]+.ActionList--subGroup",

data/app/components/primer/alpha/action_list.css.map CHANGED Viewed

	@@ -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 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 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/action_list.pcss CHANGED Viewed

@@ -301,7 +301,6 @@ nav-list {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */
   padding-block: var(--actionListContent-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--control-fgColor-rest);
   text-align: left;
@@ -319,7 +318,6 @@ nav-list {
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
   }

data/app/components/primer/alpha/auto_complete.css CHANGED Viewed

	@@ -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;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:var(--overlay-bgColor);border:0}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item:hover,.autocomplete-item[aria-selected=true]{color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none;background-color:var(--bgColor-accent-emphasis)}

data/app/components/primer/alpha/auto_complete.css.json CHANGED Viewed

@@ -11,11 +11,9 @@
     ":is(.autocomplete-embedded-icon-wrap .form-control):focus-visible",
     ".autocomplete-results",
     ".autocomplete-item",
-    ".autocomplete-item:hover",
-    ".autocomplete-item:hover *",
     ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected",
-    ".autocomplete-item[aria-selected=true]",
-    ":is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *"
+    ".autocomplete-item:hover",
+    ".autocomplete-item[aria-selected=true]"
   ]
 }

data/app/components/primer/alpha/auto_complete.css.map CHANGED Viewed

	@@ -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,CAChB,4BAAqB,CAArB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CACnB,cAAe,CACf,uCAAwC,CACxC,QAkBF,CAPE,gIALE,+BAAgC,CAChC,4BAAqB,CAArB,oBAAqB,CACrB,+CASF","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 / `color` is inherited, so setting it on the item recolors descendants\n ** without a universal `… ` descendant rule (which forces a slow\n * style-recalc match attempt against every element on the page). /\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\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}\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/auto_complete.pcss CHANGED Viewed

@@ -92,15 +92,13 @@
   background-color: var(--overlay-bgColor);
   border: 0;
+  /* `color` is inherited, so setting it on the item recolors descendants
+  ** without a universal `… *` descendant rule (which forces a slow
+  ** style-recalc match attempt against every element on the page). */
   &:hover {
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
   &.selected,
@@ -109,10 +107,5 @@
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 }

data/app/components/primer/alpha/banner.css CHANGED Viewed

	@@ -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 Viewed

	@@ -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,8BA6HF,CA1HE,4BAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAqHJ,CAnHI,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,CAChB,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 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/banner.pcss CHANGED Viewed

@@ -70,7 +70,6 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--controlStack-medium-gap-condensed);
   }

data/app/components/primer/alpha/button_marketing.css CHANGED Viewed

	@@ -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 Viewed

	@@ -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,4DAAuG,CACvG,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, rgb(255, 255, 255, 0.15) 0%, rgb(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, rgb(255, 255, 255, 0.15) 0%, rgb(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, rgb(52, 183, 89, 0.15) 0%, rgb(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, rgb(52, 183, 89, 0.15) 0%, rgb(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/button_marketing.pcss CHANGED Viewed

@@ -18,7 +18,7 @@
   vertical-align: middle;
   user-select: none;
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
@@ -37,7 +37,7 @@
     content: '';
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.2s;
@@ -135,11 +135,11 @@
   color: #fff;
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+  background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
   &::before {
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;
   }
   /* fallback :focus state */

data/app/components/primer/alpha/dialog.css CHANGED Viewed

	@@ -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-size:var(--text-title-size-medium)}: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-size:var(--text-title-size-medium)}: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 Viewed

@@ -1,7 +1,8 @@
 {
   "name": "alpha/dialog",
   "selectors": [
-    "body:has(dialog:modal.Overlay--disableScroll)",
+    "body.has-modal",
+    "body.has-modal-disable-scroll",
     "dialog.Overlay:not([open])",
     ".Overlay--hidden",
     ".Overlay--visibilityHidden",