Newer
Older
DH_Apicture / src / assets / styles / sidebar.scss
@zhangqy zhangqy on 29 Nov 5 KB first commit
  1. #app {
  2. .main-container {
  3. min-height: 100%;
  4. transition: margin-left 0.28s;
  5. margin-left: $base-sidebar-width;
  6. position: relative;
  7. }
  8.  
  9. .sidebarHide {
  10. margin-left: 0 !important;
  11. }
  12.  
  13. .sidebar-container {
  14. -webkit-transition: width 0.28s;
  15. transition: width 0.28s;
  16. width: $base-sidebar-width !important;
  17. background-color: $base-menu-background;
  18. height: 100%;
  19. position: fixed;
  20. font-size: 0px;
  21. top: 0;
  22. bottom: 0;
  23. left: 0;
  24. z-index: 1001;
  25. overflow: hidden;
  26. -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  27. box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  28.  
  29. // reset element-ui css
  30. .horizontal-collapse-transition {
  31. transition: 0s width ease-in-out, 0s padding-left ease-in-out,
  32. 0s padding-right ease-in-out;
  33. }
  34.  
  35. .scrollbar-wrapper {
  36. overflow-x: hidden !important;
  37. }
  38.  
  39. .el-scrollbar__bar.is-vertical {
  40. right: 0px;
  41. }
  42.  
  43. .el-scrollbar {
  44. height: 100%;
  45. }
  46.  
  47. &.has-logo {
  48. .el-scrollbar {
  49. height: calc(100% - 50px);
  50. }
  51. }
  52.  
  53. .is-horizontal {
  54. display: none;
  55. }
  56.  
  57. a {
  58. display: inline-block;
  59. width: 100%;
  60. overflow: hidden;
  61. &:hover{
  62. text-decoration: none;
  63. }
  64. }
  65.  
  66. .svg-icon {
  67. margin-right: 16px;
  68. }
  69.  
  70. .el-menu {
  71. border: none;
  72. height: 100%;
  73. width: 100% !important;
  74. }
  75. .el-menu-item {
  76. height: 40px !important;
  77. }
  78. .el-menu-item,
  79. .menu-title {
  80. overflow: hidden !important;
  81. text-overflow: ellipsis !important;
  82. white-space: nowrap !important;
  83. }
  84.  
  85. .el-menu-item .el-menu-tooltip__trigger {
  86. display: inline-block !important;
  87. }
  88.  
  89. // menu hover
  90. .sub-menu-title-noDropdown,
  91. .el-sub-menu__title {
  92. &:hover {
  93. background-color: rgba(0, 0, 0, 0.06) !important;
  94. }
  95. }
  96.  
  97. & .theme-dark .is-active > .el-sub-menu__title {
  98. color: $base-menu-color-active !important;
  99. }
  100.  
  101. & .nest-menu .el-sub-menu > .el-sub-menu__title,
  102. & .el-sub-menu .el-menu-item {
  103. min-width: $base-sidebar-width !important;
  104.  
  105. &:hover {
  106. background-color: rgba(0, 0, 0, 0.06) !important;
  107. }
  108. }
  109.  
  110. & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
  111. & .theme-dark .el-sub-menu .el-menu-item {
  112. background-color: $base-sub-menu-background !important;
  113.  
  114. &:hover {
  115. background-color: $base-sub-menu-back-hover !important;
  116. color: $base-sub-menu-clolor-hover !important;
  117. }
  118. }
  119. & .theme-dark .el-menu-item.is-active {
  120. background-color: $base-menu-background-active !important;
  121. }
  122. }
  123.  
  124. .hideSidebar {
  125. .sidebar-container {
  126. width: 54px !important;
  127. }
  128.  
  129. .main-container {
  130. margin-left: 54px;
  131. }
  132.  
  133. .sub-menu-title-noDropdown {
  134. padding: 0 !important;
  135. position: relative;
  136.  
  137. .el-tooltip {
  138. padding: 0 !important;
  139.  
  140. .svg-icon {
  141. margin-left: 20px;
  142. }
  143. }
  144. }
  145.  
  146. .el-sub-menu {
  147. overflow: hidden;
  148.  
  149. & > .el-sub-menu__title {
  150. padding: 0 !important;
  151.  
  152. .svg-icon {
  153. margin-left: 20px;
  154. }
  155. }
  156. }
  157.  
  158. .el-menu--collapse {
  159. .el-sub-menu {
  160. & > .el-sub-menu__title {
  161. & > span {
  162. height: 0;
  163. width: 0;
  164. overflow: hidden;
  165. visibility: hidden;
  166. display: inline-block;
  167. }
  168. & > i {
  169. height: 0;
  170. width: 0;
  171. overflow: hidden;
  172. visibility: hidden;
  173. display: inline-block;
  174. }
  175. }
  176. }
  177. }
  178. }
  179.  
  180. .el-menu--collapse .el-menu .el-sub-menu {
  181. min-width: $base-sidebar-width !important;
  182. }
  183.  
  184. // mobile responsive
  185. .mobile {
  186. .main-container {
  187. margin-left: 0px;
  188. }
  189.  
  190. .sidebar-container {
  191. transition: transform 0.28s;
  192. width: $base-sidebar-width !important;
  193. }
  194.  
  195. &.hideSidebar {
  196. .sidebar-container {
  197. pointer-events: none;
  198. transition-duration: 0.3s;
  199. transform: translate3d(-$base-sidebar-width, 0, 0);
  200. }
  201. }
  202. }
  203.  
  204. .withoutAnimation {
  205. .main-container,
  206. .sidebar-container {
  207. transition: none;
  208. }
  209. }
  210.  
  211.  
  212. }
  213. // 全局滚动条样式
  214. ::-webkit-scrollbar {
  215. width: 10px;
  216. height: 10px;
  217. cursor: pointer;
  218. }
  219.  
  220. ::-webkit-scrollbar-thumb {
  221. //滑块颜色
  222. border-radius: 10px;
  223. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  224. opacity: 0.2;
  225. background: rgba(153,169,191,0.3);
  226. }
  227.  
  228. ::-webkit-scrollbar-track {
  229. // 滚动条的滑轨背景颜色
  230. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  231. border-radius: 0;
  232. background: rgba(153,169,191,0.1);
  233. }
  234. // when menu collapsed
  235. .el-menu--vertical {
  236. & > .el-menu {
  237. .svg-icon {
  238. margin-right: 16px;
  239. }
  240. }
  241.  
  242. .nest-menu .el-sub-menu > .el-sub-menu__title,
  243. .el-menu-item {
  244. &:hover {
  245. // you can use $sub-menuHover
  246. background-color: rgba(0, 0, 0, 0.06) !important;
  247. }
  248. }
  249.  
  250. // the scroll bar appears when the sub-menu is too long
  251. > .el-menu--popup {
  252. max-height: 100vh;
  253. overflow-y: auto;
  254.  
  255. &::-webkit-scrollbar-track-piece {
  256. background: #d3dce6;
  257. }
  258.  
  259. &::-webkit-scrollbar {
  260. width: 6px;
  261. }
  262.  
  263. &::-webkit-scrollbar-thumb {
  264. background: #99a9bf;
  265. border-radius: 20px;
  266. }
  267. }
  268.  
  269. }