Просмотр исходного кода

fix(cfc-web): 修复弹窗确认按钮文字与背景同色不可见

Element MessageBox 的确定按钮同时带 el-button--default 与 el-button--primary;
--default:focus 将文字改为主色蓝,--primary:focus 将背景设为主色蓝,导致蓝字蓝底。
- --default 的 hover/focus 规则排除 --primary
- 主按钮显式声明 color:#fff(含 hover/focus/active/disabled)

[skip ci]
cfc-deploy 5 дней назад
Родитель
Сommit
8becd97390
2 измененных файлов с 11 добавлено и 8 удалено
  1. 1 1
      cfc-web/.last_build_commit
  2. 10 7
      cfc-web/src/styles/admin-tokens.css

+ 1 - 1
cfc-web/.last_build_commit

@@ -1 +1 @@
-7ecb11d028c86ac9796d0e48d4195a211b429d72
+0e46bc0c1bb150a23028934109ddf9380bef07fe

+ 10 - 7
cfc-web/src/styles/admin-tokens.css

@@ -129,15 +129,18 @@
 
 
 /* ---- 按钮:统一圆角 6px(规范 radius-control) ---- */
 /* ---- 按钮:统一圆角 6px(规范 radius-control) ---- */
 .el-button { border-radius: var(--adm-radius-control); font-weight: 400; }
 .el-button { border-radius: var(--adm-radius-control); font-weight: 400; }
-.el-button--default { border-color: var(--adm-border-base); color: var(--adm-text-88); }
-.el-button--default:hover,
-.el-button--default:focus { color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); background: #fff; }
-.el-button--primary { background-color: var(--adm-primary); border-color: var(--adm-primary); }
+/* 注意:Element MessageBox 的「确定」按钮会同时带 el-button--default 与 el-button--primary
+   两个类。--default 的 hover/focus 规则必须排除 --primary,否则会把主按钮文字改成主色蓝,
+   与 --primary:focus 的蓝色背景同色,导致「确定」文字不可见。 */
+.el-button--default:not(.el-button--primary) { border-color: var(--adm-border-base); color: var(--adm-text-88); }
+.el-button--default:not(.el-button--primary):hover,
+.el-button--default:not(.el-button--primary):focus { color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); background: #fff; }
+.el-button--primary { background-color: var(--adm-primary); border-color: var(--adm-primary); color: #fff; }
 .el-button--primary:hover,
 .el-button--primary:hover,
-.el-button--primary:focus { background-color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); }
-.el-button--primary:active { background-color: var(--adm-primary-active); border-color: var(--adm-primary-active); }
+.el-button--primary:focus { background-color: var(--adm-primary-hover); border-color: var(--adm-primary-hover); color: #fff; }
+.el-button--primary:active { background-color: var(--adm-primary-active); border-color: var(--adm-primary-active); color: #fff; }
 .el-button--primary.is-disabled,
 .el-button--primary.is-disabled,
-.el-button--primary.is-disabled:hover { background-color: #A0C4FF; border-color: #A0C4FF; }
+.el-button--primary.is-disabled:hover { background-color: #A0C4FF; border-color: #A0C4FF; color: #fff; }
 .el-button--text { color: var(--adm-primary); }
 .el-button--text { color: var(--adm-primary); }
 .el-button--text:hover { color: var(--adm-primary-hover); }
 .el-button--text:hover { color: var(--adm-primary-hover); }
 .el-button--danger { border-color: var(--adm-error); }
 .el-button--danger { border-color: var(--adm-error); }