blob: 838e4b4652b448a6fc6aa7598d756241b85e77a2 [file] [log] [blame]
.left-nav {
padding: 10px 20px;
width: 289px;
overflow-y: auto;
top: calc(var(--header-height) + var(--promotion-bar-height));
height: calc(100vh - var(--header-height) - var(--promotion-bar-height));
font-family: 'Open Sans';
padding-top: var(--padding-top);
background-color: var(--body-background);
li {
list-style: none;
}
a, button {
text-decoration: none;
color: #757575;
font-size: 16px;
display: inline-flex;
width: 100%;
margin: 2px 0;
padding: 0.25em 0.375em;
background: none;
border: none;
cursor: pointer;
font: inherit;
text-align: left;
&.active, &:hover {
color: var(--link-color);
}
}
*:focus {
outline: none;
}
.nav-group {
margin-left: 6px;
font-size: 14px;
}
nav {
border-left: 2px solid #dddddd;
// margin-top: 5px;
margin-bottom: 5px;
&.collapsed {
display: none;
}
}
nav > li > a, nav > li > button {
padding-left: 20px;
text-align: left;
&.active {
border-left: var(--orange-line-thickness) solid var(--active-color);
padding-left: calc(20px - var(--orange-line-thickness));
}
}
nav.sub_pages {
border: none;
}
nav.sub_pages a, nav.sub_pages button {
padding-left: 32px;
&.active {
padding-left: calc(32px - var(--orange-line-thickness));
}
}
.parent {
color: #393939;
}
.state-indicator {
margin-left: auto;
margin-top: 5px;
width: 6.2px;
height: 10px;
flex: 0 0 auto;
transition: transform 0.1s;
filter: invert(49%) sepia(4%) saturate(5%) hue-rotate(23deg) brightness(92%) contrast(90%);
}
button:hover .state-indicator,
button.current .state-indicator {
filter: invert(47%) sepia(61%) saturate(1950%) hue-rotate(345deg) brightness(100%) contrast(95%);
}
button.expanded .state-indicator {
transform: rotate(90deg);
}
}