sidebar.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. #app {
  2. .main-container {
  3. min-height: calc(100% - 10px);
  4. transition: margin-left 0.28s;
  5. }
  6. // 侧边栏
  7. .sidebar-container {
  8. transition: width 0.3s;
  9. width: inherit;
  10. height: 100%;
  11. position: fixed;
  12. font-size: 0px;
  13. top: 0;
  14. bottom: 0;
  15. left: 0;
  16. z-index: 1001;
  17. overflow: hidden;
  18. box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
  19. // border-right: 1px solid #eaeaea;
  20. // reset element-ui css
  21. .horizontal-collapse-transition {
  22. transition: 0s width ease-in-out, 0s padding-left ease-in-out,
  23. 0s padding-right ease-in-out;
  24. }
  25. .scrollbar-wrapper {
  26. overflow-x: hidden !important;
  27. }
  28. .el-scrollbar__bar.is-vertical {
  29. right: 0px;
  30. }
  31. .el-scrollbar {
  32. height: 90%;
  33. }
  34. &.has-logo {
  35. .el-scrollbar {
  36. height: calc(100% - 50px);
  37. }
  38. }
  39. .is-horizontal {
  40. display: none;
  41. }
  42. a {
  43. display: inline-block;
  44. width: 100%;
  45. height: 100%;
  46. overflow: hidden;
  47. }
  48. .svg-icon {
  49. margin-right: 10px;
  50. }
  51. .el-menu-item {
  52. &.is-active {
  53. background-color: $menuHover !important;
  54. color: $menuActiveText !important;
  55. }
  56. }
  57. .el-menu--collapse {
  58. .el-menu-item span,
  59. .el-submenu > .el-submenu__title span {
  60. height: 0;
  61. width: 0;
  62. overflow: hidden;
  63. visibility: hidden;
  64. display: inline-block;
  65. }
  66. .el-menu-item .el-submenu__icon-arrow,
  67. .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  68. display: none;
  69. }
  70. }
  71. }
  72. }