// Side Nav // // A vertical list of navigational links, typically used on the left side of a page.
.SideNav {
background-color: var(--color-bg-secondary);
}
.SideNav-item {
position: relative; display: block; width: 100%; // stylelint-disable-next-line primer/spacing padding: 12px $spacer-3; color: var(--color-text-primary); text-align: left; background-color: transparent; border: 0; border-top: $border-width $border-style var(--color-border-secondary); &:first-child { border-top: 0; } &:last-child { // makes sure there is a "bottom border" in case the list is not long enough // stylelint-disable-next-line primer/box-shadow box-shadow: 0 $border-width 0 var(--color-border-primary); } // Bar on the left &::before { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 2px; pointer-events: none; content: ""; }
}
// States
.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:not(), .SideNav-item {
background-color: var(--color-sidenav-selected-bg); // Bar on the left &::before { // stylelint-disable-next-line primer/colors background-color: var(--color-sidenav-border-active); }
}
// Icon // // Makes sure multiple icons are vertically aligned
.SideNav-icon {
width: 16px; margin-right: $spacer-2; color: var(--color-text-tertiary);
}
// Sub Nav // // A more lightweight version, suited as a sub nav
.SideNav-subItem {
position: relative; display: block; width: 100%; padding: $spacer-1 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:not(), .SideNav-subItem {
font-weight: $font-weight-semibold; color: var(--color-text-primary);
}