AdminLTE/build/scss/_control-sidebar.scss

179 lines
2.9 KiB
SCSS
Raw Normal View History

//
// Component: Control Sidebar
//
html.control-sidebar-animate {
overflow-x: hidden;
}
2015-10-31 21:00:16 +00:00
.control-sidebar {
bottom: $main-footer-height;
2015-10-31 21:00:16 +00:00
position: absolute;
2016-10-22 19:32:28 +00:00
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);
2015-10-31 21:00:16 +00:00
}
&::before {
content: '';
display: block;
position: fixed;
top: 0;
z-index: -1;
2015-10-31 21:00:16 +00:00
}
}
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;
}
2019-08-13 12:37:16 +00:00
.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
@include transition(margin-right $transition-speed $transition-fn);
}
}
// Control sidebar open state
2015-10-31 21:00:16 +00:00
.control-sidebar-open {
.control-sidebar {
display: block;
2016-10-22 19:32:28 +00:00
&,
&::before {
right: 0;
2015-10-31 21:00:16 +00:00
}
}
&.control-sidebar-push,
&.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
margin-right: $control-sidebar-width;
2016-10-22 19:32:28 +00:00
}
2015-10-31 21:00:16 +00:00
}
}
// 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);
}
}
2019-08-13 12:37:16 +00:00
&.control-sidebar-push,
&.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
margin-right: $control-sidebar-width;
2015-10-31 21:00:16 +00:00
}
}
}
// Dark skin
.control-sidebar-dark {
&,
a,
.nav-link {
color: $sidebar-dark-color;
}
2015-10-31 21:00:16 +00:00
// Background
& {
background: $sidebar-dark-bg;
}
2015-10-31 21:00:16 +00:00
a:hover {
color: $sidebar-dark-hover-color;
2015-10-31 21:00:16 +00:00
}
2016-10-22 19:32:28 +00:00
// Headers and labels
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: $sidebar-dark-hover-color;
2015-10-31 21:00:16 +00:00
}
// Tabs
.nav-tabs {
2016-10-22 19:32:28 +00:00
background-color: $sidebar-dark-hover-bg;
border-bottom: 0;
margin-bottom: 5px;
.nav-item {
2015-10-31 21:00:16 +00:00
margin: 0;
}
.nav-link {
border-radius: 0;
padding: 10px 20px;
position: relative;
text-align: center;
&,
&:hover,
&:active,
&:focus,
&.active {
border: 0;
2015-10-31 21:00:16 +00:00
}
&:hover,
&:active,
&:focus,
2015-10-31 21:00:16 +00:00
&.active {
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
color: $sidebar-dark-hover-color;
2015-10-31 21:00:16 +00:00
}
&.active {
background-color: $sidebar-dark-bg;
2015-10-31 21:00:16 +00:00
}
}
}
.tab-pane {
padding: 10px 15px;
}
2015-10-31 21:00:16 +00:00
}
// Light skin
2015-10-31 21:00:16 +00:00
.control-sidebar-light {
color: lighten($sidebar-light-color, 10%);
// Background
& {
2015-10-31 21:00:16 +00:00
background: $sidebar-light-bg;
border-left: $main-header-bottom-border;
2015-10-31 21:00:16 +00:00
}
}