@primer/view-components
Version:
ViewComponents for the Primer Design System
1 lines • 2.82 kB
CSS
.UnderlineNav{display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px 0 var(--borderColor-muted);-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{margin-left:var(--control-medium-gap);color:var(--fgColor-default);background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted))}.UnderlineNav .Counter--primary{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-neutral-emphasis)}.UnderlineNav-body{display:flex;align-items:center;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{position:relative;display:flex;padding:0 var(--control-medium-paddingInline-condensed);font-size:var(--text-body-size-medium);line-height:30px;color:var(--fgColor-default);text-align:center;white-space:nowrap;cursor:pointer;background-color:initial;border:0;border-radius:var(--borderRadius-medium);align-items:center}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;border-bottom-color:var(--borderColor-neutral-muted);outline-offset:-2px;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{display:block;height:0;font-weight:var(--base-text-weight-semibold);visibility:hidden;content:attr(data-content)}:is(.UnderlineNav-item:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:48px;content:"";transform:translateX(-50%) translateY(-50%)}@media (pointer:fine){.UnderlineNav-item:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;background:var(--control-transparent-bgColor-hover);transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);border-bottom-color:var(--underlineNav-borderColor-active)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{position:absolute;right:50%;bottom:calc(50% - var(--base-size-24));z-index:1;width:100%;height:2px;content:"";background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);transform:translate(50%,-50%)}.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{display:inline;margin-right:var(--control-medium-gap);color:var(--fgColor-muted);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}