sidebar-mini.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /*
  2. * Component: Sidebar Mini
  3. */
  4. //Add sidebar-mini class to the body tag to activate this feature
  5. .sidebar-mini {
  6. //Sidebar mini should work only on devices larger than @screen-sm
  7. @media (min-width: @screen-sm) {
  8. //When the sidebar is collapsed...
  9. &.sidebar-collapse {
  10. //Apply the new margining to the main content and footer
  11. .content-wrapper,
  12. .right-side,
  13. .main-footer {
  14. margin-left: 50px !important;
  15. z-index: 840;
  16. }
  17. //Modify the sidebar to shrink instead of disappearing
  18. .main-sidebar {
  19. //Don't go away! Just shrink
  20. .translate(0, 0);
  21. width: 50px !important;
  22. z-index: 850;
  23. }
  24. .sidebar-menu {
  25. > li {
  26. position: relative;
  27. > a {
  28. margin-right: 0;
  29. }
  30. > a > span {
  31. border-top-right-radius: 4px;
  32. }
  33. &:not(.treeview) {
  34. > a > span {
  35. border-bottom-right-radius: 4px;
  36. }
  37. }
  38. > .treeview-menu {
  39. //Add some padding to the treeview menu
  40. padding-top: 5px;
  41. padding-bottom: 5px;
  42. border-bottom-right-radius: 4px;
  43. }
  44. //Show menu items on hover
  45. &:hover {
  46. > a {
  47. //overflow: visible;
  48. }
  49. > a > span:not(.pull-right),//:not(.pull-right-container),
  50. > .treeview-menu {
  51. display: block !important;
  52. position: absolute;
  53. width: @sidebar-width - 50;
  54. left: 50px;
  55. }
  56. //position the header & treeview menus
  57. > a > span {
  58. top: 0;
  59. margin-left: -3px;
  60. padding: 12px 5px 12px 20px;
  61. background-color: inherit;
  62. }
  63. > a > .pull-right-container {
  64. //display: block!important;
  65. position: relative!important;
  66. float: right;
  67. width: auto!important;
  68. left: 200px - 20px!important;
  69. top: -22px!important;
  70. z-index: 900;
  71. > .label:not(:first-of-type) {
  72. display: none;
  73. }
  74. }
  75. > .treeview-menu {
  76. top: 44px;
  77. margin-left: 0;
  78. }
  79. }
  80. }
  81. }
  82. //Make the sidebar links, menus, labels, badges
  83. //and angle icons disappear
  84. .main-sidebar .user-panel > .info,
  85. .sidebar-form,
  86. .sidebar-menu > li > a > span,
  87. .sidebar-menu > li > .treeview-menu,
  88. .sidebar-menu > li > a > .pull-right,
  89. .sidebar-menu li.header {
  90. display: none !important;
  91. -webkit-transform: translateZ(0);
  92. }
  93. .main-header {
  94. //Let's make the logo also shrink and the mini logo to appear
  95. .logo {
  96. width: 50px;
  97. > .logo-mini {
  98. display: block;
  99. margin-left: -15px;
  100. margin-right: -15px;
  101. font-size: 18px;
  102. }
  103. > .logo-lg {
  104. display: none;
  105. }
  106. }
  107. //Since the logo got smaller, we need to fix the navbar's position
  108. .navbar {
  109. margin-left: 50px;
  110. }
  111. }
  112. }
  113. }
  114. }
  115. //A fix for text overflow while transitioning from sidebar mini to full sidebar
  116. .sidebar-menu,
  117. .main-sidebar .user-panel,
  118. .sidebar-menu > li.header {
  119. white-space: nowrap;
  120. overflow: hidden;
  121. }
  122. .sidebar-menu:hover {
  123. overflow: visible;
  124. }
  125. .sidebar-form,
  126. .sidebar-menu > li.header {
  127. overflow: hidden;
  128. text-overflow: clip;
  129. }
  130. .sidebar-menu li > a {
  131. position: relative;
  132. > .pull-right-container {
  133. position: absolute;
  134. right: 10px;
  135. top: 50%;
  136. margin-top: -7px;
  137. }
  138. }