blob: e44c651cf5f3ec3ec209ebcaff6553e631e59cbb [file] [log] [blame]
#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;
}
}
}
}
}