light.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. //浅色 主题变量
  2. [data-theme='light'] {
  3. --el-border-color-base: #e4e7ed;
  4. //表格
  5. .el-table {
  6. --el-table-header-bg-color: #f5f7fa;
  7. --el-table-header-text-color: rgb(31, 34, 37);
  8. }
  9. .el-table__header-wrapper tr th.el-table-fixed-column--right {
  10. background-color: #f5f7fa;
  11. }
  12. //菜单
  13. // hover 交互
  14. .admin-layout {
  15. &-content {
  16. .el-menu {
  17. --el-menu-hover-bg-color: transparent !important;
  18. --el-menu-hover-text-color: #fff !important;
  19. &-item.is-active {
  20. background-color: var(--el-color-primary);
  21. color: var(--el-menu-hover-text-color);
  22. &:hover {
  23. background-color: var(--el-color-primary);
  24. }
  25. }
  26. &-item:hover {
  27. color: var(--el-menu-hover-text-color);
  28. }
  29. .el-sub-menu__title:hover {
  30. color: var(--el-menu-hover-text-color);
  31. }
  32. }
  33. }
  34. }
  35. .el-menu--horizontal {
  36. border: none !important;
  37. }
  38. //白色菜单交互
  39. .admin-layout-theme-light {
  40. .el-menu {
  41. --el-menu-hover-text-color: var(--el-color-primary) !important;
  42. --el-menu-bg-color: #fff !important;
  43. --el-menu-text-color: rgb(51, 54, 57);
  44. --el-menu-hover-text-color: var(--el-color-primary) !important;
  45. &-item.is-active {
  46. color: #fff;
  47. }
  48. }
  49. }
  50. //去掉横向菜单,灰色背景色
  51. .admin-layout {
  52. .admin-layout-header {
  53. .layout-header {
  54. .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  55. background: none;
  56. color: var(--el-menu-active-color) !important;
  57. }
  58. }
  59. }
  60. .el-menu--horizontal .el-sub-menu__title:hover {
  61. color: var(--el-color-primary);
  62. }
  63. }
  64. }