Sha256: 78fcddb11fbf33a38d71a202cb1e096cb1811b83c5d2384765ddc5750df1d9da
Contents?: true
Size: 1.99 KB
Versions: 4
Compression:
Stored size: 1.99 KB
Contents
// Side Nav
//
// A vertical list of navigational links, typically used on the left side of a page.
.SideNav {
background-color: var(--color-canvas-subtle);
}
.SideNav-item {
position: relative;
display: block;
width: 100%;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3;
color: var(--color-fg-default);
text-align: left;
background-color: transparent;
border: 0;
border-top: $border-width $border-style var(--color-border-muted);
&: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-default);
}
// 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:hover {
text-decoration: none;
background-color: var(--color-neutral-subtle);
}
.SideNav-item:active {
background-color: var(--color-canvas-subtle);
}
.SideNav-item[aria-current]:not([aria-current='false']),
.SideNav-item[aria-selected='true'] {
background-color: var(--color-sidenav-selected-bg);
// Bar on the left
&::before {
background-color: var(--color-primer-border-active);
}
}
// Icon
//
// Makes sure multiple icons are vertically aligned
.SideNav-icon {
width: 16px;
margin-right: $spacer-2;
color: var(--color-fg-muted);
}
// 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-accent-fg);
text-align: left;
background-color: transparent;
border: 0;
}
.SideNav-subItem:hover {
color: var(--color-fg-default);
text-decoration: none;
}
.SideNav-subItem[aria-current]:not([aria-current='false']),
.SideNav-subItem[aria-selected='true'] {
font-weight: $font-weight-semibold;
color: var(--color-fg-default);
}
Version data entries
4 entries across 4 versions & 1 rubygems