multiple.less 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. //multiple sidebar
  2. .main-content-inner {
  3. float: left;
  4. width: 100%;
  5. }
  6. .main-content .sidebar {
  7. &:before {
  8. top: 150px;
  9. }
  10. }
  11. @media only screen and (min-width: @grid-float-breakpoint) {
  12. body.mob-safari {
  13. .sidebar.h-sidebar + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
  14. top: @navbar-min-height + 17 + 69;
  15. }
  16. .sidebar.h-sidebar.no-gap + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
  17. top: @navbar-min-height + 69;
  18. }
  19. .sidebar.h-sidebar.menu-min + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
  20. top: @navbar-min-height + 17 + 44;
  21. }
  22. .sidebar.h-sidebar.menu-min.no-gap + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
  23. top: @navbar-min-height + 44;
  24. }
  25. }
  26. }
  27. .enable_horizontal_menu_multiple() when (@enable-horizontal-menu = true) {
  28. @media only screen and (min-width: @grid-float-breakpoint) {
  29. .h-navbar.navbar-fixed-top + .main-container .sidebar:not(.h-sidebar) {
  30. &:before {
  31. top: 150px;
  32. }
  33. .nav-list {
  34. padding-top: 3px;
  35. }
  36. .sidebar-shortcuts ~ .nav-list, .sidebar-shortcuts ~ .nav-wrap-up .nav-list {
  37. padding-top: 0;
  38. }
  39. .sidebar-shortcuts {
  40. padding-top: 3px;
  41. min-height: 43px;
  42. }
  43. &.menu-min .sidebar-shortcuts-large {
  44. line-height: 40px;
  45. }
  46. }
  47. .h-navbar.navbar-fixed-top + .main-container .main-content .sidebar {
  48. &:not(.h-sidebar) .nav-list {
  49. padding-top: 0;
  50. }
  51. &.sidebar-fixed {
  52. z-index: @zindex-sidebar-fixed - 1;
  53. }
  54. }
  55. .main-content .h-sidebar {
  56. padding-top: 1px;
  57. margin-top: 0;
  58. &:before {
  59. display: none;
  60. }
  61. + .page-content {
  62. margin-left: auto;
  63. }
  64. &.sidebar-fixed {
  65. left: @sidebar-width;
  66. + .page-content {
  67. margin-top: 74px;
  68. }
  69. &.menu-min + .page-content {
  70. margin-top: 49px;
  71. }
  72. }
  73. &.menu-min .nav-list > li > a {
  74. padding: 8px 12px 7px;//for better sidebar1 & sidebar2 alignnment?
  75. }
  76. }
  77. .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
  78. left: @sidebar-compact-width;
  79. }
  80. .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
  81. left: @sidebar-min-width;
  82. }
  83. .navbar.navbar-fixed-top + .main-container .main-content .h-sidebar.sidebar-fixed {
  84. padding-top: 3px;
  85. }
  86. }//@media
  87. .enable_container_multiple_menu() when(@enable-container = true) {
  88. .container.main-container {
  89. .sidebar + .main-content .h-sidebar.sidebar-fixed {
  90. left: auto;
  91. right: auto;
  92. }
  93. @media (min-width: max(@screen-sm-min , @grid-float-breakpoint, @screen-compact-menu)) {
  94. .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
  95. width: @container-sm - @sidebar-compact-width;
  96. }
  97. }
  98. @media (min-width: max(@screen-sm-min , @grid-float-breakpoint)) {
  99. .main-content .h-sidebar.sidebar-fixed {
  100. width: @container-sm;
  101. }
  102. .sidebar + .main-content .h-sidebar.sidebar-fixed {
  103. width: @container-sm - @sidebar-width;
  104. }
  105. .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
  106. width: @container-sm - @sidebar-min-width;
  107. }
  108. }
  109. @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
  110. .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
  111. width: @container-md - @sidebar-compact-width;
  112. }
  113. }
  114. @media (min-width: @screen-md-min) {
  115. .main-content .h-sidebar.sidebar-fixed {
  116. width: @container-md;
  117. }
  118. .sidebar + .main-content .h-sidebar.sidebar-fixed {
  119. width: @container-md - @sidebar-width;
  120. }
  121. .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
  122. width: @container-md - @sidebar-min-width;
  123. }
  124. }
  125. @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
  126. .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
  127. width: @container-lg - @sidebar-compact-width;
  128. }
  129. }
  130. @media (min-width: @screen-lg-min) {
  131. .main-content .h-sidebar.sidebar-fixed {
  132. width: @container-lg;
  133. }
  134. .sidebar + .main-content .h-sidebar.sidebar-fixed {
  135. width: @container-lg - @sidebar-width;
  136. }
  137. .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
  138. width: @container-lg - @sidebar-min-width;
  139. }
  140. }
  141. }
  142. }
  143. .enable_container_multiple_menu();
  144. }
  145. .enable_horizontal_menu_multiple();
  146. @media only screen and (max-width: @grid-float-breakpoint-max) {
  147. .main-container .main-content .sidebar {
  148. &.sidebar-fixed {
  149. z-index: @zindex-sidebar-fixed - 1;
  150. }
  151. }
  152. .navbar-fixed-top + .main-container .main-content .sidebar {
  153. position: fixed;
  154. z-index: @zindex-sidebar-fixed - 1;
  155. }
  156. }