@primer/css/dist/navigation.css

The CSS implementation of GitHub's Primer Design System

.menu{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);list-style:none;margin-bottom:var(--stack-gap-normal)}.menu-item{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium)}.menu-item:hover{background-color:var(--bgColor-neutral-muted);-webkit-text-decoration:none;text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active);cursor:default}:is(.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false])):before{background-color:var(--underlineNav-borderColor-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted);margin-right:var(--control-medium-gap);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap)}.menu-item .menu-warning{color:var(--fgColor-attention);float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap)}.menu-item.alert .Counter{color:var(--fgColor-danger)}.menu-heading{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);color:var(--fgColor-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.menu-heading:hover{-webkit-text-decoration:none;text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium)}.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid rgba(0,0,0,0);border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(0.3, 0, 0.5, 1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}.filter-list{list-style-type:none}.filter-list.small .filter-item{padding:6px 12px;font-size:12px}.filter-list.pjax-active .filter-item{color:var(--fgColor-muted, var(--color-fg-muted));background-color:rgba(0,0,0,0)}.filter-list.pjax-active .filter-item.pjax-active{color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));background-color:var(--bgColor-accent-emphasis, var(--color-accent-emphasis))}.filter-item{position:relative;display:block;padding:var(--base-size-8) var(--base-size-16);margin-bottom:var(--base-size-4);overflow:hidden;font-size:14px;color:var(--fgColor-muted, var(--color-fg-muted));text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:6px}.filter-item:hover{text-decoration:none;background-color:var(--bgColor-muted, var(--color-canvas-subtle))}.filter-item.selected,.filter-item[aria-selected=true],.filter-item[aria-current]:not([aria-current=false]){color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));background-color:var(--bgColor-accent-emphasis, var(--color-accent-emphasis))}.filter-item.selected:focus,.filter-item[aria-selected=true]:focus,.filter-item[aria-current]:not([aria-current=false]):focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.filter-item.selected:focus:not(:focus-visible),.filter-item[aria-selected=true]:focus:not(:focus-visible),.filter-item[aria-current]:not([aria-current=false]):focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.filter-item.selected:focus-visible,.filter-item[aria-selected=true]:focus-visible,.filter-item[aria-current]:not([aria-current=false]):focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.filter-item .count{float:right;font-weight:var(--base-text-weight-semibold, 600)}.filter-item .bar{position:absolute;top:var(--base-size-2);right:0;bottom:var(--base-size-2);z-index:-1;display:inline-block;background-color:var(--bgColor-neutral-muted, var(--color-neutral-subtle))}.SideNav{background-color:var(--bgColor-muted, var(--color-canvas-subtle))}.SideNav-item{position:relative;display:block;width:100%;padding:12px var(--base-size-16);color:var(--fgColor-default, var(--color-fg-default));text-align:left;background-color:rgba(0,0,0,0);border:0;border-top:1px solid var(--borderColor-muted, var(--color-border-muted))}.SideNav-item:first-child{border-top:0}.SideNav-item:last-child{box-shadow:0 1px 0 var(--borderColor-default, var(--color-border-default))}.SideNav-item::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:2px;pointer-events:none;content:""}.SideNav-item:hover{text-decoration:none;background-color:var(--bgColor-neutral-muted, var(--color-neutral-subtle))}.SideNav-item:active{background-color:var(--bgColor-muted, var(--color-canvas-subtle))}.SideNav-item[aria-current]:not([aria-current=false]),.SideNav-item[aria-selected=true]{background-color:var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg))}.SideNav-item[aria-current]:not([aria-current=false])::before,.SideNav-item[aria-selected=true]::before{background-color:var(--underlineNav-borderColor-active, var(--color-primer-border-active))}.SideNav-icon{width:16px;margin-right:var(--base-size-8);color:var(--fgColor-muted, var(--color-fg-muted))}.SideNav-subItem{position:relative;display:block;width:100%;padding:var(--base-size-4) 0;color:var(--fgColor-accent, var(--color-accent-fg));text-align:left;background-color:rgba(0,0,0,0);border:0}.SideNav-subItem:hover{color:var(--fgColor-default, var(--color-fg-default));text-decoration:none}.SideNav-subItem[aria-current]:not([aria-current=false]),.SideNav-subItem[aria-selected=true]{font-weight:var(--base-text-weight-medium, 500);color:var(--fgColor-default, var(--color-fg-default))}.subnav{margin-bottom:20px}.subnav::before{display:table;content:""}.subnav::after{display:table;clear:both;content:""}.subnav-bordered{padding-bottom:20px;border-bottom:1px solid var(--borderColor-muted, var(--color-border-muted))}.subnav-flush{margin-bottom:0}.subnav-item{position:relative;float:left;padding:5px var(--base-size-16);font-weight:var(--base-text-weight-medium, 500);line-height:20px;color:var(--fgColor-default, var(--color-fg-default));border:1px solid var(--control-borderColor-rest, var(--color-border-default))}.subnav-item+.subnav-item{margin-left:-1px}.subnav-item:hover,.subnav-item:focus{text-decoration:none;background-color:var(--bgColor-muted, var(--color-canvas-subtle))}.subnav-item.selected,.subnav-item[aria-selected=true],.subnav-item[aria-current]:not([aria-current=false]){z-index:2;color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));background-color:var(--bgColor-accent-emphasis, var(--color-accent-emphasis));border-color:var(--borderColor-accent-emphasis, var(--color-accent-emphasis))}.subnav-item.selected:focus,.subnav-item[aria-selected=true]:focus,.subnav-item[aria-current]:not([aria-current=false]):focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.subnav-item.selected:focus:not(:focus-visible),.subnav-item[aria-selected=true]:focus:not(:focus-visible),.subnav-item[aria-current]:not([aria-current=false]):focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.subnav-item.selected:focus-visible,.subnav-item[aria-selected=true]:focus-visible,.subnav-item[aria-current]:not([aria-current=false]):focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.subnav-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.subnav-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.subnav-search{position:relative;margin-left:12px}.subnav-search-input{width:320px;padding-left:var(--base-size-32);color:var(--fgColor-muted, var(--color-fg-muted))}.subnav-search-input-wide{width:500px}.subnav-search-icon{position:absolute;top:9px;left:var(--base-size-8);display:block;color:var(--fgColor-muted, var(--color-fg-muted));text-align:center;pointer-events:none}.subnav-search-context .btn{border-top-right-radius:0;border-bottom-right-radius:0}.subnav-search-context .btn:hover,.subnav-search-context .btn:focus,.subnav-search-context .btn:active,.subnav-search-context .btn.selected{z-index:2}.subnav-search-context+.subnav-search{margin-left:-1px}.subnav-search-context+.subnav-search .subnav-search-input{border-top-left-radius:0;border-bottom-left-radius:0}.subnav-search-context .select-menu-modal-holder{z-index:30}.subnav-search-context .select-menu-modal{width:220px}.subnav-search-context .select-menu-item-icon{color:inherit}.subnav-spacer-right{padding-right:12px}.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted, var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}:is(.UnderlineNav-item:before){content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media(pointer: fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% - var(--base-size-24));content:"";height:2px;position:absolute;right:50%;transform:translate(50%, -50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline !important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
/*# sourceMappingURL=navigation.css.map */