UNPKG

@primer/view-components

Version:

ViewComponents for the Primer Design System

github.com/primer/view_components

primer/view_components

1 lines • 14.5 kB
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}