//side menu toggler in mobile view
|
@sidebar-toggler-background: #444;
|
@sidebar-toggler-color: #FFF;
|
|
|
.main-container .menu-toggler {
|
display: none;
|
}
|
|
.enable_responsive_menu() when(@enable-responsive-menu = true) {
|
@duration : 0.2s;
|
|
//responsive sidebar
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
.sidebar.responsive:before {
|
display: none;
|
}
|
|
.sidebar.responsive {
|
.box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.15)");
|
|
z-index: @zindex-sidebar-fixed;
|
|
overflow: hidden;
|
max-height: 0;
|
|
.transform(translateX(-@sidebar-width - 10));
|
//"left" or "margin-left" transition is slow on Chrome, so we use translateX
|
-webkit-transition: -webkit-transform @duration linear 0s, max-height 0s linear @duration;
|
-moz-transition: -moz-transform @duration linear 0s, max-height 0s linear @duration;
|
-o-transition: -o-transform @duration linear 0s, max-height 0s linear @duration;
|
transition: transform @duration linear 0s, max-height 0s linear @duration;
|
|
|
position: relative;
|
bottom: auto;
|
//top: auto has a problem with android default browser if sidebar is fixed
|
|
left: @sidebar-width;
|
margin-left: -(@sidebar-width);
|
//why are we doing this?
|
//we don't use "position: absolute" so that our page's height is at least as tall as .sidebar
|
//and therefore our page background is white when sidebar is expanded (whitened by .main-container:before) (it won't happen on position: absolute)
|
//but "position: relative" will push ".main-content" to left
|
//so we use negative "margin-left" on .sidebar to get more space and bring back .main-content
|
//and then we move .sidebar again back to its place using "left" property
|
//so it will look like the "position: absolute" alternative, but it's not
|
}
|
}
|
|
@media (min-width: @screen-compact-menu) and (max-width: @grid-float-breakpoint-max) {
|
.sidebar.responsive.compact {
|
.transform(translateX(-@sidebar-compact-width - 10));
|
|
&.push_away.display + .main-content {
|
.transform(translateX(@sidebar-compact-width));
|
}
|
.navbar.navbar-fixed-top + .main-container & {
|
&.push_away.display ~ .footer .footer-inner {
|
.transform(translateX(@sidebar-compact-width));
|
}
|
}
|
}
|
}
|
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
.sidebar.responsive {
|
&.menu-min {
|
.transform(translateX(-@sidebar-min-width - 10));
|
}
|
|
&.display {
|
.transform(none) !important;//to override .rtl's
|
overflow: visible;
|
max-height: 2000px;
|
|
-webkit-transition-delay: 0s;
|
-moz-transition-delay: 0s;
|
-o-transition-delay: 0s;
|
transition-delay: 0s;
|
}
|
|
//push .main-content to left
|
&.push_away {
|
.box-shadow(none) !important;//to override .RTL's
|
&:before {
|
display: block !important;
|
}
|
|
+ .main-content {
|
-webkit-transition: -webkit-transform @duration linear 0s;
|
-moz-transition: -moz-transform @duration linear 0s;
|
-o-transition: -o-transform @duration linear 0s;
|
transition: transform @duration linear 0s;
|
}
|
&.display + .main-content {
|
.transform(translateX(@sidebar-width));
|
}
|
&.display.menu-min + .main-content {
|
.transform(translateX(@sidebar-min-width));
|
}
|
}
|
|
.navbar.navbar-fixed-top + .main-container & {
|
&.push_away {
|
&:before {
|
height: 5000px;
|
}
|
|
.enable_footer_responsive_menu_push() when (@enable-footer = true) {
|
~ .footer .footer-inner {
|
-webkit-transition: -webkit-transform @duration linear 0s;
|
-moz-transition: -moz-transform @duration linear 0s;
|
-o-transition: -o-transform @duration linear 0s;
|
transition: transform @duration linear 0s;
|
}
|
&.display ~ .footer .footer-inner {
|
.transform(translateX(@sidebar-width));
|
}
|
&.display.menu-min ~ .footer .footer-inner {
|
.transform(translateX(@sidebar-min-width));
|
}
|
}
|
.enable_footer_responsive_menu_push();
|
|
}
|
}
|
|
|
|
// &.menu-min .nav-list > li.active:after {
|
//display: block;
|
// }
|
|
+ .main-content {
|
margin-left: 0 !important;
|
margin-right: 0 !important;//to override rtl's
|
}
|
}
|
|
}
|
|
|
.enable_container_responsive_1() when(@enable-container = true) {
|
//maybe disable transition when it is not good enough!
|
@media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
|
.main-container.container .sidebar.responsive {
|
-webkit-transition: none;
|
-moz-transition: none;
|
-o-transition: none;
|
transition: none;
|
|
display: none;
|
&:before {
|
display: none !important;
|
}
|
&.display {
|
display: block;
|
}
|
|
&.push_away {
|
+ .main-content, ~ .footer .footer-inner {
|
-webkit-transition: none !important;
|
-moz-transition: none !important;
|
-o-transition: none !important;
|
transition: none !important;
|
|
.transform(none) !important;
|
}
|
}
|
}
|
}
|
}
|
.enable_container_responsive_1();
|
|
}
|
.enable_responsive_menu();
|
|
|
|
//************************************************************************************
|
//remove the following to disable fixed sidebar (style1 - default) on smaller devices
|
//if you also want to disable fixed breadcrumbs on smalelr devices, refer to breadcrumbs.less
|
@media only screen and (max-width: @grid-float-breakpoint-max) {
|
.responsive.sidebar-fixed {
|
position: fixed;
|
}
|
.main-container .menu-toggler.fixed {
|
position: fixed;
|
left: auto;
|
z-index: @zindex-sidebar-fixed - 1;
|
-moz-backface-visibility: hidden;
|
}
|
}
|
