element.scss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. //饿了么UI组件的样式重绘
  2. .el-button--large[block] {
  3. width: 100%;
  4. }
  5. //单选框、多选框
  6. .el-checkbox.size-xl .el-checkbox__inner,
  7. .el-radio.size-xl .el-radio__inner{
  8. width: 18px;
  9. height: 18px;
  10. }
  11. .el-checkbox.size-xl .el-checkbox__label,
  12. .el-radio.size-xl .el-radio__label {
  13. font-size: 16px;
  14. font-weight: 400;
  15. }
  16. .el-checkbox.size-xl .el-checkbox__inner::after {
  17. height: 10px;
  18. left: 6px;
  19. top: 1px;
  20. }
  21. .el-radio.size-xl .el-radio__inner::after {
  22. width: 8px;
  23. height: 8px;
  24. }
  25. //消息提示
  26. .el-message {
  27. --el-message-padding: 10px 20px;
  28. border: 0;
  29. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  30. }
  31. //按钮重绘
  32. .el-button[hc-btn] {
  33. border-radius: 6px;
  34. padding: 8px 20px;
  35. font-weight: 400;
  36. height: 40px;
  37. border: 0;
  38. box-shadow: var(--hc-shadow);
  39. &.is-loading:not([class*='el-button--']) {
  40. --el-button-bg-color: #f3f3f3;
  41. --el-button-text-color: #8c9099;
  42. }
  43. &.is-disabled:not([class*='el-button--']) {
  44. --el-button-disabled-text-color: #bfbfbf;
  45. --el-button-disabled-bg-color: #f3f3f3;
  46. }
  47. &:not([class*='el-button--']) {
  48. --el-button-bg-color: #f1f5f8;
  49. --el-button-text-color: #838791;
  50. --el-button-hover-text-color: #838791;
  51. --el-button-active-text-color: #838791;
  52. --el-button-hover-bg-color: var(--el-color-primary-light-9);
  53. --el-button-active-bg-color: var(--el-color-primary-light-8);
  54. }
  55. &.el-button--primary.is-plain {
  56. --el-button-text-color: var(--el-color-primary);
  57. --el-button-bg-color: var(--el-color-primary-light-9);
  58. --el-button-hover-text-color: var(--el-color-primary);
  59. --el-button-hover-bg-color: var(--el-color-primary-light-8);
  60. --el-button-active-text-color: var(--el-color-primary);
  61. --el-button-active-bg-color: var(--el-color-primary-light-7);
  62. }
  63. .material-symbols-rounded {
  64. font-size: 18px;
  65. margin-right: 4px;
  66. }
  67. }
  68. .el-button + .el-button {
  69. margin-left: 20px;
  70. }
  71. //表单
  72. .el-form {
  73. position: relative;
  74. overflow: hidden;
  75. }
  76. //滚动条
  77. .el-scrollbar {
  78. overflow: initial;
  79. .el-scrollbar__bar.is-vertical {
  80. right: -16px;
  81. }
  82. .el-scrollbar__bar.is-horizontal {
  83. bottom: -20px;
  84. }
  85. }
  86. //个人中心项目列表
  87. .hc-project-menu.el-menu {
  88. --el-menu-level: 0;
  89. background-color: initial;
  90. border: initial;
  91. .el-sub-menu {
  92. border: 1px solid #e9e9e9;
  93. border-radius: 3px;
  94. margin-bottom: 20px;
  95. .el-sub-menu__title .hc-menu-icon {
  96. font-size: 20px;
  97. margin-right: 10px;
  98. }
  99. &.is-opened .el-sub-menu__title {
  100. color: var(--el-color-primary);
  101. background-color: var(--el-color-primary-light-8);
  102. }
  103. .el-menu {
  104. background-color: initial;
  105. }
  106. .el-menu-item {
  107. padding-left: 50px;
  108. }
  109. }
  110. .el-menu-item.is-active {
  111. color: var(--el-menu-active-color);
  112. background-color: var(--el-color-primary-light-9);
  113. .hc-menu-icon {
  114. position: absolute;
  115. font-size: 22px;
  116. left: 22px;
  117. }
  118. }
  119. }
  120. //表格
  121. .el-table[hc] {
  122. border: 1px solid #e9e9e9;
  123. --el-table-bg-color: initial;
  124. --el-table-header-bg-color: #DAE8F3;
  125. --el-table-header-text-color: #50545E;
  126. --el-table-tr-bg-color: #F1F5F8;
  127. --el-fill-color-lighter: #E7EEF4;
  128. --el-table-text-color: #666666;
  129. --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
  130. th.el-table__cell>.cell {
  131. font-weight: 400;
  132. }
  133. .el-table__cell {
  134. padding: 12px 0;
  135. }
  136. }