sideBar.css 4.9 KB

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