| .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); |
| } |
| } |