mirror of https://github.com/ColorlibHQ/AdminLTE
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
2.9 KiB
173 lines
2.9 KiB
// |
|
// Component: Control Sidebar |
|
// |
|
|
|
html.control-sidebar-animate { |
|
overflow-x: hidden; |
|
} |
|
|
|
.control-sidebar { |
|
bottom: $main-footer-height; |
|
position: absolute; |
|
top: $main-header-height; |
|
z-index: $zindex-control-sidebar; |
|
|
|
&, |
|
&::before { |
|
bottom: $main-footer-height; |
|
display: none; |
|
right: -$control-sidebar-width; |
|
width: $control-sidebar-width; |
|
@include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn); |
|
} |
|
|
|
&::before { |
|
content: ""; |
|
display: block; |
|
position: fixed; |
|
top: 0; |
|
z-index: -1; |
|
} |
|
} |
|
|
|
body.text-sm { |
|
.control-sidebar { |
|
bottom: $main-footer-height-sm; |
|
top: $main-header-height-sm; |
|
} |
|
} |
|
|
|
.main-header.text-sm ~ .control-sidebar { |
|
top: $main-header-height-sm; |
|
} |
|
|
|
.main-footer.text-sm ~ .control-sidebar { |
|
bottom: $main-footer-height-sm; |
|
} |
|
|
|
.control-sidebar-push-slide { |
|
.content-wrapper, |
|
.main-footer { |
|
@include transition(margin-right $transition-speed $transition-fn); |
|
} |
|
} |
|
|
|
// Control sidebar open state |
|
.control-sidebar-open { |
|
.control-sidebar { |
|
display: block; |
|
|
|
&, |
|
&::before { |
|
right: 0; |
|
} |
|
} |
|
|
|
&.control-sidebar-push, |
|
&.control-sidebar-push-slide { |
|
.content-wrapper, |
|
.main-footer { |
|
margin-right: $control-sidebar-width; |
|
} |
|
} |
|
} |
|
|
|
// Control sidebar slide over content state |
|
.control-sidebar-slide-open { |
|
.control-sidebar { |
|
display: block; |
|
|
|
&, |
|
&::before { |
|
right: 0; |
|
@include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn); |
|
} |
|
} |
|
|
|
&.control-sidebar-push, |
|
&.control-sidebar-push-slide { |
|
.content-wrapper, |
|
.main-footer { |
|
margin-right: $control-sidebar-width; |
|
} |
|
} |
|
} |
|
|
|
// Dark skin |
|
.control-sidebar-dark { |
|
background-color: $sidebar-dark-bg; |
|
|
|
&, |
|
a, |
|
.nav-link { |
|
color: $sidebar-dark-color; |
|
} |
|
|
|
a:hover { |
|
color: $sidebar-dark-hover-color; |
|
} |
|
|
|
// Headers and labels |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6, |
|
label { |
|
color: $sidebar-dark-hover-color; |
|
} |
|
|
|
// Tabs |
|
.nav-tabs { |
|
background-color: $sidebar-dark-hover-bg; |
|
border-bottom: 0; |
|
margin-bottom: 5px; |
|
|
|
.nav-item { |
|
margin: 0; |
|
} |
|
|
|
.nav-link { |
|
border-radius: 0; |
|
padding: 10px 20px; |
|
position: relative; |
|
text-align: center; |
|
|
|
&, |
|
&:hover, |
|
&:active, |
|
&:focus, |
|
&.active { |
|
border: 0; |
|
} |
|
|
|
&:hover, |
|
&:active, |
|
&:focus, |
|
&.active { |
|
border-bottom-color: transparent; |
|
border-left-color: transparent; |
|
border-top-color: transparent; |
|
color: $sidebar-dark-hover-color; |
|
} |
|
|
|
&.active { |
|
background-color: $sidebar-dark-bg; |
|
} |
|
} |
|
} |
|
|
|
.tab-pane { |
|
padding: 10px 15px; |
|
} |
|
} |
|
|
|
// Light skin |
|
.control-sidebar-light { |
|
color: lighten($sidebar-light-color, 10%); |
|
|
|
// Background |
|
background-color: $sidebar-light-bg; |
|
border-left: $main-header-bottom-border; |
|
}
|
|
|