155 lines
3.1 KiB
SCSS
155 lines
3.1 KiB
SCSS
/**
|
|
* A side-locked navbar.
|
|
*/
|
|
nav.sidebar {
|
|
color: $sidebar-color;
|
|
background-color: $sidebar-bg;
|
|
box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.25) inset;
|
|
width: $sidebar-width-lg;
|
|
height: calc(100vh - 50px);
|
|
position: fixed;
|
|
top: $navbar-height;
|
|
left: $sidebar-left-lg;
|
|
padding: $sidebar-padding-lg;
|
|
font-size: $sidebar-font-size;
|
|
|
|
p {
|
|
margin-bottom: 0px;
|
|
margin-top: $sidebar-item-spacing;
|
|
|
|
&:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
.fa-2x{
|
|
font-size: 3rem;
|
|
}
|
|
|
|
hr {
|
|
width: $sidebar-divider-width;
|
|
border-color: $sidebar-divider-color;
|
|
border-width: 2px;
|
|
margin: $sidebar-divider-margin auto;
|
|
}
|
|
|
|
a {
|
|
color: $sidebar-color;
|
|
position: relative;
|
|
padding: $sidebar-item-padding-lg;
|
|
margin-bottom: 5px;
|
|
width: 100%;
|
|
display: block;
|
|
transition: color 100ms ease-in-out;
|
|
border-radius: $sidebar-item-border-radius;
|
|
|
|
p {
|
|
color: $sidebar-link-color;
|
|
}
|
|
|
|
&.active {
|
|
z-index: 1000;
|
|
background-color: $sidebar-link-color;
|
|
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
&:hover, &.active {
|
|
color: $sidebar-link-hover-color;
|
|
text-decoration: none;
|
|
|
|
p {
|
|
color: $sidebar-link-hover-color;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $sidebar-link-hover-bg;
|
|
}
|
|
}
|
|
|
|
&.has-submenu {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
nav.has-submenu > nav.submenu {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: $sidebar-submenu-width-lg;
|
|
top: $navbar-height;
|
|
left: $sidebar-width-lg;
|
|
background-color: $sidebar-submenu-bg;
|
|
box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.25) inset;
|
|
padding-top: $sidebar-submenu-top-offset;
|
|
|
|
a {
|
|
display: block;
|
|
color: $sidebar-submenu-color;
|
|
width: 100%;
|
|
|
|
&:hover, &.active {
|
|
color: $sidebar-submenu-hover-color;
|
|
text-decoration: none;
|
|
background-color: $sidebar-submenu-hover-bg;
|
|
border-radius: $sidebar-submenu-item-border-radius;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
nav.sidebar {
|
|
width: $sidebar-width-xs;
|
|
left: $sidebar-left-xs;
|
|
padding: $sidebar-padding-xs;
|
|
box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.25) inset;
|
|
|
|
a {
|
|
padding: $sidebar-item-padding-xs;
|
|
}
|
|
|
|
&.has-submenu {
|
|
width: $sidebar-width-xs;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
nav.has-submenu > nav.submenu {
|
|
left: calc(100% - #{$sidebar-width-xs} -
|
|
#{$sidebar-submenu-width-xs});
|
|
box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.25) inset;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
|
|
nav.sidebar {
|
|
width: $sidebar-width-sm;
|
|
left: $sidebar-left-sm;
|
|
padding: $sidebar-padding-sm;
|
|
|
|
a {
|
|
padding: $sidebar-item-padding-sm;
|
|
}
|
|
}
|
|
nav.has-submenu > nav.submenu {
|
|
width: $sidebar-submenu-width-sm;
|
|
left: $sidebar-width-sm;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-md-max) and (min-width: $screen-md-min) {
|
|
nav.sidebar {
|
|
width: $sidebar-width-md;
|
|
left: $sidebar-left-md;
|
|
padding: $sidebar-padding-md;
|
|
|
|
a {
|
|
padding: $sidebar-item-padding-md;
|
|
}
|
|
}
|
|
|
|
nav.has-submenu > nav.submenu {
|
|
width: $sidebar-submenu-width-md;
|
|
left: $sidebar-width-md;
|
|
}
|
|
} |