| #nav-main { |
| border-right: 1px solid $border-color; |
| box-sizing: border-box; |
| width: 300px; |
| position: fixed; |
| left: 0; |
| overflow: auto; |
| bottom: 0; |
| top: 90px; |
| background-color: $nav-main-background-color; |
| ul { |
| padding: 0; |
| margin: 0; |
| display: inline-block; |
| width: 100%; |
| list-style-type: none; |
| } |
| a { |
| color: $nav-main-link-color; |
| box-sizing: border-box; |
| display: table; |
| &:hover { |
| text-decoration: none; |
| background-color: $nav-main-hover-background-color; |
| color: $nav-main-hover-link-color; |
| border-color: $nav-main-hover-background-color; |
| } |
| i.fa { |
| display: inline-block; |
| display: table-cell; |
| width: 1em; |
| } |
| |
| span { |
| display: table-cell; |
| } |
| } |
| |
| & > ul { |
| // Level 1 |
| margin-bottom: 50px; |
| & > li { |
| background-color: $nav-main-level-1-background-color; |
| & > a { |
| border-bottom: 1px solid $border-color; |
| min-height: 50px; |
| display: block; |
| font-size: 16px; |
| font-weight: 400; |
| |
| color: $nav-main-level-1-font-color; |
| padding: 14px 0 10px 25px; |
| |
| } |
| // Level 2 |
| ul { |
| display: none; |
| border: none; |
| } |
| |
| &.expand { |
| ul { |
| display: block; |
| } |
| } |
| |
| li { |
| background-color: $nav-main-level-2-background-color; |
| |
| & > a { |
| min-height: 40px; |
| font-size: 14px; |
| display: block; |
| padding: 8px 0 8px 35px; |
| line-height: 20px; |
| border-left: 5px solid $nav-main-level-2-background-color; |
| &.active { |
| background-color: $nav-main-level-2-active-background-color; |
| border-left: 5px solid $nav-main-level-2-active-border-color; |
| color: $nav-main-level-2-active-link-color; |
| &:hover { |
| color: $nav-main-level-2-active-link-color; |
| |
| } |
| } |
| } |
| } |
| |
| // Level 3 |
| ul ul { |
| a { |
| padding-left: 55px; |
| } |
| } |
| |
| // Level 4 |
| ul ul ul { |
| a { |
| padding-left: 75px; |
| } |
| } |
| } |
| } |
| } |