UNPKG

@primer/css

Version:

The CSS implementation of GitHub's Primer Design System

3 lines (2 loc) • 9.63 kB
.menu{margin-bottom:16px;list-style:none;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:6px}.menu-item{position:relative;display:block;padding:8px 16px;color:var(--color-text-primary);border-bottom:1px solid var(--color-border-secondary)}.menu-item:first-child{border-top:0;border-top-left-radius:6px;border-top-right-radius:6px}.menu-item:first-child::before{border-top-left-radius:6px}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.menu-item:last-child::before{border-bottom-left-radius:6px}.menu-item:focus{z-index:1;outline:none;box-shadow:var(--color-state-focus-shadow)}.menu-item:hover{text-decoration:none;background-color:var(--color-state-hover-secondary-bg)}.menu-item:active{background-color:var(--color-bg-secondary)}.menu-item.selected,.menu-item[aria-selected=true],.menu-item[aria-current]:not([aria-current=false]){cursor:default;background-color:var(--color-menu-bg-active)}.menu-item.selected::before,.menu-item[aria-selected=true]::before,.menu-item[aria-current]:not([aria-current=false])::before{position:absolute;top:0;bottom:0;left:0;width:2px;content:"";background-color:var(--color-menu-border-active)}.menu-item .octicon{width:16px;margin-right:8px;color:var(--color-icon-tertiary);text-align:center}.menu-item .Counter{float:right;margin-left:4px}.menu-item .menu-warning{float:right;color:var(--color-auto-red-9)}.menu-item .avatar{float:left;margin-right:4px}.menu-item.alert .Counter{color:var(--color-text-danger)}.menu-heading{display:block;padding:8px 16px;margin-top:0;margin-bottom:0;font-size:inherit;font-weight:600;color:var(--color-menu-heading-text);border-bottom:1px solid var(--color-border-secondary)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:6px;border-top-right-radius:6px}.menu-heading:last-child{border-bottom:0;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tabnav{margin-top:0;margin-bottom:16px;border-bottom:1px solid var(--color-border-primary)}.tabnav-tabs{display:flex;margin-bottom:-1px;overflow:auto}.tabnav-tab{display:inline-block;flex-shrink:0;padding:8px 16px;font-size:14px;line-height:23px;color:var(--color-text-secondary);text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;transition:color 0.2s cubic-bezier(0.3, 0, 0.5, 1)}.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false]){color:var(--color-text-primary);background-color:var(--color-bg-canvas);border-color:var(--color-border-primary);border-radius:6px 6px 0 0}.tabnav-tab.selected .octicon,.tabnav-tab[aria-selected=true] .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon{color:inherit}.tabnav-tab:hover,.tabnav-tab:focus{color:var(--color-text-primary);text-decoration:none;transition-duration:0.1s}.tabnav-tab:active{color:var(--color-text-tertiary)}.tabnav-tab .octicon{margin-right:4px;color:var(--color-icon-tertiary)}.tabnav-tab .Counter{margin-left:4px;color:inherit}.tabnav-extra{display:inline-block;padding-top:10px;margin-left:10px;font-size:12px;color:var(--color-text-secondary)}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-text-link);text-decoration:none}.tabnav-btn{margin-left:8px}.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(--color-text-secondary);background-color:transparent}.filter-list.pjax-active .filter-item.pjax-active{color:var(--color-text-inverse);background-color:var(--color-bg-info-inverse)}.filter-item{position:relative;display:block;padding:8px 16px;margin-bottom:4px;overflow:hidden;font-size:14px;color:var(--color-text-secondary);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:6px}.filter-item:hover{text-decoration:none;background-color:var(--color-bg-tertiary)}.filter-item.selected,.filter-item[aria-selected=true],.filter-item[aria-current]:not([aria-current=false]){color:var(--color-state-selected-primary-text);background-color:var(--color-state-selected-primary-bg)}.filter-item .count{float:right;font-weight:600}.filter-item .bar{position:absolute;top:2px;right:0;bottom:2px;z-index:-1;display:inline-block;background-color:var(--color-filter-item-bar-bg)}.SideNav{background-color:var(--color-bg-secondary)}.SideNav-item{position:relative;display:block;width:100%;padding:12px 16px;color:var(--color-text-primary);text-align:left;background-color:transparent;border:0;border-top:1px solid var(--color-border-secondary)}.SideNav-item:first-child{border-top:0}.SideNav-item:last-child{box-shadow:0 1px 0 var(--color-border-primary)}.SideNav-item::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:2px;pointer-events:none;content:""}.SideNav-item:focus{z-index:1;outline:none;box-shadow:var(--color-state-focus-shadow)}.SideNav-item:hover{text-decoration:none;background-color:var(--color-state-hover-secondary-bg);outline:none}.SideNav-item:active{background-color:var(--color-bg-secondary)}.SideNav-item[aria-current]:not([aria-current=false]),.SideNav-item[aria-selected="true"]{background-color:var(--color-sidenav-selected-bg)}.SideNav-item[aria-current]:not([aria-current=false])::before,.SideNav-item[aria-selected="true"]::before{background-color:var(--color-sidenav-border-active)}.SideNav-icon{width:16px;margin-right:8px;color:var(--color-text-tertiary)}.SideNav-subItem{position:relative;display:block;width:100%;padding:4px 0;color:var(--color-text-link);text-align:left;background-color:transparent;border:0}.SideNav-subItem:hover,.SideNav-subItem:focus{color:var(--color-text-primary);text-decoration:none;outline:none}.SideNav-subItem[aria-current]:not([aria-current=false]),.SideNav-subItem[aria-selected="true"]{font-weight:500;color:var(--color-text-primary)}.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(--color-border-secondary)}.subnav-flush{margin-bottom:0}.subnav-item{position:relative;float:left;padding:5px 16px;font-weight:500;line-height:20px;color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.subnav-item+.subnav-item{margin-left:-1px}.subnav-item:hover,.subnav-item:focus{text-decoration:none;background-color:var(--color-bg-tertiary)}.subnav-item.selected,.subnav-item[aria-selected=true],.subnav-item[aria-current]:not([aria-current=false]){z-index:2;color:var(--color-state-selected-primary-text);background-color:var(--color-state-selected-primary-bg);border-color:var(--color-state-selected-primary-border)}.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:32px;color:var(--color-text-secondary)}.subnav-search-input-wide{width:500px}.subnav-search-icon{position:absolute;top:9px;left:8px;display:block;color:var(--color-icon-tertiary);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{display:flex;overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px 0 var(--color-border-secondary);justify-content:space-between}.UnderlineNav-body{display:flex}.UnderlineNav-item{padding:8px 16px;font-size:14px;line-height:30px;color:var(--color-underlinenav-text);text-align:center;white-space:nowrap;background-color:transparent;border:0;border-bottom:2px solid transparent}.UnderlineNav-item:hover,.UnderlineNav-item:focus{color:var(--color-underlinenav-text-hover);text-decoration:none;border-bottom-color:var(--color-border-tertiary);outline:1px dotted transparent;outline-offset:-1px;transition:border-bottom-color 0.12s ease-out}.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false]){font-weight:600;color:var(--color-underlinenav-text-active);border-bottom-color:#f9826c;outline:1px dotted transparent;outline-offset:-1px}.UnderlineNav-item.selected .UnderlineNav-octicon,.UnderlineNav-item[role=tab][aria-selected=true] .UnderlineNav-octicon,.UnderlineNav-item[aria-current]:not([aria-current=false]) .UnderlineNav-octicon{color:var(--color-text-tertiary)}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav-octicon{margin-right:4px;color:var(--color-underlinenav-icon)}.UnderlineNav .Counter{margin-left:4px;color:var(--color-underlinenav-counter-text);background-color:var(--color-underlinenav-counter-bg)}.UnderlineNav .Counter--primary{color:var(--color-counter-primary-text);background-color:var(--color-counter-primary-bg)}.UnderlineNav-container{display:flex;justify-content:space-between} /*# sourceMappingURL=navigation.css.map */