sideBar.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. .main-sidebar {
  2. position: fixed;
  3. z-index: 900;
  4. height: 100%;
  5. }
  6. .sidebar {
  7. height: 100% !important;
  8. overflow: hidden;
  9. overflow-y: auto;
  10. }
  11. .skin-blue .main-sidebar {
  12. background-color: #3c8dbc;
  13. }
  14. .skin-blue .sidebar-menu > li.treeview:hover > a {
  15. border-left: 3px solid rgba(0, 0, 0, 0.1);
  16. }
  17. .skin-blue .sidebar-menu > li.treeview.active > a {
  18. border-left: 3px solid rgba(0, 0, 0, 0.1);
  19. }
  20. .skin-blue .sidebar .second-menu,
  21. .skin-blue .sidebar .third-menu {
  22. padding-left: 0;
  23. }
  24. .skin-blue .sidebar .third-menu a {
  25. padding-left: 30px;
  26. }
  27. .skin-blue .sidebar a {
  28. color: #000000;
  29. }
  30. /*侧边栏滚动设置 start*/
  31. #sidebar-menu > li:hover .sidebar-title-bar {
  32. position: static;
  33. }
  34. .sidebar-collapse #sidebar-menu > li:hover .sidebar-title-bar {
  35. position: fixed;
  36. }
  37. #sidebar-menu > li:hover > ul {
  38. position: static;
  39. height: auto;
  40. }
  41. .sidebar-collapse #sidebar-menu > li:hover > ul {
  42. position: fixed;
  43. overflow-y: auto;
  44. }
  45. a.sidebar-toggle {
  46. width: 100%;;
  47. height: 36px;
  48. line-height: 36px;
  49. text-align: center;
  50. background-color: #2e658a;
  51. color: white !important;
  52. display: block;
  53. }
  54. .sidebar-collapse a.sidebar-toggle div.fold {
  55. -webkit-transform: rotate(90deg);
  56. -moz-transform: rotate(90deg);
  57. -ms-transform: rotate(90deg);
  58. -o-transform: rotate(90deg);
  59. transform: rotate(90deg);
  60. transition: transform .5s;
  61. }
  62. /*侧边栏滚动设置 end*/
  63. .skin-blue .treeview-menu li > a {
  64. border-left: 3px solid #3c8dbc;
  65. }
  66. .skin-blue .treeview-menu li > a:hover,
  67. .skin-blue .treeview-menu li.active > a {
  68. background-color: rgba(0, 0, 0, 0.1);
  69. border-left-color: rgba(0, 0, 0, 0.3);
  70. }
  71. .skin-blue .treeview-menu > li > a {
  72. color: white;
  73. padding-left: 35px;
  74. padding-right: 26px !important;
  75. }
  76. .skin-blue .sidebar-menu > li > .treeview-menu {
  77. margin: 0;
  78. background: #3c8dbc;
  79. }
  80. .sidebar-menu li.active > .treeview-menu {
  81. background: #3c8dbc;
  82. }
  83. .sidebar-title-bar .fa-angle-left,
  84. .sidebar-title-bar .pull-right-container > .fa-angle-lef {
  85. width: auto;
  86. height: auto;
  87. padding: 0;
  88. margin-right: 10px;
  89. }
  90. /*侧边栏收起后向右展开的边框宽度*/
  91. .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
  92. .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  93. border-radius: 0;
  94. width: 220px;
  95. }
  96. /*侧边栏收起后向右展开时一级菜单箭头的位置*/
  97. .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
  98. left: 220px !important;
  99. }
  100. .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
  101. padding-top: 0;
  102. padding-bottom: 0;
  103. border-radius: 0;
  104. }
  105. .skin-blue .sidebar-menu > li:hover > a,
  106. .skin-blue .sidebar-menu > li.active > a {
  107. color: #3c8dbc;
  108. background: #3375A1;
  109. }
  110. .skin-blue .treeview-menu > li.active > a,
  111. .skin-blue .treeview-menu > li > a:hover {
  112. color: white;
  113. }
  114. .main-sidebar .iconName {
  115. margin-right: 10px;
  116. color: white
  117. }
  118. .menuTitle a.active {
  119. color: #f8f8f8;
  120. }
  121. .sidebar-menu span {
  122. color: white;
  123. }
  124. li.menuTitle a {
  125. overflow: hidden;
  126. white-space: nowrap;
  127. text-overflow: ellipsis;
  128. padding-right: 20px !important;
  129. }
  130. .main-sidebar .secondMenuTitle {
  131. padding-left: 10px;
  132. color: white;
  133. }
  134. .main-sidebar .thirdMenuTitle {
  135. font-size: 12px;
  136. padding-left: 32px;
  137. color: white;
  138. }
  139. .main-sidebar .pull-right {
  140. color: white
  141. }
  142. @media screen and (max-width: 768px) {
  143. a.sidebar-toggle {
  144. position: absolute;
  145. top: 50%;
  146. width: 26px;
  147. height: 36px;
  148. left: 100%;
  149. }
  150. }
  151. /*侧边栏滚动条*/
  152. .sidebar {
  153. -ms-scroll-chaining: chained;
  154. -ms-overflow-style: none;
  155. -ms-content-zooming: zoom;
  156. -ms-scroll-rails: none;
  157. -ms-content-zoom-limit-min: 100%;
  158. -ms-content-zoom-limit-max: 500%;
  159. -ms-scroll-snap-type: proximity;
  160. -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  161. }
  162. .sidebar::-webkit-scrollbar {
  163. width: 0;
  164. background-color: rgba(0, 0, 0, 0);
  165. }
  166. /*侧边栏二级菜单滚动条*/
  167. .scroll-list {
  168. -ms-scroll-chaining: chained;
  169. -ms-overflow-style: none;
  170. -ms-content-zooming: zoom;
  171. -ms-scroll-rails: none;
  172. -ms-content-zoom-limit-min: 100%;
  173. -ms-content-zoom-limit-max: 500%;
  174. -ms-scroll-snap-type: proximity;
  175. -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  176. }
  177. .scroll-list::-webkit-scrollbar {
  178. width: 0;
  179. background-color: rgba(0, 0, 0, 0);
  180. }