responsive-2.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. //sidebar is automatically minimized in smaller views
  2. .enable_minimized_responsive_menu() when(@enable-minimized-responsive-menu = true) {
  3. .sidebar-toggle.sidebar-expand {
  4. display: none;
  5. }
  6. @media (max-width: @grid-float-breakpoint-max) {
  7. .menu-toggler.invisible {
  8. position: fixed;
  9. z-index: -999;
  10. visibility: hidden;
  11. opacity: 0;
  12. width: 1px;
  13. height: 1px;
  14. }
  15. .sidebar.responsive-min {
  16. .menu_min();
  17. &:before {
  18. display: block;
  19. }
  20. .sidebar-toggle.sidebar-collapse {
  21. display: none;
  22. }
  23. .sidebar-toggle.sidebar-expand {
  24. display: block;
  25. }
  26. + .main-content {
  27. margin-left: @sidebar-min-width !important;
  28. .rtl & {
  29. margin-left: auto !important;
  30. margin-right: @sidebar-min-width !important;
  31. }
  32. .breadcrumb {
  33. margin-left: @breadcrumb-margin-left;
  34. }
  35. }
  36. }
  37. .sidebar.responsive-max {
  38. display: block;
  39. position: relative;
  40. left: @sidebar-width;
  41. margin-left: -(@sidebar-width);
  42. z-index: @zindex-sidebar-fixed;
  43. .box-shadow(~"2px 1px 2px 0 rgba(0,0,0,0.15)");
  44. &:before {
  45. display: none;
  46. }
  47. .sidebar-toggle {
  48. &.sidebar-collapse {
  49. display: none;
  50. }
  51. &.sidebar-expand {
  52. display: block;
  53. z-index: 1;//to go above ul:before, etc when scrolled
  54. }
  55. }
  56. + .main-content {
  57. margin-left: (@sidebar-min-width) !important;
  58. .breadcrumb {
  59. margin-left: @breadcrumb-margin-left;
  60. }
  61. }
  62. }
  63. }
  64. }
  65. .enable_minimized_responsive_menu();