@wycm9527/morganite 0.0.0-stage → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +171 -0
- package/LICENSE +33 -0
- package/README.md +62 -2
- package/bridge/base.css +138 -0
- package/bridge/echarts.d.ts +44 -0
- package/bridge/echarts.js +217 -0
- package/bridge/element-plus.css +785 -0
- package/bridge/fonts.css +124 -0
- package/bridge/icon-merge.d.ts +5 -0
- package/bridge/icon-merge.js +103 -0
- package/bridge/iconpark.config.ts +75 -0
- package/bridge/iconpark.css +29 -0
- package/bridge/react/ConfirmBar.tsx +43 -0
- package/bridge/react/EChart.tsx +45 -0
- package/bridge/react/PageHeader.tsx +24 -0
- package/bridge/react/SectionHeader.tsx +17 -0
- package/bridge/react/StatCard.tsx +33 -0
- package/bridge/react/TableSkeleton.tsx +11 -0
- package/bridge/react/TrendChart.tsx +8 -0
- package/bridge/recipes.css +444 -0
- package/bridge/shadcn-globals.css +6 -0
- package/bridge/shadcn.css +238 -0
- package/bridge/vue/ConfirmBar.vue +23 -0
- package/bridge/vue/EChart.vue +43 -0
- package/bridge/vue/KitchenSink.vue +507 -0
- package/bridge/vue/PageHeader.vue +23 -0
- package/bridge/vue/SectionHeader.vue +15 -0
- package/bridge/vue/StatCard.vue +33 -0
- package/bridge/vue/TableSkeleton.vue +14 -0
- package/bridge/vue/TrendChart.vue +11 -0
- package/bridge/vue/confirm.js +18 -0
- package/bridge/vue/inlineConfirm.js +21 -0
- package/design-system/AUDIT.md +277 -0
- package/design-system/DESIGN.md +176 -0
- package/design-system/contrast.md +71 -0
- package/design-system/preview/drawer.html +38 -0
- package/design-system/preview/form.html +40 -0
- package/design-system/preview/index.html +21 -0
- package/design-system/preview/preview.css +190 -0
- package/design-system/preview/preview.local.css +17 -0
- package/design-system/preview/shell.html +50 -0
- package/design-system/scope-map.json +4 -0
- package/design-system/style-dictionary.config.mjs +172 -0
- package/design-system/theme-map.json +16 -0
- package/design-system/themes/dark/THEME.md +29 -0
- package/design-system/themes/dark/tokens/semantic.tokens.json +354 -0
- package/design-system/token-board.html +137 -0
- package/design-system/tokens/primitives.tokens.json +1898 -0
- package/design-system/tokens/semantic.tokens.json +1080 -0
- package/design-system.json +217 -0
- package/migration/roles.json +743 -0
- package/package.json +82 -4
- package/templates/AGENTS.md +13 -0
- package/templates/KitchenSink.tsx +179 -0
- package/templates/accept.config.mjs +28 -0
- package/templates/entry-css.css +6 -0
- package/templates/entry-element-plus.css +9 -0
- package/templates/entry-shadcn.css +7 -0
- package/templates/notes-css.md +4 -0
- package/templates/notes-element-plus.md +7 -0
- package/templates/notes-shadcn.md +7 -0
|
@@ -0,0 +1,785 @@
|
|
|
1
|
+
/* Element Plus 桥接:把 Element Plus 的全局 CSS 变量指向设计系统的语义 token。
|
|
2
|
+
引入顺序:element-plus/dist/index.css → design-system/dist/index.css → 本文件。
|
|
3
|
+
不要引入 element-plus/theme-chalk/dark/css-vars.css:暗色由 dist/themes/dark.css 通过 var() 间接生效。
|
|
4
|
+
实测发现的"组件库自带主见"都在下面用注释标出,它们就是这份桥接存在的理由。 */
|
|
5
|
+
|
|
6
|
+
@import "./fonts.css";
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* 品牌 / 主色:Element 用 light-3 做 hover、dark-2 做 active、light-9 做选中底 */
|
|
10
|
+
--el-color-primary: var(--color-action-primary);
|
|
11
|
+
--el-color-primary-light-3: var(--color-action-primary-hover);
|
|
12
|
+
--el-color-primary-light-5: var(--color-border-strong); /* 主色不拿来做浅调:Element 需要的"浅一点的主色"一律给中性灰(走语义 token,暗色随之切换) */
|
|
13
|
+
--el-color-primary-light-7: var(--color-border-default);
|
|
14
|
+
--el-color-primary-light-8: var(--color-bg-selected);
|
|
15
|
+
--el-color-primary-light-9: var(--color-bg-selected-subtle);
|
|
16
|
+
--el-color-primary-dark-2: var(--color-action-primary-active);
|
|
17
|
+
|
|
18
|
+
/* 状态色:Element 的 info 是灰色(中性),对应我们的 status.neutral;青色 info 不走 Element 语义 */
|
|
19
|
+
--el-color-success: var(--color-status-success);
|
|
20
|
+
--el-color-success-light-9: var(--color-status-success-bg);
|
|
21
|
+
--el-color-success-light-8: var(--color-status-success-bg);
|
|
22
|
+
--el-color-success-light-7: var(--color-status-success-bg);
|
|
23
|
+
--el-color-warning: var(--color-status-warning);
|
|
24
|
+
--el-color-warning-light-9: var(--color-status-warning-bg);
|
|
25
|
+
--el-color-warning-light-8: var(--color-status-warning-bg);
|
|
26
|
+
--el-color-warning-light-7: var(--color-status-warning-bg);
|
|
27
|
+
--el-color-danger: var(--color-status-error);
|
|
28
|
+
--el-color-danger-light-9: var(--color-status-error-bg);
|
|
29
|
+
--el-color-danger-light-8: var(--color-status-error-bg);
|
|
30
|
+
--el-color-danger-light-7: var(--color-status-error-bg);
|
|
31
|
+
--el-color-error: var(--color-status-error);
|
|
32
|
+
--el-color-error-light-9: var(--color-status-error-bg);
|
|
33
|
+
--el-color-info: var(--color-status-neutral);
|
|
34
|
+
--el-color-info-light-9: var(--color-status-neutral-bg);
|
|
35
|
+
--el-color-info-light-8: var(--color-status-neutral-bg);
|
|
36
|
+
--el-color-info-light-7: var(--color-status-neutral-bg);
|
|
37
|
+
/* light-3 / light-5 / dark-2:Element 用它们做 hover(链接、朴素按钮)、active 与朴素边线。不接管就会漏出 Element 自己的浅红浅绿。
|
|
38
|
+
状态色是文字色,hover 不变浅:三档一律指回文字色;danger 的 hover / active 走 action.danger 的推导值 */
|
|
39
|
+
--el-color-success-light-3: var(--color-status-success); --el-color-success-light-5: var(--color-status-success); --el-color-success-dark-2: var(--color-status-success);
|
|
40
|
+
--el-color-warning-light-3: var(--color-status-warning); --el-color-warning-light-5: var(--color-status-warning); --el-color-warning-dark-2: var(--color-status-warning);
|
|
41
|
+
--el-color-danger-light-3: var(--color-action-danger-hover); --el-color-danger-light-5: var(--color-status-error); --el-color-danger-dark-2: var(--color-action-danger-active);
|
|
42
|
+
--el-color-error-light-3: var(--color-action-danger-hover); --el-color-error-light-5: var(--color-status-error); --el-color-error-light-8: var(--color-status-error-bg); --el-color-error-light-7: var(--color-status-error-bg); --el-color-error-dark-2: var(--color-action-danger-active);
|
|
43
|
+
--el-color-info-light-3: var(--color-status-neutral); --el-color-info-light-5: var(--color-status-neutral); --el-color-info-dark-2: var(--color-status-neutral);
|
|
44
|
+
|
|
45
|
+
/* 底色与文字 */
|
|
46
|
+
--el-bg-color: var(--color-bg-surface);
|
|
47
|
+
--el-bg-color-page: var(--color-bg-page);
|
|
48
|
+
--el-bg-color-overlay: var(--color-bg-elevated);
|
|
49
|
+
--el-text-color-primary: var(--color-text-primary);
|
|
50
|
+
--el-text-color-regular: var(--color-text-primary);
|
|
51
|
+
--el-text-color-secondary: var(--color-text-secondary);
|
|
52
|
+
--el-text-color-placeholder: var(--color-text-placeholder);
|
|
53
|
+
--el-text-color-disabled: var(--color-text-muted);
|
|
54
|
+
|
|
55
|
+
/* 边线与填充。Element 的普通边线全部走 --el-border-width;我们把它接到 border.width.default(0.6px 发丝线) */
|
|
56
|
+
--el-border-width: var(--border-width-default);
|
|
57
|
+
--el-border: var(--border-width-default) var(--el-border-style) var(--el-border-color);
|
|
58
|
+
--el-border-color: var(--color-border-strong);
|
|
59
|
+
--el-border-color-light: var(--color-border-default);
|
|
60
|
+
--el-border-color-lighter: var(--color-border-default);
|
|
61
|
+
--el-border-color-extra-light: var(--color-border-default);
|
|
62
|
+
--el-border-color-dark: var(--color-border-strong);
|
|
63
|
+
--el-border-color-darker: var(--color-border-strong);
|
|
64
|
+
--el-border-color-hover: var(--color-border-strong);
|
|
65
|
+
--el-fill-color: var(--color-bg-hover);
|
|
66
|
+
--el-fill-color-light: var(--color-bg-subtle);
|
|
67
|
+
--el-fill-color-lighter: var(--color-bg-subtle);
|
|
68
|
+
--el-fill-color-extra-light: var(--color-bg-subtle);
|
|
69
|
+
--el-fill-color-dark: var(--color-bg-hover);
|
|
70
|
+
--el-fill-color-darker: var(--color-border-default);
|
|
71
|
+
--el-fill-color-blank: var(--color-bg-surface);
|
|
72
|
+
--el-disabled-bg-color: var(--color-bg-readonly);
|
|
73
|
+
--el-disabled-text-color: var(--color-text-muted);
|
|
74
|
+
--el-disabled-border-color: var(--color-border-default);
|
|
75
|
+
|
|
76
|
+
/* 圆角、字体、字号:Element 默认圆角 4/2px 偏小。嵌套规则(DESIGN「圆角」):卡片 / 弹窗 / 抽屉 lg > 控件 md > 标签 sm > 勾选框 xs */
|
|
77
|
+
--el-border-radius-base: var(--radius-md);
|
|
78
|
+
--el-border-radius-small: var(--radius-sm);
|
|
79
|
+
--el-border-radius-round: var(--radius-full);
|
|
80
|
+
--el-font-family: var(--font-family-body);
|
|
81
|
+
--el-font-size-extra-large: var(--text-heading-size);
|
|
82
|
+
--el-font-size-large: var(--text-title-size);
|
|
83
|
+
--el-font-size-medium: var(--text-title-sm-size);
|
|
84
|
+
--el-font-size-base: var(--text-body-size);
|
|
85
|
+
--el-font-size-small: var(--text-body-sm-size);
|
|
86
|
+
--el-font-size-extra-small: var(--text-small-size);
|
|
87
|
+
--el-font-weight-primary: var(--text-weight-strong); /* Element 用 500 做标题;雅黑无 500,直接给 600 */
|
|
88
|
+
|
|
89
|
+
/* 阴影:拆分式 elevation 组合 */
|
|
90
|
+
--el-box-shadow: 0 var(--elevation-modal-y) var(--elevation-modal-blur) var(--elevation-modal-color);
|
|
91
|
+
--el-box-shadow-light: 0 var(--elevation-popover-y) var(--elevation-popover-blur) var(--elevation-popover-color);
|
|
92
|
+
--el-box-shadow-lighter: 0 var(--elevation-card-y) var(--elevation-card-blur) var(--elevation-card-color);
|
|
93
|
+
--el-box-shadow-dark: 0 var(--elevation-modal-y) var(--elevation-modal-blur) var(--elevation-modal-color);
|
|
94
|
+
|
|
95
|
+
/* 遮罩 */
|
|
96
|
+
--el-overlay-color: var(--color-bg-overlay);
|
|
97
|
+
--el-overlay-color-light: var(--color-bg-overlay);
|
|
98
|
+
--el-overlay-color-lighter: var(--color-bg-overlay);
|
|
99
|
+
--el-mask-color: var(--color-bg-mask); /* 局部加载遮罩是"变淡"不是"压暗":接 bg.mask(surface 90%),不是弹窗的 bg.overlay */
|
|
100
|
+
|
|
101
|
+
/* 控件尺寸三档:control.height.lg / md / sm */
|
|
102
|
+
--el-component-size-large: var(--control-height-lg);
|
|
103
|
+
--el-component-size: var(--control-height-md);
|
|
104
|
+
--el-component-size-small: var(--control-height-sm);
|
|
105
|
+
|
|
106
|
+
/* hover / focus 反馈变量:Element 默认全部指向主色;本系统悬停不引入主色,聚焦边线走 border.focus */
|
|
107
|
+
--el-input-focus-border-color: var(--color-border-focus);
|
|
108
|
+
|
|
109
|
+
/* 动效与层级 */
|
|
110
|
+
--el-transition-duration: var(--motion-duration-normal);
|
|
111
|
+
--el-transition-duration-fast: var(--motion-duration-fast);
|
|
112
|
+
--el-index-normal: var(--layer-sticky);
|
|
113
|
+
--el-index-top: var(--layer-modal);
|
|
114
|
+
--el-index-popper: var(--layer-toast);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* ---- 主按钮:金底白字;悬停 action.primary-hover、按下 action.primary-active,边线始终与底同色(DESIGN「按钮四层」,同效果预览 .btn.primary) ---- */
|
|
118
|
+
.el-button--primary {
|
|
119
|
+
--el-button-text-color: var(--color-text-on-primary);
|
|
120
|
+
--el-button-hover-text-color: var(--color-text-on-primary);
|
|
121
|
+
--el-button-active-text-color: var(--color-text-on-primary);
|
|
122
|
+
--el-button-hover-bg-color: var(--color-action-primary-hover);
|
|
123
|
+
--el-button-hover-border-color: var(--color-action-primary-hover);
|
|
124
|
+
--el-button-active-bg-color: var(--color-action-primary-active);
|
|
125
|
+
--el-button-active-border-color: var(--color-action-primary-active);
|
|
126
|
+
--el-button-disabled-text-color: var(--color-text-on-primary);
|
|
127
|
+
}
|
|
128
|
+
/* 危险按钮:填充必须用 action.danger,而不是 status.error(暗色下变浅会让白字糊掉) */
|
|
129
|
+
.el-button--danger {
|
|
130
|
+
--el-button-bg-color: var(--color-action-danger);
|
|
131
|
+
--el-button-border-color: var(--color-action-danger);
|
|
132
|
+
--el-button-hover-bg-color: var(--color-action-danger-hover);
|
|
133
|
+
--el-button-hover-border-color: var(--color-action-danger-hover);
|
|
134
|
+
--el-button-active-bg-color: var(--color-action-danger-active);
|
|
135
|
+
--el-button-active-border-color: var(--color-action-danger-active);
|
|
136
|
+
--el-button-text-color: var(--color-text-on-danger);
|
|
137
|
+
/* 文字色按状态穷举:MessageBox 的确认按钮是 primary + danger 双类,缺哪个状态就会从 primary 块漏进主按钮的变量 */
|
|
138
|
+
--el-button-hover-text-color: var(--color-text-on-danger);
|
|
139
|
+
--el-button-active-text-color: var(--color-text-on-danger);
|
|
140
|
+
--el-button-disabled-text-color: var(--color-text-on-danger);
|
|
141
|
+
}
|
|
142
|
+
.el-button--danger.is-plain { --el-button-text-color: var(--color-status-error); --el-button-bg-color: var(--color-status-error-bg); --el-button-border-color: var(--color-status-error-bg); }
|
|
143
|
+
.el-button.el-button--danger.is-plain { --el-button-hover-bg-color: var(--color-action-danger); --el-button-hover-border-color: var(--color-action-danger); --el-button-active-bg-color: var(--color-action-danger-active); --el-button-active-border-color: var(--color-action-danger-active); } /* hover 填充走 action.danger(与实心危险按钮同一填充);Element 默认填 --el-color-danger = status.error,dark 下是为可读性调浅的红,白字只有 3.2:1 */
|
|
144
|
+
/* 行内危险操作(表格操作列、下拉项):type="danger" 的文字 / 链接按钮 = quiet 浅底 + text.danger 文字,hover 不变色;实底危险按钮只留给最终确认 */
|
|
145
|
+
.el-button.el-button--danger.is-link, .el-button.el-button--danger.is-text { --el-button-text-color: var(--color-text-danger); --el-button-hover-text-color: var(--color-text-danger); --el-button-hover-link-text-color: var(--color-text-danger); --el-button-active-text-color: var(--color-text-danger); --el-button-disabled-text-color: var(--color-text-danger); } /* 特异性压过下方通用的 .el-button.is-text(正文色),否则危险与普通操作同色 */
|
|
146
|
+
/* 彩色文字不落在灰底上(用户规则):危险文字按钮不用 quiet 灰底,而是 error 成对——红字 + 浅红底;hover 反馈用同色发丝边,不换色 */
|
|
147
|
+
.el-button.el-button--danger.is-text:not(.is-disabled), .el-button.el-button--danger.is-text.is-disabled, .el-button.el-button--danger.is-text.is-disabled:hover { background-color: var(--color-status-error-bg); } /* (0,4,0):要压过 quiet 的 .el-button.is-text:not(.is-disabled) */
|
|
148
|
+
.el-button.el-button--danger.is-text:not(.is-disabled):hover, .el-button.el-button--danger.is-text:not(.is-disabled):active { background-color: var(--color-status-error-bg); box-shadow: inset 0 0 0 var(--border-width-control) var(--color-status-error); }
|
|
149
|
+
/* 次要(默认)按钮:hover 只换底色(action.secondary-hover),文字不变色 */
|
|
150
|
+
.el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success):not(.el-button--warning):not(.el-button--info):not(.is-link):not(.is-text) {
|
|
151
|
+
--el-button-hover-text-color: var(--color-text-primary);
|
|
152
|
+
--el-button-hover-bg-color: var(--color-action-secondary-hover);
|
|
153
|
+
--el-button-hover-border-color: var(--color-border-strong);
|
|
154
|
+
--el-button-active-text-color: var(--color-text-primary);
|
|
155
|
+
--el-button-active-border-color: var(--color-border-strong);
|
|
156
|
+
}
|
|
157
|
+
/* 链接型按钮:走 text.link(DESIGN「链接」:深金字、无下划线);Element 的 primary 型链接是主色字,白底不可读 */
|
|
158
|
+
.el-button.is-link { --el-button-text-color: var(--color-text-link); --el-button-hover-text-color: var(--color-text-link-hover); --el-button-hover-link-text-color: var(--color-text-link-hover); /* Element 的 .is-link:hover 读的是 hover-link-text-color,类型级默认 primary-light-5(本桥接映射为冷灰 border.strong)→ 白底 1.5:1 */ --el-button-active-text-color: var(--color-text-link-hover); text-decoration: var(--text-link-decoration); font-style: var(--text-link-style); }
|
|
159
|
+
/* 文字按钮(DESIGN「文字按钮」):正文色 text.primary,不是链接色;静息 action.quiet(透明)、悬停 action.quiet-hover 浅底。
|
|
160
|
+
Element 给 is-text 写死 background-color(不走变量),必须属性级覆盖 */
|
|
161
|
+
.el-button.is-text { --el-button-text-color: var(--color-text-primary); --el-button-hover-text-color: var(--color-text-primary); --el-button-active-text-color: var(--color-text-primary); }
|
|
162
|
+
.el-button.is-text:not(.is-disabled) { background-color: var(--color-action-quiet); }
|
|
163
|
+
.el-button.is-text:not(.is-disabled):hover, .el-button.is-text:not(.is-disabled):active { background-color: var(--color-action-quiet-hover); }
|
|
164
|
+
.el-table .el-button.is-text:not(.is-disabled):not(.el-button--danger):hover, .el-table .el-button.is-text:not(.is-disabled):not(.el-button--danger):active { background-color: transparent; } /* 表格里只变色不叠底(antd 表格操作链接):行悬停已有底色,再叠一层会把文字压到 4.5 以下——暗色选中行再悬停曾只有 3.41:1 */
|
|
165
|
+
.el-button { font-weight: var(--text-weight-label); }
|
|
166
|
+
/* 并排按钮:同一行相邻元素的间距是 space.inline(Element 用相邻选择器写死 12px);配方里自带 gap 的容器不再叠外边距 */
|
|
167
|
+
.el-button + .el-button { margin-left: var(--space-inline); }
|
|
168
|
+
:is(.page-head .actions, .section-head .right, .card-head .right, .filter, .filter .conds, .filter .acts, .batch .right, .form-foot, .result .acts, .confirm-bar, .act-group, .login-alt, .code-row, .hform .foot) > .el-button + .el-button { margin-left: 0; }
|
|
169
|
+
/* 通栏按钮(登录、手机底部主操作):is-block 撑满容器,同效果预览 .btn--block;Element 没有这个属性 */
|
|
170
|
+
.el-button.is-block { width: 100%; }
|
|
171
|
+
.el-button + .el-button.is-block { margin-left: 0; }
|
|
172
|
+
.el-button { --el-button-outline-color: var(--color-border-focus); } /* Element 默认取 primary-light-5,被我们映射成了中性灰 */
|
|
173
|
+
.el-button:focus-visible, .el-button.is-text:not(.is-disabled):focus-visible, .el-button.is-link:not(.is-disabled):focus-visible { outline: var(--border-width-active) solid var(--color-border-focus); outline-offset: 1px; }
|
|
174
|
+
|
|
175
|
+
/* ---- 输入类:Element 用 inset box-shadow 画边线且写死 1px,各状态的选择器特异性从 (0,1,0) 到 (0,4,0) 不一——
|
|
176
|
+
日期范围、级联、输入数字、表单出错态各有一套。这里按状态统一接管,用 !important 压过全部特异性,边线走 border.width.default(发丝线)。 ---- */
|
|
177
|
+
.el-input, .el-textarea, .el-select, .el-input-number, .el-date-editor, .el-range-editor, .el-input-tag {
|
|
178
|
+
--el-input-border-color: var(--color-border-input);
|
|
179
|
+
--el-input-hover-border-color: var(--color-border-strong);
|
|
180
|
+
--el-input-focus-border-color: var(--color-border-focus);
|
|
181
|
+
--el-input-bg-color: var(--color-bg-input);
|
|
182
|
+
--el-input-text-color: var(--color-text-primary);
|
|
183
|
+
--el-input-placeholder-color: var(--color-text-placeholder);
|
|
184
|
+
--el-input-icon-color: var(--color-text-muted); /* 前后缀(¥、元、搜索图标):Element 默认取占位符色,填充底上只有 3.3:1,前后缀是有意义的文字 */
|
|
185
|
+
--el-input-border-radius: var(--radius-md);
|
|
186
|
+
}
|
|
187
|
+
/* 默认 */
|
|
188
|
+
.el-input__wrapper, .el-select__wrapper, .el-textarea__inner, .el-date-editor.el-input__wrapper, .el-range-editor.el-input__wrapper, .el-input-tag, .el-input-number .el-input__wrapper {
|
|
189
|
+
box-shadow: 0 0 0 var(--border-width-default) var(--el-input-border-color) inset !important;
|
|
190
|
+
}
|
|
191
|
+
/* 悬停 */
|
|
192
|
+
.el-input__wrapper:hover, .el-select__wrapper.is-hovering:not(.is-focused), .el-textarea__inner:hover, .el-date-editor.el-input__wrapper:hover, .el-range-editor.el-input__wrapper:hover, .el-input-tag.is-hovering:not(.is-focused),
|
|
193
|
+
.el-input-number__decrease:hover ~ .el-input:not(.is-disabled) .el-input__wrapper, .el-input-number__increase:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {
|
|
194
|
+
box-shadow: 0 0 0 var(--border-width-default) var(--el-input-hover-border-color) inset !important;
|
|
195
|
+
}
|
|
196
|
+
/* 聚焦:只把边线换成更深的 border.focus,线宽与悬停相同,不加外环(光标本身提示焦点) */
|
|
197
|
+
.el-input__wrapper.is-focus, .el-input.is-active .el-input__wrapper, .el-select__wrapper.is-focused, .el-textarea__inner:focus, .el-date-editor.is-focus .el-input__wrapper, .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-input-tag.is-focused {
|
|
198
|
+
box-shadow: 0 0 0 var(--border-width-default) var(--color-border-focus) inset !important;
|
|
199
|
+
}
|
|
200
|
+
/* 出错:聚焦时也保持这条红线,不加外环(选择器比上面的聚焦规则更具体,聚焦时仍是红线) */
|
|
201
|
+
.el-form-item.is-error .el-form-item__content .el-input__wrapper, .el-form-item.is-error .el-form-item__content .el-select__wrapper, .el-form-item.is-error .el-form-item__content .el-textarea__inner, .el-form-item.is-error .el-form-item__content .el-range-editor, .el-form-item.is-error .el-form-item__content .el-input-tag {
|
|
202
|
+
box-shadow: 0 0 0 1px var(--color-status-error) inset !important; /* 出错也是必须一眼可见的状态,用 1px */
|
|
203
|
+
}
|
|
204
|
+
/* 禁用 / 只读 */
|
|
205
|
+
.el-input.is-disabled .el-input__wrapper, .el-select__wrapper.is-disabled, .el-input-tag.is-disabled {
|
|
206
|
+
box-shadow: 0 0 0 var(--border-width-default) var(--el-disabled-border-color) inset !important;
|
|
207
|
+
}
|
|
208
|
+
.el-input.is-disabled .el-input__wrapper { background: var(--color-bg-readonly); }
|
|
209
|
+
/* 选择器、标签输入与输入框同为填充式 bg.input(DESIGN「输入框 / 选择器」);Element 默认取 fill-color-blank(白底) */
|
|
210
|
+
.el-select__wrapper, .el-input-tag { background-color: var(--color-bg-input); }
|
|
211
|
+
.el-select__wrapper.is-disabled, .el-input-tag.is-disabled { background-color: var(--color-bg-readonly); }
|
|
212
|
+
/* 多行输入:内边距同单行(spacing.2 / spacing.3),表单里最小三行控件高(同效果预览 .textarea)。Element 按 rows 算出的最小高写在行内 style 上 */
|
|
213
|
+
.el-textarea__inner { padding: var(--spacing-2) var(--spacing-3); line-height: var(--text-body-line-height); }
|
|
214
|
+
.el-form-item .el-textarea__inner { min-height: calc(var(--control-height-md) * 3) !important; }
|
|
215
|
+
/* 表单里的控件撑满栏宽(同效果预览 .input);Element 给级联、日期、数字输入写死了固定宽。行内表单(筛选栏)不在此列,宽度走 .w-* 档 */
|
|
216
|
+
.el-form:not(.el-form--inline) .el-form-item__content > :is(.el-cascader, .el-date-editor, .el-input-number) { width: 100%; }
|
|
217
|
+
|
|
218
|
+
/* ---- 选择类 ---- */
|
|
219
|
+
/* 勾选框 / 单选:icon.size.lg(16px)见方,文字常规字重(同效果预览 .check / .radio) */
|
|
220
|
+
.el-checkbox { --el-checkbox-input-width: var(--icon-size-lg); --el-checkbox-input-height: var(--icon-size-lg); --el-checkbox-font-weight: var(--font-weight-regular); --el-checkbox-checked-bg-color: var(--color-action-primary); --el-checkbox-checked-input-border-color: var(--color-action-primary); --el-checkbox-checked-icon-color: var(--color-text-on-primary); --el-checkbox-checked-text-color: var(--color-text-primary); --el-checkbox-input-border: var(--border-width-control) solid var(--color-border-strong); --el-checkbox-border-radius: var(--radius-xs); } /* 16px 的框只能用最小一档,否则接近圆形 */
|
|
221
|
+
.el-checkbox__inner::after { box-sizing: border-box; width: calc(var(--icon-size-lg) * 0.3); height: calc(var(--icon-size-lg) * 0.55); border-width: 0 var(--border-width-bold) var(--border-width-bold) 0; } /* 勾随框放大、线宽 border.width.bold;Element 的定位与旋转不变 */
|
|
222
|
+
.el-checkbox__input.is-indeterminate .el-checkbox__inner::before { top: calc(50% - var(--border-width-bold) / 2); left: 25%; right: 25%; height: var(--border-width-bold); transform: none; }
|
|
223
|
+
.el-radio { --el-radio-input-width: var(--icon-size-lg); --el-radio-input-height: var(--icon-size-lg); --el-radio-font-weight: var(--font-weight-regular); --el-radio-input-border-color-hover: var(--color-action-primary-active); }
|
|
224
|
+
/* 单选选中:主色外圈 + 主色圆点,圈内保持表面色(同效果预览与 antd);Element 默认是实心填满 + 白点 */
|
|
225
|
+
.el-radio__input.is-checked .el-radio__inner { border-color: var(--color-action-primary); background: var(--color-bg-surface); }
|
|
226
|
+
.el-radio__inner::after { width: calc(var(--icon-size-lg) * 0.5); height: calc(var(--icon-size-lg) * 0.5); }
|
|
227
|
+
.el-radio__input.is-checked .el-radio__inner::after { background-color: var(--color-action-primary); }
|
|
228
|
+
.el-radio__input.is-checked + .el-radio__label { color: var(--color-text-primary); }
|
|
229
|
+
/* 分段选择器(radio-button 组,DESIGN「分段选择器 / 按钮组」,同效果预览 .seg):灰轨道 bg.hover、不描边,内缩 control.segmented-inset;
|
|
230
|
+
选中项是 action.selected 的内胶囊,未选项透明、text.secondary;文字 text.body-sm、常规字重,选中也不加粗。
|
|
231
|
+
不依赖 :has():轨道由每个 label 的底色与首尾圆角拼成,label 之间无间隙;选择器与 Element 首尾项规则同形,靠后置覆盖。 */
|
|
232
|
+
.el-radio-button { --el-radio-button-checked-bg-color: var(--color-action-selected); --el-radio-button-checked-text-color: var(--color-text-on-selected); --el-radio-button-checked-border-color: var(--color-action-selected);
|
|
233
|
+
background: var(--color-bg-hover); padding: var(--control-segmented-inset) 0; }
|
|
234
|
+
.el-radio-button:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); padding-left: var(--control-segmented-inset); }
|
|
235
|
+
.el-radio-button:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; padding-right: var(--control-segmented-inset); }
|
|
236
|
+
.el-radio-button:first-child:last-child { border-radius: var(--radius-full); }
|
|
237
|
+
.el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner {
|
|
238
|
+
border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-full); font-size: var(--text-body-sm-size); font-weight: var(--font-weight-regular);
|
|
239
|
+
height: calc(var(--control-height-md) - 2 * var(--control-segmented-inset)); line-height: 1; padding: 0 var(--spacing-3-5); display: inline-flex; align-items: center; }
|
|
240
|
+
.el-radio-button--small .el-radio-button__inner, .el-radio-button--small:first-child .el-radio-button__inner, .el-radio-button--small:last-child .el-radio-button__inner { height: calc(var(--control-height-sm) - 2 * var(--control-segmented-inset)); font-size: var(--text-small-size); padding: 0 var(--spacing-2-5); border-radius: var(--radius-full); } /* 首尾项选择器特异性与上面持平,小尺寸才压得过;border-radius 必须在这里重申——Element 的 --small 规则 (0,2,0) 会把中间项压回直角 */
|
|
241
|
+
.el-radio-button__inner:hover { color: var(--color-text-primary); }
|
|
242
|
+
.el-radio-button__original-radio:checked + .el-radio-button__inner { background: var(--color-action-selected); color: var(--color-text-on-selected); box-shadow: none; font-weight: var(--font-weight-regular); }
|
|
243
|
+
.el-radio-button__original-radio:disabled + .el-radio-button__inner { background: transparent; color: var(--color-text-secondary); opacity: var(--opacity-disabled); }
|
|
244
|
+
.el-radio-button__original-radio:disabled:checked + .el-radio-button__inner { background: var(--color-action-selected); color: var(--color-text-on-selected); }
|
|
245
|
+
/* 开关:44 × 22(宽为 control.height.xs 的两倍),无边线,滑块 control.knob 内缩 spacing.0.5(同效果预览 .switch);大 / 小尺寸沿用 Element 的几何 */
|
|
246
|
+
.el-switch { --el-switch-on-color: var(--color-action-primary); --el-switch-off-color: var(--color-border-strong); }
|
|
247
|
+
.el-switch__core { min-width: calc(var(--control-height-xs) * 2); height: var(--control-height-xs); border: 0; border-radius: var(--radius-full); }
|
|
248
|
+
.el-switch__core .el-switch__action { left: var(--spacing-0-5); width: calc(var(--control-height-xs) - var(--spacing-0-5) * 2); height: calc(var(--control-height-xs) - var(--spacing-0-5) * 2); background-color: var(--color-control-knob); }
|
|
249
|
+
.el-switch.is-checked .el-switch__core .el-switch__action { left: calc(100% - var(--control-height-xs) + var(--spacing-0-5)); }
|
|
250
|
+
.el-slider { --el-slider-main-bg-color: var(--color-action-primary-active); --el-slider-runway-bg-color: var(--color-bg-selected); --el-slider-button-size: var(--icon-size-md); }
|
|
251
|
+
/* 进度填充渐变(DESIGN 图表条):起点深、末端浅,左深右浅。品牌金用指定两色 chart.gradient.start → end;
|
|
252
|
+
状态 / 中性填充是同色饱和度渐变:HSB 明度不变,右端饱和度 × chart.gradient.saturation;状态类只换 --fill。
|
|
253
|
+
先写实色兜底(不支持相对颜色语法时用它);状态规则也写整段 background,免得 Element 自带的状态 background-color 垫在渐变下面 */
|
|
254
|
+
.el-progress-bar__inner { --fill: var(--color-action-primary-active); background: var(--color-chart-gradient-start); background: linear-gradient(to right, var(--color-chart-gradient-start), var(--color-chart-gradient-end)); }
|
|
255
|
+
.el-progress.is-success .el-progress-bar__inner, .el-progress.is-exception .el-progress-bar__inner, .el-progress.is-warning .el-progress-bar__inner, .el-progress.is-muted .el-progress-bar__inner { background: var(--fill); background: linear-gradient(to right, var(--fill), hwb(from var(--fill) h calc(w + (100 - w - b) * (1 - var(--chart-gradient-saturation))) b)); }
|
|
256
|
+
.el-progress.is-success .el-progress-bar__inner { --fill: var(--color-status-success); }
|
|
257
|
+
.el-progress.is-exception .el-progress-bar__inner { --fill: var(--color-status-error); }
|
|
258
|
+
.el-progress.is-warning .el-progress-bar__inner { --fill: var(--color-status-warning); }
|
|
259
|
+
.el-progress-bar__outer { background-color: var(--color-bg-selected); }
|
|
260
|
+
/* 进度条颜色跟状态走:金只给"正在发生"的;已结束 / 已下线 / 草稿等非进行中用桥接约定类 is-muted 变灰 */
|
|
261
|
+
.el-progress.is-muted .el-progress-bar__inner { --fill: var(--color-data-inactive); }
|
|
262
|
+
.el-progress.is-muted .el-progress-circle__path { stroke: var(--color-data-inactive); }
|
|
263
|
+
/* 条内百分比(text-inside)贴在填充末端,末端是浅色,白字不够(金 2.1:1):这时改实色 --fill(金是 action.primary-active,白字 5.27:1) */
|
|
264
|
+
.el-progress.el-progress--text-inside .el-progress-bar__inner { background: var(--fill); }
|
|
265
|
+
|
|
266
|
+
/* ---- 表格 ---- */
|
|
267
|
+
.el-table {
|
|
268
|
+
--el-table-border-color: var(--color-border-default);
|
|
269
|
+
--el-table-border: var(--border-width-default) solid var(--color-border-default);
|
|
270
|
+
--el-table-text-color: var(--color-text-primary);
|
|
271
|
+
--el-table-header-text-color: var(--color-text-secondary);
|
|
272
|
+
--el-table-header-bg-color: var(--color-bg-subtle);
|
|
273
|
+
--el-table-row-hover-bg-color: var(--color-bg-hover);
|
|
274
|
+
--el-table-current-row-bg-color: var(--color-bg-hover);
|
|
275
|
+
--el-table-bg-color: var(--color-bg-surface);
|
|
276
|
+
--el-table-tr-bg-color: var(--color-bg-surface);
|
|
277
|
+
--el-table-expanded-cell-bg-color: var(--color-bg-subtle);
|
|
278
|
+
/* 固定列阴影:Element 把它画在 10px 宽的伪元素上,几何必须沿用它的 inset ±10px / -10px 扩散,只换颜色,否则会糊成一条灰带 */
|
|
279
|
+
--el-table-fixed-left-column: inset 10px 0 10px -10px var(--elevation-popover-color);
|
|
280
|
+
--el-table-fixed-right-column: inset -10px 0 10px -10px var(--elevation-popover-color);
|
|
281
|
+
}
|
|
282
|
+
/* 正文 text.body-sm、表头 text.small(同配方 .table 与效果预览);行高随正文行高 */
|
|
283
|
+
.el-table { font-size: var(--text-body-sm-size); }
|
|
284
|
+
.el-table th.el-table__cell { font-weight: var(--text-weight-label); font-size: var(--text-small-size); }
|
|
285
|
+
.el-table .cell { padding: 0 var(--table-cell-padding-x); line-height: var(--text-body-line-height); }
|
|
286
|
+
.el-table td.el-table__cell, .el-table th.el-table__cell { padding: var(--table-cell-padding-y) 0; }
|
|
287
|
+
/* 勾选列:Element 把这一格写死成 23px 高的行内 flex(它自己的行高),比上面的正文行高高,还压在基线上,表头因此被撑高约 6px;改成块级、高度随内容 */
|
|
288
|
+
.el-table .el-table__cell.el-table-column--selection > .cell { display: flex; height: auto; }
|
|
289
|
+
/* 卡片里贴边的表格:首尾列内边距 space.card,与卡片标题、筛选栏、分页对齐(同效果预览 .panel .table)。
|
|
290
|
+
只认贴边位置(卡片内容区或标签页面板的直接子元素);放在有内边距的容器里的表格不加。勾选列因此要留 48px 宽 */
|
|
291
|
+
:is(.el-card.flat > .el-card__body, .el-card.flat .el-tab-pane) > .el-table .el-table__cell:first-child > .cell { padding-left: var(--space-card); }
|
|
292
|
+
:is(.el-card.flat > .el-card__body, .el-card.flat .el-tab-pane) > .el-table .el-table__cell:last-child > .cell { padding-right: var(--space-card); }
|
|
293
|
+
/* 选中行与悬停同色(中性灰),再悬停深一档。el-table 不给选中行加类,用 :has() 读勾选框状态,不依赖页面自己维护 row-class-name */
|
|
294
|
+
.el-table__body tr.is-selected > td.el-table__cell, .el-table__body tr:has(> td .el-checkbox.is-checked) > td.el-table__cell { background: var(--color-bg-hover); }
|
|
295
|
+
.el-table__body tr.is-selected:hover > td.el-table__cell, .el-table__body tr:has(> td .el-checkbox.is-checked):hover > td.el-table__cell { background: var(--color-bg-selected-hover); }
|
|
296
|
+
.el-table .sort-caret.ascending { border-bottom-color: var(--color-text-muted); }
|
|
297
|
+
.el-table .sort-caret.descending { border-top-color: var(--color-text-muted); }
|
|
298
|
+
.el-table .ascending .sort-caret.ascending { border-bottom-color: var(--color-text-selected); }
|
|
299
|
+
.el-table .descending .sort-caret.descending { border-top-color: var(--color-text-selected); }
|
|
300
|
+
|
|
301
|
+
/* ---- 卡片、弹窗、抽屉、浮层 ---- */
|
|
302
|
+
.el-card { border-width: var(--border-width-default); --el-card-border-color: var(--color-border-default); --el-card-border-radius: var(--radius-lg); --el-card-bg-color: var(--color-bg-surface); --el-card-padding: var(--space-card); } /* 卡片靠 border.default 发丝线与页面底色差定形(DESIGN「卡片」) */
|
|
303
|
+
.el-card.is-always-shadow, .el-card.is-hover-shadow:hover { box-shadow: 0 var(--elevation-card-y) var(--elevation-card-blur) var(--elevation-card-color); }
|
|
304
|
+
.el-card__header { font-size: var(--text-body-size); font-weight: var(--text-weight-strong); color: var(--color-text-card-title); } /* 同配方 .card-head h2 */
|
|
305
|
+
/* 弹窗 / 抽屉与卡片同档 radius.lg(DESIGN「圆角」) */
|
|
306
|
+
.el-dialog { --el-dialog-bg-color: var(--color-bg-elevated); --el-dialog-border-radius: var(--radius-lg); --el-dialog-padding-primary: var(--space-card); --el-dialog-box-shadow: 0 var(--elevation-modal-y) var(--elevation-modal-blur) var(--elevation-modal-color); --el-dialog-title-font-size: var(--text-title-size); }
|
|
307
|
+
.el-message-box { --el-messagebox-border-radius: var(--radius-lg); }
|
|
308
|
+
.el-drawer { background: var(--color-bg-elevated); box-shadow: calc(-1 * var(--elevation-modal-y)) 0 var(--elevation-modal-blur) var(--elevation-modal-color); }
|
|
309
|
+
.el-drawer.rtl { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } /* 右侧抽屉:贴边的两个角不圆 */
|
|
310
|
+
.el-drawer__header { margin-bottom: 0; padding: var(--spacing-4) var(--space-card); border-bottom: var(--border-width-default) solid var(--color-border-default); color: var(--color-text-primary); font-weight: var(--text-weight-strong); }
|
|
311
|
+
.el-drawer__body { padding: var(--space-card); }
|
|
312
|
+
.el-drawer__footer { padding: var(--spacing-3) var(--space-card); border-top: var(--border-width-default) solid var(--color-border-default); }
|
|
313
|
+
.el-popper.is-light { border-color: var(--color-border-default); box-shadow: 0 var(--elevation-popover-y) var(--elevation-popover-blur) var(--elevation-popover-color); }
|
|
314
|
+
.el-popper.is-dark { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-color: var(--color-bg-inverse); }
|
|
315
|
+
.el-popper.is-dark .el-popper__arrow::before { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); }
|
|
316
|
+
.el-select-dropdown__item.is-selected { color: var(--color-text-selected); background: var(--color-bg-selected); font-weight: var(--text-weight-strong); }
|
|
317
|
+
.el-select-dropdown__item.is-hovering { background: var(--color-bg-hover); }
|
|
318
|
+
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:not(.is-disabled):focus { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
319
|
+
/* 下拉里的危险项:桥接约定类 is-danger(Element 的 dropdown-item 没有 type)。红字;hover 底是浅红而不是灰——彩色文字不落在灰底上 */
|
|
320
|
+
.el-dropdown-menu__item.is-danger { color: var(--color-text-danger); }
|
|
321
|
+
.el-dropdown-menu__item.is-danger:not(.is-disabled):hover, .el-dropdown-menu__item.is-danger:not(.is-disabled):focus { background: var(--color-status-error-bg); color: var(--color-text-danger); }
|
|
322
|
+
|
|
323
|
+
/* ---- 统计数字(el-statistic):数据大字走 text.display 的 D-DIN 系字体 ---- */
|
|
324
|
+
.el-statistic__number { font-family: var(--text-display-family); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-tracking); }
|
|
325
|
+
|
|
326
|
+
/* ---- 菜单(侧栏,同配方 .nav 与效果预览):项高 layout.sidebar.item-height、左右外边距 spacing.2、同组相邻项之间 layout.sidebar.item-gap、字重 text.weight.nav;图标 icon.size.lg、图文间距 spacing.2.5 ---- */
|
|
327
|
+
.el-menu {
|
|
328
|
+
--el-menu-bg-color: var(--color-bg-sidebar);
|
|
329
|
+
--el-menu-text-color: var(--color-text-sidebar);
|
|
330
|
+
--el-menu-active-color: var(--color-text-sidebar-selected);
|
|
331
|
+
--el-menu-hover-bg-color: var(--color-bg-sidebar-hover);
|
|
332
|
+
--el-menu-hover-text-color: var(--color-text-sidebar-strong);
|
|
333
|
+
--el-menu-border-color: var(--color-border-sidebar);
|
|
334
|
+
--el-menu-item-height: var(--layout-sidebar-item-height);
|
|
335
|
+
--el-menu-sub-item-height: var(--layout-sidebar-item-height);
|
|
336
|
+
--el-menu-item-font-size: var(--text-body-size);
|
|
337
|
+
--el-menu-base-level-padding: var(--spacing-3);
|
|
338
|
+
--el-menu-level-padding: var(--spacing-3);
|
|
339
|
+
--el-menu-icon-width: var(--icon-size-lg);
|
|
340
|
+
}
|
|
341
|
+
.el-menu-item.is-active, .el-menu-item.is-active:hover { background: var(--color-bg-sidebar-selected); color: var(--color-text-sidebar-selected); font-weight: var(--text-weight-nav); } /* 亮色主色底块 + 白字白图标、暗色金色暗底 + 亮金字;hover 不再变,与其他项同字重、不加指示条 */
|
|
342
|
+
.el-menu-item { margin: 0 var(--spacing-2); border-radius: var(--radius-md); }
|
|
343
|
+
.el-menu-item, .el-sub-menu__title { font-weight: var(--text-weight-nav); }
|
|
344
|
+
.el-menu--vertical .el-menu-item + .el-menu-item { margin-top: var(--layout-sidebar-item-gap); }
|
|
345
|
+
.el-menu-item .el-icon, .el-sub-menu__title .el-icon { font-size: var(--icon-size-lg); width: var(--icon-size-lg); height: var(--icon-size-lg); margin-right: var(--spacing-2-5); }
|
|
346
|
+
.el-menu .el-icon .i-icon { font-size: inherit; } /* IconPark 的 .i-icon 自带 md 字号,跟随 .el-icon */
|
|
347
|
+
.el-menu-item-group__title { font-size: var(--text-caption-size); line-height: var(--text-body-line-height); color: var(--color-text-sidebar-muted); padding: var(--spacing-3-5) calc(var(--spacing-2) + var(--spacing-3)) var(--spacing-1-5); } /* 与项内文字左对齐:项外边距 + 项内边距 */
|
|
348
|
+
/* 折叠侧栏:Element 用「图标宽 + 两侧 padding」推算折叠宽度,与 layout.sidebar.collapsed-width 对不上。
|
|
349
|
+
折叠宽度显式取 token;项撑满侧栏宽减两侧外边距、图标居中;分组标题隐藏。选择器与 Element 原规则同形,靠后置覆盖。 */
|
|
350
|
+
.el-menu--collapse { width: var(--layout-sidebar-collapsed-width); }
|
|
351
|
+
.el-menu--collapse > .el-menu-item, .el-menu--collapse > .el-sub-menu > .el-sub-menu__title, .el-menu--collapse > .el-menu-item-group > ul > .el-menu-item, .el-menu--collapse > .el-menu-item-group > ul > .el-sub-menu > .el-sub-menu__title { width: auto; margin-left: var(--spacing-2); margin-right: var(--spacing-2); padding: 0; justify-content: center; }
|
|
352
|
+
.el-menu--collapse .el-menu-item-group__title { display: none; }
|
|
353
|
+
.el-menu--collapse > .el-menu-item-group:not(:first-child) { margin-top: var(--layout-sidebar-item-gap); } /* 标题隐藏后相邻两组的项会贴在一起:组与组之间也留同样的项间距 */
|
|
354
|
+
.el-menu--collapse .el-menu-item .el-icon, .el-menu--collapse .el-sub-menu__title .el-icon { margin: 0; }
|
|
355
|
+
/* Element 折叠时把内容包进 .el-menu-tooltip__trigger(绝对定位铺满、左右各带内边距),图标会偏离中心。内边距清零、居中 */
|
|
356
|
+
.el-menu--collapse .el-menu-item .el-menu-tooltip__trigger, .el-menu--collapse .el-sub-menu__title .el-menu-tooltip__trigger { padding: 0; justify-content: center; }
|
|
357
|
+
|
|
358
|
+
/* ---- 其他:标签、分页、步骤、标签页、提示、消息 ---- */
|
|
359
|
+
.el-tag { --el-tag-border-radius: var(--radius-sm); font-weight: var(--font-weight-regular); } /* 标签 / 胶囊 400:浅色底已提供识别 */
|
|
360
|
+
.el-tag--info { --el-tag-text-color: var(--color-status-neutral); --el-tag-bg-color: var(--color-status-neutral-bg); --el-tag-border-color: transparent; }
|
|
361
|
+
/* 分页(DESIGN「分页」,同配方 .pagination):页码方块 control.height.md、radius.md,项间距 spacing.1;当前页金底白字;总数 text.secondary */
|
|
362
|
+
.el-pagination { --el-pagination-button-bg-color: transparent; --el-pagination-hover-color: var(--color-text-primary); --el-pagination-font-size: var(--text-body-sm-size); --el-pagination-font-size-small: var(--text-small-size); --el-pagination-border-radius: var(--radius-md);
|
|
363
|
+
--el-pagination-button-width: var(--control-height-md); --el-pagination-button-height: var(--control-height-md); --el-pagination-button-width-small: var(--control-height-sm); --el-pagination-button-height-small: var(--control-height-sm); }
|
|
364
|
+
.el-pager li { padding: 0 var(--spacing-2); }
|
|
365
|
+
.el-pagination.is-background .el-pager li, .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next { border-radius: var(--radius-md); margin: 0 calc(var(--spacing-1) / 2); }
|
|
366
|
+
.el-pagination.is-background .el-pager li.is-active { background: var(--color-action-primary); color: var(--color-text-on-primary); font-weight: var(--text-weight-strong); }
|
|
367
|
+
.el-pagination.is-background .el-pager li:not(.is-active):hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
368
|
+
.el-pagination .el-pager li.is-active { background: var(--color-action-primary); color: var(--color-text-on-primary); font-weight: var(--text-weight-strong); border-radius: var(--radius-md); } /* 当前页金底白字,不带底色的分页也一样 */
|
|
369
|
+
.el-pagination__total { color: var(--color-text-secondary); }
|
|
370
|
+
/* ---- 步骤条(DESIGN「步骤条」,同效果预览 .steps)----
|
|
371
|
+
圆点 control.height.sm:当前步主色实心 + 白序号;已完成 border.current 描边 + text.selected 的勾(finish-status="success" 才出勾);未开始 border.strong + text.muted 序号。
|
|
372
|
+
标题 text.body:已完成 / 当前 text.primary、未开始 text.secondary,均为常规字重;说明 text.small × text.muted */
|
|
373
|
+
.el-steps { --el-text-color-placeholder: var(--color-text-muted); }
|
|
374
|
+
.el-step__icon { width: var(--control-height-sm); height: var(--control-height-sm); background: var(--color-bg-surface); font-size: var(--text-body-sm-size); font-variant-numeric: var(--text-numeric-variant); }
|
|
375
|
+
.el-step__icon.is-text { border: var(--border-width-control) solid; }
|
|
376
|
+
.el-step__icon-inner.is-status { font-size: var(--icon-size-md); }
|
|
377
|
+
.el-step__head.is-wait .el-step__icon { border-color: var(--color-border-strong); color: var(--color-text-muted); }
|
|
378
|
+
.el-step__head.is-finish, .el-step__head.is-success { color: var(--color-text-selected); border-color: var(--color-border-current); }
|
|
379
|
+
.el-step__head.is-finish .el-step__icon, .el-step__head.is-success .el-step__icon { border-color: var(--color-border-current); color: var(--color-text-selected); }
|
|
380
|
+
.el-step__head.is-process .el-step__icon { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-on-primary); }
|
|
381
|
+
.el-step__head.is-error .el-step__icon { border-color: var(--color-status-error); color: var(--color-status-error); }
|
|
382
|
+
.el-step__title { font-size: var(--text-body-size); line-height: var(--text-body-line-height); font-weight: var(--text-weight-label); color: var(--color-text-secondary); }
|
|
383
|
+
.el-step__title.is-finish, .el-step__title.is-success, .el-step__title.is-process { color: var(--color-text-primary); font-weight: var(--text-weight-label); }
|
|
384
|
+
.el-step__title.is-error { color: var(--color-status-error); }
|
|
385
|
+
.el-step__description, .el-step__description.is-wait, .el-step__description.is-process, .el-step__description.is-finish, .el-step__description.is-success { color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-body-line-height); margin-top: 0; }
|
|
386
|
+
.el-step__description.is-error { color: var(--color-status-error); }
|
|
387
|
+
.el-step__line { background-color: var(--color-border-default); }
|
|
388
|
+
/* 横向排法:圆点与标题同一行,连线接在标题后面、撑满到下一步(Element 默认圆点在上、连线穿过圆点、标题在下)。
|
|
389
|
+
居中(align-center)与简洁(simple)两种变体保留 Element 的排法;每步的 flex-basis / max-width 是 Element 写在行内 style 上的,必须 !important */
|
|
390
|
+
.el-steps--horizontal > .el-step.is-horizontal:not(.is-center) { display: flex; align-items: flex-start; gap: var(--spacing-2-5); flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
|
|
391
|
+
.el-steps--horizontal > .el-step.is-horizontal:not(.is-center):not(:last-of-type) { margin-right: var(--spacing-3); }
|
|
392
|
+
.el-step.is-horizontal:not(.is-center) .el-step__head { width: auto; flex: none; }
|
|
393
|
+
.el-step.is-horizontal:not(.is-center) .el-step__line { display: none; }
|
|
394
|
+
.el-step.is-horizontal:not(.is-center) .el-step__main { flex: 1; min-width: 0; }
|
|
395
|
+
.el-step.is-horizontal:not(.is-center) .el-step__title { display: flex; align-items: center; gap: var(--spacing-3); min-height: var(--control-height-sm); white-space: nowrap; }
|
|
396
|
+
.el-step.is-horizontal:not(.is-center) .el-step__title::after { content: ""; flex: 1; height: var(--border-width-default); background: var(--color-border-default); }
|
|
397
|
+
.el-step.is-horizontal:not(.is-center) .el-step__title.is-finish::after, .el-step.is-horizontal:not(.is-center) .el-step__title.is-success::after { background: var(--color-border-current); }
|
|
398
|
+
.el-step.is-horizontal:not(.is-center):last-of-type .el-step__title::after { display: none; }
|
|
399
|
+
.el-step.is-horizontal:not(.is-center) .el-step__description { padding-right: 0; }
|
|
400
|
+
/* ---- 标签页(DESIGN「标签页」,同效果预览 .tabs):默认 text.secondary、选中 text.selected,均为常规字重;选中下划线 border.current × border.width.active。
|
|
401
|
+
上下边的普通标签页:项不留左右内边距、项间距 spacing.6、上下内边距 spacing.3;卡片式 / 边框卡片式保留 Element 的几何 ---- */
|
|
402
|
+
.el-tabs { --el-tabs-header-height: var(--control-height-lg); }
|
|
403
|
+
.el-tabs__nav-wrap::after { height: var(--border-width-default); } /* Element 的标签页底线写死 2px */
|
|
404
|
+
.el-tabs__item { font-weight: var(--text-weight-label); color: var(--color-text-secondary); }
|
|
405
|
+
.el-tabs__item:hover { color: var(--color-text-primary); }
|
|
406
|
+
.el-tabs__item.is-active { color: var(--color-text-selected); font-weight: var(--text-weight-label); }
|
|
407
|
+
.el-tabs__active-bar { background: var(--color-border-current); height: var(--border-width-active); border-radius: var(--radius-full); }
|
|
408
|
+
:is(.el-tabs--top, .el-tabs--bottom):not(.el-tabs--card):not(.el-tabs--border-card) > .el-tabs__header .el-tabs__nav { gap: var(--spacing-6); }
|
|
409
|
+
/* 行高 normal 同效果预览的标签(按钮的默认行高):上下 spacing-3 加一行字,比正文行高矮 2px */
|
|
410
|
+
:is(.el-tabs--top, .el-tabs--bottom):not(.el-tabs--card):not(.el-tabs--border-card) > .el-tabs__header .el-tabs__item { height: auto; padding: var(--spacing-3) 0; line-height: normal; }
|
|
411
|
+
/* ---- 提示条(DESIGN「徽标 / 提示条」,同效果预览 .alert):status.<x>-bg 底 + status.<x> 字、radius.lg;文字 text.body-sm,内边距 spacing.3 / spacing.4;
|
|
412
|
+
图标 icon.size.lg 对齐首行、与文字间距 spacing.2.5;有说明时标题加粗,图标不放大 ---- */
|
|
413
|
+
.el-alert { --el-alert-padding: var(--spacing-3) var(--spacing-4); --el-alert-border-radius-base: var(--radius-lg); --el-alert-title-font-size: var(--text-body-sm-size); --el-alert-title-with-description-font-size: var(--text-body-sm-size); --el-alert-description-font-size: var(--text-body-sm-size); --el-alert-icon-size: var(--icon-size-lg); --el-alert-icon-large-size: var(--icon-size-lg);
|
|
414
|
+
align-items: flex-start; gap: var(--spacing-2-5); line-height: var(--text-body-line-height); }
|
|
415
|
+
.el-alert .el-alert__icon, .el-alert .el-alert__icon.is-big { margin: var(--spacing-0-5) 0 0; }
|
|
416
|
+
.el-alert__content { gap: 0; }
|
|
417
|
+
.el-alert__title { line-height: var(--text-body-line-height); }
|
|
418
|
+
.el-alert__title.with-description { font-weight: var(--text-weight-strong); }
|
|
419
|
+
.el-alert--info.is-light { background: var(--color-status-info-bg); color: var(--color-status-info); } /* Element 的 info 是灰的,提示条的 info 要青 */
|
|
420
|
+
.el-alert--info.is-light .el-alert__title, .el-alert--info.is-light .el-alert__description { color: var(--color-status-info); }
|
|
421
|
+
.el-message { --el-message-bg-color: var(--color-bg-inverse); --el-message-border-color: var(--color-bg-inverse); --el-message-text-color: var(--color-text-inverse); box-shadow: 0 var(--elevation-popover-y) var(--elevation-popover-blur) var(--elevation-popover-color); }
|
|
422
|
+
.el-message .el-message__icon { display: none; }
|
|
423
|
+
.el-badge { --el-badge-bg-color: var(--color-action-danger); --el-badge-font-size: var(--text-caption-size); } /* 计数徽标 = 危险填充 + 白字(同顶栏通知计数配方);Element 默认类型就是 danger */
|
|
424
|
+
.el-badge__content, .el-badge__content--danger { background-color: var(--color-action-danger); color: var(--color-text-on-danger); font-weight: var(--text-weight-strong); }
|
|
425
|
+
.el-badge__content--primary { background-color: var(--color-action-primary); color: var(--color-text-on-primary); } /* 主色徽标 = 金底白字(同主按钮);action.selected 在本系统是白块,不能当底 */
|
|
426
|
+
.el-badge__content--info { background-color: var(--color-status-neutral); color: var(--color-text-inverse); }
|
|
427
|
+
.el-skeleton { --el-skeleton-color: var(--color-bg-skeleton); --el-skeleton-to-color: var(--color-bg-skeleton-highlight); }
|
|
428
|
+
/* ---- 描述列表(同效果预览 .desc):标签 text.small × text.secondary、值 text.primary;无边框时列宽均分、列间距 spacing.6、行距 spacing.5,
|
|
429
|
+
纵向排法(direction="vertical")标签在上、与值相距 spacing.1。Element 的标签选择器特异性从 (0,2,0) 到 (0,5,0),逐条同形后置 ---- */
|
|
430
|
+
.el-descriptions { --el-descriptions-item-bordered-label-background: var(--color-bg-subtle); }
|
|
431
|
+
.el-descriptions__table.is-bordered .el-descriptions__cell { border-width: var(--border-width-default); }
|
|
432
|
+
.el-descriptions__label:not(.is-bordered-label) { color: var(--color-text-secondary); font-weight: var(--text-weight-label); margin-right: var(--spacing-4); }
|
|
433
|
+
.el-descriptions__body .el-descriptions__table .el-descriptions__label:not(.is-bordered-label) { font-size: var(--text-small-size); }
|
|
434
|
+
.el-descriptions__label.is-bordered-label { color: var(--color-text-secondary); font-weight: var(--text-weight-label); }
|
|
435
|
+
.el-descriptions__content:not(.is-bordered-label) { color: var(--color-text-primary); }
|
|
436
|
+
.el-descriptions__body .el-descriptions__table:not(.is-bordered) { table-layout: fixed; }
|
|
437
|
+
.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell { padding: 0 var(--spacing-6) var(--spacing-5) 0; line-height: var(--text-body-line-height); }
|
|
438
|
+
.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell:last-child { padding-right: 0; }
|
|
439
|
+
.el-descriptions__body .el-descriptions__table:not(.is-bordered) tr:last-child .el-descriptions__cell { padding-bottom: 0; }
|
|
440
|
+
.el-descriptions__label.el-descriptions__cell:not(.is-bordered-label).is-vertical-label { padding-bottom: var(--spacing-1); }
|
|
441
|
+
/* ---- 时间线(DESIGN「时间线」,同效果预览 .timeline):节点是 spacing.2.5 见方的空心圆(bg.surface + border.width.active 描边),对齐首行中线;
|
|
442
|
+
type="primary"(当前)描边主色、type="danger"(异常)status.error,其余 border.strong;竖线 border.default 发丝线;
|
|
443
|
+
事件 text.primary,时间 text.small × text.muted 紧跟在下 ---- */
|
|
444
|
+
.el-timeline-item { padding-bottom: var(--spacing-5); }
|
|
445
|
+
.el-timeline-item:last-child { padding-bottom: 0; }
|
|
446
|
+
.el-timeline-item__node, .el-timeline-item__node--normal, .el-timeline-item__node--large { width: var(--spacing-2-5); height: var(--spacing-2-5); top: calc((var(--text-body-size) * var(--text-body-line-height) - var(--spacing-2-5)) / 2); background: var(--color-bg-surface); border: var(--border-width-active) solid var(--color-border-strong); }
|
|
447
|
+
.el-timeline-item__node.is-hollow { background: var(--color-bg-surface); }
|
|
448
|
+
.el-timeline-item__node--primary { border-color: var(--color-action-primary); }
|
|
449
|
+
.el-timeline-item__node--danger { border-color: var(--color-status-error); }
|
|
450
|
+
.el-timeline-item.is-start .el-timeline-item__node--normal, .el-timeline-item.is-start .el-timeline-item__node--large { left: 0; }
|
|
451
|
+
.el-timeline-item__tail { top: calc((var(--text-body-size) * var(--text-body-line-height) + var(--spacing-2-5)) / 2 + var(--spacing-1)); bottom: var(--spacing-1); height: auto; border-left: var(--border-width-default) solid var(--color-border-default); }
|
|
452
|
+
.el-timeline-item.is-start .el-timeline-item__tail { left: calc(var(--spacing-2-5) / 2); }
|
|
453
|
+
.el-timeline-item__wrapper { top: 0; }
|
|
454
|
+
.el-timeline-item.is-start .el-timeline-item__wrapper { padding-left: var(--spacing-6); }
|
|
455
|
+
.el-timeline-item__content { color: var(--color-text-primary); line-height: var(--text-body-line-height); }
|
|
456
|
+
.el-timeline-item__timestamp { color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-body-line-height); }
|
|
457
|
+
.el-timeline-item__timestamp.is-bottom { margin-top: 0; }
|
|
458
|
+
.el-timeline-item__timestamp.is-top { margin-bottom: var(--spacing-1); padding-top: 0; }
|
|
459
|
+
/* ---- 面包屑(同配方 .crumbs):text.body-sm;链接 text.secondary、当前页 text.primary,均为常规字重;
|
|
460
|
+
分隔符是细箭头:el-breadcrumb 仍传 separator="/",span 本身 visibility: hidden(「/」从视觉与无障碍树里消失,文字扫描也不再把它当小字),箭头在 ::before 上设回 visible、用遮罩画在 text.muted 上
|
|
461
|
+
(icon.size.sm 见方,描边 1.4 同 icon.stroke.width,遮罩里写不了 var()),左右 spacing.2 ---- */
|
|
462
|
+
.el-breadcrumb { font-size: var(--text-body-sm-size); line-height: var(--text-body-line-height); }
|
|
463
|
+
.el-breadcrumb__inner, .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link { color: var(--color-text-secondary); font-weight: var(--text-weight-label); }
|
|
464
|
+
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover { color: var(--color-text-primary); font-weight: var(--text-weight-label); }
|
|
465
|
+
.el-breadcrumb__separator { display: inline-flex; color: var(--color-text-muted); margin: 0 var(--spacing-2); width: var(--size-icon-sm); height: var(--size-icon-sm); font-size: 0; visibility: hidden; }
|
|
466
|
+
.el-breadcrumb__separator::before { content: ""; visibility: visible; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
|
|
467
|
+
.el-upload-dragger { background: var(--color-bg-subtle); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
|
|
468
|
+
.el-upload-dragger:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); } /* 同配方 .upload-zone:悬停只换底,拖入时才换焦点色边线 */
|
|
469
|
+
.el-upload-dragger.is-dragover { border-color: var(--color-border-focus); background: var(--color-bg-selected); }
|
|
470
|
+
.el-empty__description p { color: var(--color-text-muted); }
|
|
471
|
+
.el-result__title p { font-size: var(--text-title-size); font-weight: var(--text-weight-strong); }
|
|
472
|
+
.el-form-item__label { color: var(--color-text-primary); font-weight: var(--text-weight-label); font-size: var(--text-body-sm-size); } /* 表单标签 text.body-sm(同效果预览 .field > label) */
|
|
473
|
+
.el-form--label-top .el-form-item .el-form-item__label, .el-form-item.el-form-item--label-top .el-form-item__label { line-height: var(--text-body-line-height); margin-bottom: var(--spacing-1-5); }
|
|
474
|
+
.el-form-item__error { color: var(--color-status-error); font-size: var(--text-small-size); }
|
|
475
|
+
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before { color: var(--color-status-error); }
|
|
476
|
+
|
|
477
|
+
/* Element 内置图标(下拉箭头、关闭、勾)是自带的 SVG,与 IconPark 风格并存——这是接入真实组件库不可避免的妥协,见 DESIGN.md 图标一节 */
|
|
478
|
+
|
|
479
|
+
/* ---- 手机(≤ 768,layout.breakpoint.mobile 的字面镜像):浮层全宽化。宽度覆盖组件内联 style 必须 !important(桥接层允许,页面层禁止) ---- */
|
|
480
|
+
@media (max-width: 768px) {
|
|
481
|
+
.el-dialog, .el-dialog.is-sm, .el-dialog.is-md { width: 100vw !important; max-width: 100vw; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* 贴底、只留顶部圆角 */
|
|
482
|
+
.el-overlay-dialog { display: flex; align-items: flex-end; }
|
|
483
|
+
.el-dialog__body { max-height: 70dvh; overflow: auto; }
|
|
484
|
+
.el-drawer.rtl, .el-drawer.ltr { width: 100% !important; border-radius: 0; }
|
|
485
|
+
.el-message-box { width: calc(100vw - var(--spacing-4) * 2); max-width: calc(100vw - var(--spacing-4) * 2); }
|
|
486
|
+
.el-pagination { flex-wrap: wrap; row-gap: var(--spacing-2); justify-content: center; }
|
|
487
|
+
.el-pagination .el-pagination__sizes, .el-pagination .el-pagination__jump { display: none; } /* 手机收敛:页码为主 */
|
|
488
|
+
.el-breadcrumb__item:not(:last-child) { display: none; } /* 顶栏面包屑只留当前页 */
|
|
489
|
+
.el-steps--horizontal { flex-direction: column; row-gap: var(--spacing-3); } /* 步骤条竖排,连线去掉(同效果预览) */
|
|
490
|
+
.el-steps--horizontal > .el-step.is-horizontal:not(.is-center):not(:last-of-type) { margin-right: 0; }
|
|
491
|
+
.el-step.is-horizontal:not(.is-center) .el-step__title::after { display: none; }
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/* ---- 键盘焦点:全局兜底 ----
|
|
495
|
+
Element 自带的焦点环用主色画(复选框、开关、分页、单选按钮组),主色在白底上只有 3:1;菜单项、标签页、下拉项又被写死 outline:none。
|
|
496
|
+
统一为 border.focus 实线 + 1px 偏移;行内型控件(菜单项、标签页、下拉项)改为内缩,避免被容器裁掉。 */
|
|
497
|
+
:where(a, button, [role="button"], [role="menuitem"], [role="tab"], summary, [tabindex]:not([tabindex="-1"]):not(input, textarea, select)):focus-visible {
|
|
498
|
+
outline: var(--border-width-active) solid var(--color-border-focus); outline-offset: 1px;
|
|
499
|
+
}
|
|
500
|
+
/* Chrome 把可滚动容器也纳入 Tab 序列(keyboard-focusable scrollers),默认画浏览器蓝色焦点环;Element 的滚动容器统一改为 border.focus、内缩 */
|
|
501
|
+
.el-scrollbar__wrap:focus-visible { outline: var(--border-width-active) solid var(--color-border-focus); outline-offset: -2px; }
|
|
502
|
+
.el-menu-item:focus-visible, .el-sub-menu__title:focus-visible, .el-tabs__item:focus-visible, .el-dropdown-menu__item:focus-visible, .el-select-dropdown__item:focus-visible {
|
|
503
|
+
outline: var(--border-width-active) solid var(--color-border-focus); outline-offset: -2px; box-shadow: none; /* 标签页的焦点 Element 还用主色 inset 阴影画了一遍 */
|
|
504
|
+
}
|
|
505
|
+
.el-checkbox input:focus-visible + .el-checkbox__inner,
|
|
506
|
+
.el-radio__original:focus-visible + .el-radio__inner,
|
|
507
|
+
.el-radio-button__original-radio:focus-visible + .el-radio-button__inner,
|
|
508
|
+
.el-switch__input:focus-visible ~ .el-switch__core,
|
|
509
|
+
.el-pagination .btn-prev:focus-visible, .el-pagination .btn-next:focus-visible, .el-pager li:focus-visible,
|
|
510
|
+
.el-table .caret-wrapper:focus-visible, .el-tag .el-tag__close:focus-visible, .el-dialog__headerbtn:focus-visible, .el-drawer__close-btn:focus-visible,
|
|
511
|
+
.el-table__column-filter-trigger:focus-visible, .el-table__expand-icon:focus-visible, .el-table-filter__bottom button:focus-visible, .el-table-v2__sort-icon:focus-visible, .el-table-v2__expand-icon:focus-visible,
|
|
512
|
+
.el-anchor__link:focus-visible, .el-check-tag:focus-visible, .el-segmented__item-selected.is-focus-visible::before,
|
|
513
|
+
.el-color-predefine__color-selector:focus-visible, .el-color-hue-slider__thumb:focus-visible, .el-color-svpanel__cursor:focus-visible, .el-color-alpha-slider__thumb:focus-visible, .el-color-picker:focus-visible:not(.is-disabled) .el-color-picker__trigger {
|
|
514
|
+
outline: var(--border-width-active) solid var(--color-border-focus); outline-offset: 1px;
|
|
515
|
+
}
|
|
516
|
+
/* 焦点环立即出现,同效果预览:Element 的勾选框把 outline 也放进过渡(回弹曲线,中途会冲到 3px),单选按钮组是 all 过渡,焦点环都会从 0 长出来 */
|
|
517
|
+
.el-checkbox__inner { transition-property: border-color, background-color; }
|
|
518
|
+
.el-radio-button__inner { transition-property: color, background-color, box-shadow; }
|
|
519
|
+
|
|
520
|
+
/* ---- 最小命中区:关闭 ×、更多 ⋯ 这类视觉很小的控件,命中区不小于 control.hit-min(24px),用伪元素外扩,不改视觉 ---- */
|
|
521
|
+
.el-tag__close, .el-select__caret, .el-input__clear, .el-table .caret-wrapper { position: relative; }
|
|
522
|
+
.el-drawer__close-btn, .el-dialog__headerbtn { min-width: var(--control-hit-min); min-height: var(--control-hit-min); }
|
|
523
|
+
.el-tag__close::after, .el-input__clear::after, .el-table .caret-wrapper::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--control-hit-min); height: var(--control-hit-min); transform: translate(-50%, -50%); }
|
|
524
|
+
|
|
525
|
+
/* ---- 减少动态效果:DESIGN.md 的约定"所有时长视为 0"在这里落地;三档 duration 归零,Element 的 transition 变量随之归零 ---- */
|
|
526
|
+
@media (prefers-reduced-motion: reduce) {
|
|
527
|
+
:root { --motion-duration-fast: 0ms; --motion-duration-normal: 0ms; --motion-duration-slow: 0ms; }
|
|
528
|
+
*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
/* ---- 文字渲染基线 ----
|
|
532
|
+
1. 不要 -webkit-font-smoothing: antialiased:Mac 上它会去掉字形的加粗补偿,把中文削细一档。让系统按默认方式渲染。
|
|
533
|
+
2. 浏览器给 button / input / select / textarea 的默认字体、字号、颜色不随正文(Element 也没有覆盖);一律继承。
|
|
534
|
+
3. 标题的字号、行高、字重同 base.css(浏览器默认 700、行高随正文):配方只改字号的标题(如卡片标题)靠这里的行高与效果预览同高。
|
|
535
|
+
这是 base.css 里对 Element 安全的子集——base.css 的全局 :disabled 透明度与外边距重置会与 Element 冲突,Element 入口不引入它 */
|
|
536
|
+
html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
|
|
537
|
+
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
|
|
538
|
+
h1 { font-size: var(--text-display-size, var(--text-heading-size)); line-height: var(--text-heading-line-height); letter-spacing: var(--text-display-tracking, normal); }
|
|
539
|
+
h2 { font-size: var(--text-heading-size); line-height: var(--text-heading-line-height); }
|
|
540
|
+
h3 { font-size: var(--text-title-size); }
|
|
541
|
+
h4 { font-size: var(--text-title-sm-size); }
|
|
542
|
+
h1, h2, h3 { font-weight: var(--text-weight-strong); }
|
|
543
|
+
h4, h5, h6 { font-weight: var(--text-weight-label); }
|
|
544
|
+
code, kbd, pre, samp { font-family: var(--font-family-code); }
|
|
545
|
+
|
|
546
|
+
/* ---- 悬停不引入主色(DESIGN「按钮四层」)----
|
|
547
|
+
主色只出现在静息的主操作面上;hover 反馈交给中性色(文字加深、边线加深、底色 bg.hover)。
|
|
548
|
+
Element 有 20+ 处 hover / focus 直接取 --el-color-primary,按其原选择器同形逐条接管;
|
|
549
|
+
分页(--el-pagination-hover-color)与日期面板(--el-datepicker-*)走上方变量接管。 */
|
|
550
|
+
.el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close,
|
|
551
|
+
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close,
|
|
552
|
+
.el-drawer__close-btn:focus i, .el-drawer__close-btn:hover i,
|
|
553
|
+
.el-tour__closebtn:focus .el-tour__close, .el-tour__closebtn:hover .el-tour__close,
|
|
554
|
+
.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover,
|
|
555
|
+
.el-tabs__item:hover, .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover, .el-tabs__new-tab:hover,
|
|
556
|
+
.el-checkbox-button__inner:hover,
|
|
557
|
+
.el-time-spinner__arrow:hover,
|
|
558
|
+
.el-input-number__increase:hover, .el-input-number__decrease:hover,
|
|
559
|
+
.el-table-filter__bottom button:hover,
|
|
560
|
+
.el-transfer-panel__item:hover,
|
|
561
|
+
.el-collapse-item__header.focusing:focus:not(:hover),
|
|
562
|
+
.el-upload-list__item .el-icon--close:hover, .el-upload-list__item-delete:hover,
|
|
563
|
+
.el-upload-list__item.is-success .el-upload-list__item-name:hover, .el-upload-list__item.is-success .el-upload-list__item-name:focus,
|
|
564
|
+
.el-button--text:not(.is-disabled):hover {
|
|
565
|
+
color: var(--color-text-primary);
|
|
566
|
+
}
|
|
567
|
+
.el-table-filter__list-item:hover, .el-table-filter__list-item:focus { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
568
|
+
.el-upload--picture-card:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
|
|
569
|
+
.el-drawer__dragger:hover::before { background-color: var(--color-border-strong); }
|
|
570
|
+
|
|
571
|
+
/* ---- 日期面板:选中日金底白字、范围内奶金浅底、今天正文色(主色不做文字)----
|
|
572
|
+
--el-datepicker-* 变量定义在 .el-date-picker / .el-date-range-picker 组件级,在 :root 覆盖会被组件级声明压掉——必须在同级或更近处覆盖。 */
|
|
573
|
+
.el-picker-panel, .el-date-picker, .el-date-range-picker {
|
|
574
|
+
--el-datepicker-active-color: var(--color-action-primary); /* 选中日:金底白字圆块(同主按钮);action.selected 在本系统是白块,Element 的白字压上去看不见 */
|
|
575
|
+
--el-datepicker-hover-text-color: var(--color-text-primary);
|
|
576
|
+
--el-datepicker-inrange-bg-color: var(--color-bg-selected-subtle); /* 范围内:奶金浅底(同 antd 范围选择);Element 默认取边线色,是一条灰带 */
|
|
577
|
+
--el-datepicker-inrange-hover-bg-color: var(--color-bg-selected-subtle);
|
|
578
|
+
}
|
|
579
|
+
/* 「今天」与月 / 年面板的 today:Element 写死主色字,白底只有 3:1 → 正文色 + medium */
|
|
580
|
+
.el-date-table td.today .el-date-table-cell__text,
|
|
581
|
+
.el-month-table td.today .el-date-table-cell__text,
|
|
582
|
+
.el-year-table td.today .el-date-table-cell__text { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
|
|
583
|
+
/* today 同时是选中端点时,金底上转白字 */
|
|
584
|
+
.el-date-table td.today.start-date .el-date-table-cell__text, .el-date-table td.today.end-date .el-date-table-cell__text,
|
|
585
|
+
.el-month-table td.today.start-date .el-date-table-cell__text, .el-month-table td.today.end-date .el-date-table-cell__text,
|
|
586
|
+
.el-year-table td.today.start-date .el-date-table-cell__text, .el-year-table td.today.end-date .el-date-table-cell__text { color: var(--color-text-on-primary); }
|
|
587
|
+
|
|
588
|
+
/* ---- 阴影与焦点环不被裁切 ----
|
|
589
|
+
Element 给 .el-tabs__content 设 overflow: hidden,贴住 pane 边缘的内容会被裁掉一截。
|
|
590
|
+
pane 切换靠 display: none 而不是 overflow 收纳,放开是安全的。 */
|
|
591
|
+
.el-tabs__content { overflow: visible; }
|
|
592
|
+
/* 贴在卡片顶部的标签页当卡片标题头用(同效果预览 .panel > .tabs):标签文字与卡片内边距 space.card 对齐、上下 spacing.4(与带标题的 .card-head 同高,约 52px),
|
|
593
|
+
底线贯穿卡片左右边缘——左右内边距放在 nav-wrap 上,Element 画底线的 nav-wrap::after 跟着 padding box 走;标签栏下直接接内容,内容自己带内边距 */
|
|
594
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header { margin-bottom: 0; }
|
|
595
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header .el-tabs__nav-wrap { padding: 0 var(--space-card); }
|
|
596
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header .el-tabs__nav-wrap.is-scrollable { padding: 0 calc(var(--space-card) + var(--spacing-5)); } /* 标签放不下出现前后翻页箭头时(Element 写死 20px),箭头留在内边距里 */
|
|
597
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header .el-tabs__nav-prev { left: var(--space-card); }
|
|
598
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header .el-tabs__nav-next { right: var(--space-card); }
|
|
599
|
+
.el-card.flat > .el-card__body > .el-tabs > .el-tabs__header .el-tabs__item { padding: var(--spacing-4) 0; }
|
|
600
|
+
/* 看板卡(配方 .panel)用 el-card 承载时,内容区跟着纵向撑满 */
|
|
601
|
+
.el-card.panel > .el-card__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
/* ---- 全组件走查:Element 全部组件铺开扫描后补的接管 ----
|
|
605
|
+
两类:① 用主色表达"选中 / 当前 / 强调"的地方 → 分段类(单选 / 多选按钮组、el-segmented)是灰轨道上的白色内胶囊;其余按 antd 走主色系:实心选中金底白字(选中日、主色徽标、深色标签、勾选标签、引导点)、列表当前项奶金浅底(树、拖放目标)或同下拉选中项(表格筛选)、文字类深金字(级联、时间选择、锚点);
|
|
606
|
+
② 用主色做文字或 hover 的地方 → 中性色(Link / Text 的 primary、上传区文案、加载文字、开关文案、评分、朴素按钮)。
|
|
607
|
+
Element 的 success / warning / info 型按钮在这套系统里不存在(状态色是文字色,不是填充色;实底按钮只有主与危险)——退化为次要按钮,语义靠文案。 */
|
|
608
|
+
.el-link { --el-link-hover-text-color: var(--color-text-link-hover); }
|
|
609
|
+
.el-link.el-link--primary { --el-link-text-color: var(--color-text-link); --el-link-hover-text-color: var(--color-text-link-hover); }
|
|
610
|
+
.el-link.el-link--danger { --el-link-text-color: var(--color-text-danger); --el-link-hover-text-color: var(--color-text-danger); } /* 危险链接 hover 不变浅(暗色下变深会掉对比),反馈靠下划线 */
|
|
611
|
+
.el-text.el-text--primary { --el-text-color: var(--color-text-primary); }
|
|
612
|
+
.el-button--primary.is-plain, .el-button--success, .el-button--success.is-plain, .el-button--warning, .el-button--warning.is-plain, .el-button--info, .el-button--info.is-plain {
|
|
613
|
+
--el-button-text-color: var(--color-text-primary); --el-button-bg-color: var(--color-bg-surface); --el-button-border-color: var(--color-border-strong);
|
|
614
|
+
--el-button-hover-text-color: var(--color-text-primary); --el-button-hover-bg-color: var(--color-action-secondary-hover); --el-button-hover-border-color: var(--color-border-strong);
|
|
615
|
+
--el-button-active-text-color: var(--color-text-primary); --el-button-active-bg-color: var(--color-action-secondary-hover); --el-button-active-border-color: var(--color-border-strong);
|
|
616
|
+
--el-button-disabled-text-color: var(--color-text-primary); --el-button-disabled-bg-color: var(--color-bg-surface); --el-button-disabled-border-color: var(--color-border-strong);
|
|
617
|
+
}
|
|
618
|
+
.el-button--success.is-link, .el-button--warning.is-link, .el-button--info.is-link { --el-button-text-color: var(--color-text-link); --el-button-hover-text-color: var(--color-text-link-hover); --el-button-hover-link-text-color: var(--color-text-link-hover); --el-button-active-text-color: var(--color-text-link-hover); }
|
|
619
|
+
.el-button--success.is-text, .el-button--warning.is-text, .el-button--info.is-text { --el-button-text-color: var(--color-text-primary); --el-button-hover-text-color: var(--color-text-primary); --el-button-active-text-color: var(--color-text-primary); } /* 同 .el-button.is-text:文字按钮是正文色 + 浅底,不是链接 */
|
|
620
|
+
/* 标签:Element 默认类型是 primary(主色字浅底)→ 按中性状态胶囊(中性底是半透明,边线透明,免得叠出深一圈);dark 效果 = 金底白字;plain = 描边 */
|
|
621
|
+
.el-tag.el-tag--primary { --el-tag-text-color: var(--color-status-neutral); --el-tag-bg-color: var(--color-status-neutral-bg); --el-tag-border-color: transparent; --el-tag-hover-color: var(--color-text-muted); }
|
|
622
|
+
.el-tag--dark.el-tag--primary { --el-tag-text-color: var(--color-text-on-primary); --el-tag-bg-color: var(--color-action-primary); --el-tag-border-color: var(--color-action-primary); --el-tag-hover-color: var(--color-action-primary-active); }
|
|
623
|
+
.el-tag--plain.el-tag--primary { --el-tag-text-color: var(--color-text-secondary); --el-tag-bg-color: var(--color-bg-surface); --el-tag-border-color: var(--color-border-strong); }
|
|
624
|
+
.el-tag.is-hit, .el-tag.el-tag--primary.is-hit { border-color: var(--color-border-focus); }
|
|
625
|
+
.el-check-tag { border-radius: var(--radius-full); }
|
|
626
|
+
.el-check-tag.el-check-tag--primary.is-checked { background-color: var(--color-action-primary); color: var(--color-text-on-primary); }
|
|
627
|
+
.el-check-tag.el-check-tag--primary.is-checked:hover { background-color: var(--color-action-primary-hover); }
|
|
628
|
+
/* 勾选按钮组(多选分段):与单选分段同一配方——灰轨道 bg.hover、不描边,选中项 action.selected 内胶囊,常规字重 */
|
|
629
|
+
.el-checkbox-button { --el-checkbox-button-checked-bg-color: var(--color-action-selected); --el-checkbox-button-checked-text-color: var(--color-text-on-selected); --el-checkbox-button-checked-border-color: var(--color-action-selected);
|
|
630
|
+
background: var(--color-bg-hover); padding: var(--control-segmented-inset) 0; }
|
|
631
|
+
.el-checkbox-button:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); padding-left: var(--control-segmented-inset); }
|
|
632
|
+
.el-checkbox-button:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; padding-right: var(--control-segmented-inset); }
|
|
633
|
+
.el-checkbox-button:first-child:last-child { border-radius: var(--radius-full); }
|
|
634
|
+
.el-checkbox-button__inner, .el-checkbox-button:first-child .el-checkbox-button__inner, .el-checkbox-button:last-child .el-checkbox-button__inner {
|
|
635
|
+
border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-full); font-size: var(--text-body-sm-size); font-weight: var(--font-weight-regular);
|
|
636
|
+
height: calc(var(--control-height-md) - 2 * var(--control-segmented-inset)); line-height: 1; padding: 0 var(--spacing-3-5); display: inline-flex; align-items: center; }
|
|
637
|
+
.el-checkbox-button--small .el-checkbox-button__inner, .el-checkbox-button--small:first-child .el-checkbox-button__inner, .el-checkbox-button--small:last-child .el-checkbox-button__inner { height: calc(var(--control-height-sm) - 2 * var(--control-segmented-inset)); font-size: var(--text-small-size); padding: 0 var(--spacing-2-5); border-radius: var(--radius-full); } /* 与 radio-button 分段同形;Element 的 --small 规则 (0,2,0) 会给直角 + 5px 内边距,必须在同特异性上重申 */
|
|
638
|
+
.el-checkbox-button__inner:hover { color: var(--color-text-primary); }
|
|
639
|
+
.el-checkbox-button.is-checked .el-checkbox-button__inner, .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { background-color: var(--color-action-selected); color: var(--color-text-on-selected); border-color: transparent; box-shadow: none; font-weight: var(--font-weight-regular); }
|
|
640
|
+
.el-checkbox-button.is-disabled .el-checkbox-button__inner { background: transparent; color: var(--color-text-secondary); opacity: var(--opacity-disabled); border-color: transparent; }
|
|
641
|
+
.el-checkbox-button.is-focus .el-checkbox-button__inner { border-color: transparent; }
|
|
642
|
+
.el-checkbox.is-bordered.is-checked, .el-radio.is-bordered.is-checked { border-color: var(--color-border-focus); } /* 带边框的勾选 / 单选:容器选中用焦点色边线(border.focus),不用主色 */
|
|
643
|
+
/* 分段选择器组件(el-segmented):与 radio-button 分段同一配方——灰轨道 bg.hover、不描边;未选项 hover 只换字色(轨道已是 hover 灰) */
|
|
644
|
+
.el-segmented { --el-segmented-bg-color: var(--color-bg-hover); --el-segmented-color: var(--color-text-secondary); --el-segmented-item-selected-bg-color: var(--color-action-selected); --el-segmented-item-selected-color: var(--color-text-on-selected);
|
|
645
|
+
--el-segmented-item-hover-bg-color: transparent; --el-segmented-item-hover-color: var(--color-text-primary); --el-segmented-item-active-bg-color: transparent; --el-segmented-padding: var(--control-segmented-inset);
|
|
646
|
+
border-radius: var(--radius-full); font-size: var(--text-body-sm-size); }
|
|
647
|
+
.el-segmented__item, .el-segmented__item-selected, .el-segmented--small .el-segmented__item, .el-segmented--small .el-segmented__item-selected, .el-segmented--large .el-segmented__item, .el-segmented--large .el-segmented__item-selected { border-radius: var(--radius-full); }
|
|
648
|
+
.el-segmented__item.is-selected { font-weight: var(--font-weight-regular); }
|
|
649
|
+
.el-segmented--small { font-size: var(--text-small-size); }
|
|
650
|
+
/* 开关:选中态的文案用正文色,不用主色字;滑块是 control.knob 白底,选中时的加载图标用主色深一档 action.primary-active(5.3:1),text.on-primary 是白色会看不见 */
|
|
651
|
+
.el-switch__label.is-active { color: var(--color-text-primary); }
|
|
652
|
+
.el-switch.is-checked .el-switch__core .el-switch__action { color: var(--color-action-primary-active); }
|
|
653
|
+
/* 评分:填充星用品牌金(antd 是黄星),空星冷灰;焦点外框用焦点色 */
|
|
654
|
+
.el-rate { --el-rate-fill-color: var(--color-action-primary); --el-rate-void-color: var(--color-border-strong); --el-rate-disabled-void-color: var(--color-border-default); --el-rate-text-color: var(--color-text-secondary); --el-rate-outline-color: var(--color-border-focus); }
|
|
655
|
+
/* 级联 / 树选择 / 时间选择:选中项深金字(text.selected) */
|
|
656
|
+
.el-cascader-panel, .el-cascader, .el-cascader__dropdown { --el-cascader-menu-selected-text-color: var(--color-text-selected); }
|
|
657
|
+
.time-select .time-select-item.selected:not(.disabled) { color: var(--color-text-selected); }
|
|
658
|
+
.el-time-panel__btn.confirm { color: var(--color-text-primary); font-weight: var(--text-weight-label); }
|
|
659
|
+
.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after { background-color: var(--color-text-selected); }
|
|
660
|
+
.el-tree__drop-indicator, .el-input-tag__drop-indicator { background-color: var(--color-border-focus); }
|
|
661
|
+
.el-tree-node.is-drop-inner > .el-tree-node__content .el-tree-node__label { background-color: var(--color-bg-selected-subtle); color: var(--color-text-primary); }
|
|
662
|
+
/* 日历:今天与选中日同日期面板的规则 */
|
|
663
|
+
.el-calendar-table td.is-today { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
|
|
664
|
+
.el-calendar-table td.is-selected { background-color: var(--color-bg-selected); }
|
|
665
|
+
/* 表格:筛选面板选中项、表头高亮 */
|
|
666
|
+
.el-table-filter__list-item.is-active { background-color: var(--color-bg-selected); color: var(--color-text-selected); } /* 同下拉选中项 */
|
|
667
|
+
.el-table th.el-table__cell > .cell.highlight { color: var(--color-text-selected); }
|
|
668
|
+
/* 标签页:边框卡片变体的选中文字同普通标签页 text.selected(Element 的选择器特异性更高,需单独接管);无 active-bar 时的伪元素下划线 */
|
|
669
|
+
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { color: var(--color-text-selected); }
|
|
670
|
+
.el-tabs__active-bar.is-hidden ~ .is-active::after { background-color: var(--color-border-current); }
|
|
671
|
+
/* 锚点:当前项深金字(text.selected),标记条是品牌指示条 */
|
|
672
|
+
.el-anchor { --el-anchor-active-color: var(--color-text-selected); --el-anchor-marker-bg-color: var(--color-brand-indicator); }
|
|
673
|
+
/* 上传:文案链接化、聚焦用焦点色(border.focus) */
|
|
674
|
+
.el-upload-dragger .el-upload__text em { color: var(--color-text-link); text-decoration: var(--text-link-decoration); font-style: var(--text-link-style); }
|
|
675
|
+
.el-upload:focus { border-color: var(--color-border-focus); color: var(--color-text-primary); }
|
|
676
|
+
.el-upload:focus .el-upload-dragger { border-color: var(--color-border-focus); }
|
|
677
|
+
.el-upload-list__item .el-icon--close-tip { color: var(--color-text-secondary); }
|
|
678
|
+
/* 加载、结果、消息类的 primary 变体 */
|
|
679
|
+
.el-loading-spinner .el-loading-text { color: var(--color-text-secondary); }
|
|
680
|
+
.el-loading-spinner .path { stroke: var(--color-icon-default); } /* 遮罩转圈不跟主色:金色只给 DESIGN 列出的位置(加载本该用骨架屏) */
|
|
681
|
+
.el-loading-spinner i { color: var(--color-icon-default); }
|
|
682
|
+
.el-result .icon-primary { --el-result-color: var(--color-icon-brand); }
|
|
683
|
+
.el-message-box__status.el-message-box-icon--primary { --el-messagebox-color: var(--color-text-primary); }
|
|
684
|
+
.el-notification .el-notification--primary { --el-notification-icon-color: var(--color-text-primary); }
|
|
685
|
+
.el-alert--primary.is-light { background-color: var(--color-status-info-bg); color: var(--color-status-info); }
|
|
686
|
+
.el-alert--primary.is-light .el-alert__title, .el-alert--primary.is-light .el-alert__description { color: var(--color-status-info); }
|
|
687
|
+
.el-alert--primary.is-dark { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
|
|
688
|
+
/* 取色器、OTP 输入、回到顶部、Tour、抽屉拖柄 */
|
|
689
|
+
.el-color-picker.is-focused .el-color-picker__trigger { border-color: var(--color-border-focus); }
|
|
690
|
+
.el-color-predefine__color-selector.selected { box-shadow: 0 0 3px 2px var(--color-border-focus); }
|
|
691
|
+
.el-input-otp--outlined .el-input-otp__input-field:hover { box-shadow: 0 0 0 var(--border-width-control) var(--color-border-strong) inset; }
|
|
692
|
+
.el-input-otp--outlined .el-input-otp__input-field:focus-within, .el-input-otp--filled .el-input-otp__input-field:focus-within { box-shadow: 0 0 0 1px var(--color-border-focus) inset; }
|
|
693
|
+
.el-input-otp--underlined .el-input-otp__input-field:hover::after { background-color: var(--color-border-strong); }
|
|
694
|
+
.el-input-otp--underlined .el-input-otp__input-field:focus-within::after { background-color: var(--color-border-focus); }
|
|
695
|
+
.el-backtop { --el-backtop-text-color: var(--color-text-primary); --el-backtop-hover-bg-color: var(--color-bg-hover); }
|
|
696
|
+
.el-tour__content .el-tour-indicator.is-active { background: var(--color-action-primary); }
|
|
697
|
+
/* 圆形 / 仪表盘进度:Element 在 JS 里写死一张颜色表(默认 #20a0ff 蓝、success #13ce66…)当 SVG 的 stroke 属性,不走任何变量;CSS 属性能压过它。
|
|
698
|
+
代价:progress 的 color 属性(自定义色)也会被压掉——进度色不属于可自定义项,与直线进度条同一规则 */
|
|
699
|
+
.el-progress-circle__path { stroke: var(--color-action-primary-active); }
|
|
700
|
+
.el-progress.is-success .el-progress-circle__path { stroke: var(--color-status-success); }
|
|
701
|
+
.el-progress.is-exception .el-progress-circle__path { stroke: var(--color-status-error); }
|
|
702
|
+
.el-progress.is-warning .el-progress-circle__path { stroke: var(--color-status-warning); }
|
|
703
|
+
.el-progress-circle__track { stroke: var(--color-bg-selected); }
|
|
704
|
+
/* 空状态插图:Element 自带 10 档灰(暖灰倾向),换成同族冷灰,暗色随 token 变化 */
|
|
705
|
+
.el-empty { --el-empty-fill-color-0: var(--color-bg-surface); --el-empty-fill-color-1: var(--color-bg-subtle); --el-empty-fill-color-2: var(--color-bg-subtle); --el-empty-fill-color-3: var(--color-bg-page);
|
|
706
|
+
--el-empty-fill-color-4: var(--color-bg-page); --el-empty-fill-color-5: var(--color-border-default); --el-empty-fill-color-6: var(--color-border-default); --el-empty-fill-color-7: var(--color-border-default); --el-empty-fill-color-8: var(--color-border-strong); --el-empty-fill-color-9: var(--color-border-strong); }
|
|
707
|
+
/* 日历:上 / 下月的日期不是占位符,用 text.muted(暗色下占位符色 hover 掉到 2.9:1) */
|
|
708
|
+
.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev { color: var(--color-text-muted); }
|
|
709
|
+
/* 进度条内嵌文字:Element 写死白字,接到 text.on-primary(内嵌文字时填充是实色,主色深一档) */
|
|
710
|
+
.el-progress-bar__innerText { color: var(--color-text-on-primary); }
|
|
711
|
+
/* 头像:同配方 .avatar——不透明的奶金浅底 bg.selected-subtle + 深一档的 text.selected(亮 4.8:1、暗 6.6:1);不透明底叠在悬停底上也不变色。Element 默认灰底白字暗色下只有 2.5:1 */
|
|
712
|
+
.el-avatar { --el-avatar-bg-color: var(--color-bg-selected-subtle); --el-avatar-text-color: var(--color-text-selected); }
|
|
713
|
+
/* 标签 / 提示条的 dark 效果(状态色实底 + 白字)违反"状态色是文字色":退化为浅色成对;主色的 dark 标签是金底白字,不在此列 */
|
|
714
|
+
.el-tag--dark.el-tag--success { --el-tag-bg-color: var(--color-status-success-bg); --el-tag-border-color: var(--color-status-success-bg); --el-tag-text-color: var(--color-status-success); --el-tag-hover-color: var(--color-status-success); }
|
|
715
|
+
.el-tag--dark.el-tag--warning { --el-tag-bg-color: var(--color-status-warning-bg); --el-tag-border-color: var(--color-status-warning-bg); --el-tag-text-color: var(--color-status-warning); --el-tag-hover-color: var(--color-status-warning); }
|
|
716
|
+
.el-tag--dark.el-tag--danger, .el-tag--dark.el-tag--error { --el-tag-bg-color: var(--color-status-error-bg); --el-tag-border-color: var(--color-status-error-bg); --el-tag-text-color: var(--color-status-error); --el-tag-hover-color: var(--color-status-error); }
|
|
717
|
+
.el-tag--dark.el-tag--info { --el-tag-bg-color: var(--color-status-neutral-bg); --el-tag-border-color: transparent; --el-tag-text-color: var(--color-status-neutral); --el-tag-hover-color: var(--color-status-neutral); }
|
|
718
|
+
.el-alert--success.is-dark { background-color: var(--color-status-success-bg); color: var(--color-status-success); }
|
|
719
|
+
.el-alert--warning.is-dark { background-color: var(--color-status-warning-bg); color: var(--color-status-warning); }
|
|
720
|
+
.el-alert--error.is-dark { background-color: var(--color-status-error-bg); color: var(--color-status-error); }
|
|
721
|
+
.el-alert--info.is-dark { background-color: var(--color-status-info-bg); color: var(--color-status-info); }
|
|
722
|
+
.el-alert.is-dark .el-alert__description { color: inherit; }
|
|
723
|
+
/* 横向菜单:选中同侧栏当前项(主色底块白字) */
|
|
724
|
+
.el-menu.el-menu--horizontal .el-menu-item:not(.is-disabled):not(.is-active):hover, .el-menu.el-menu--horizontal .el-menu-item:not(.is-disabled):not(.is-active):focus { color: var(--el-menu-hover-text-color); }
|
|
725
|
+
.el-menu.el-menu--horizontal .el-menu-item.is-active:hover, .el-menu.el-menu--horizontal .el-menu-item.is-active:focus { background: var(--color-bg-sidebar-selected); color: var(--color-text-sidebar-selected); } /* 选中项 hover 保持主色底块:Element 横向 hover(0,4,0)会把底换成浅灰而字仍是白 */ /* Element 横向菜单 hover 文字取 active-color(底块上的白字)配 hover-bg(浅灰)→ 1.1:1;与侧栏一致用 hover-text-color */
|
|
726
|
+
/* ---- 禁用态 = opacity.disabled,不另造一套灰 ----
|
|
727
|
+
Element 的按钮禁用靠一组 disabled 变量换色(主按钮退成 primary-light-5,被我们映射成边线灰,看起来像次要按钮)。
|
|
728
|
+
把禁用色接回常态色,只留透明度;加载中也不再盖一层淡色——转圈本身就是状态。 */
|
|
729
|
+
.el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus { opacity: var(--opacity-disabled); }
|
|
730
|
+
.el-button--primary { --el-button-disabled-bg-color: var(--color-action-primary); --el-button-disabled-border-color: var(--color-action-primary); }
|
|
731
|
+
.el-button--danger { --el-button-disabled-bg-color: var(--color-action-danger); --el-button-disabled-border-color: var(--color-action-danger); }
|
|
732
|
+
.el-button:not(.el-button--primary):not(.el-button--danger):not(.is-link):not(.is-text) { --el-button-disabled-text-color: var(--color-text-primary); --el-button-disabled-bg-color: var(--color-bg-surface); --el-button-disabled-border-color: var(--color-border-strong); }
|
|
733
|
+
.el-button.is-link { --el-button-disabled-text-color: var(--color-text-link); }
|
|
734
|
+
.el-button.is-text { --el-button-disabled-text-color: var(--color-text-primary); } /* 文字按钮常态是正文色(见上方 .el-button.is-text),禁用只压透明度 */
|
|
735
|
+
.el-button.is-text.is-disabled, .el-button.is-text.is-disabled:hover, .el-button.is-text.is-disabled:focus { background-color: var(--color-action-quiet); } /* 禁用的文字按钮也保留浅底,不裸放 */
|
|
736
|
+
.el-button.is-loading::before { background-color: transparent; }
|
|
737
|
+
|
|
738
|
+
/* ---- 控件高度共用 control.height.* ----
|
|
739
|
+
Element 只有输入类组件读 --el-component-size;按钮、下拉、级联、取色器、单选、开关、滑杆、评分、表单标签行高、分段器、分页的高度
|
|
740
|
+
是各尺寸类自己写死的 32 / 24 / 40。结果是按钮 32 vs 输入框 34,规则"共用 control.height"一直没真正成立。
|
|
741
|
+
按其原选择器同形逐条接回 token。 */
|
|
742
|
+
.el-button { --el-button-size: var(--control-height-md); height: var(--el-button-size); }
|
|
743
|
+
.el-button--large { --el-button-size: var(--control-height-lg); }
|
|
744
|
+
.el-button--small { --el-button-size: var(--control-height-sm); }
|
|
745
|
+
.el-select__wrapper { min-height: var(--control-height-md); }
|
|
746
|
+
.el-select--large .el-select__wrapper { min-height: var(--control-height-lg); }
|
|
747
|
+
.el-select--small .el-select__wrapper { min-height: var(--control-height-sm); }
|
|
748
|
+
.el-cascader { line-height: var(--control-height-md); }
|
|
749
|
+
.el-cascader--large { line-height: var(--control-height-lg); }
|
|
750
|
+
.el-cascader--small { line-height: var(--control-height-sm); }
|
|
751
|
+
.el-color-picker, .el-radio, .el-switch, .el-slider, .el-rate { height: var(--control-height-md); }
|
|
752
|
+
.el-color-picker--large, .el-radio.el-radio--large, .el-switch--large, .el-slider--large, .el-rate--large { height: var(--control-height-lg); }
|
|
753
|
+
.el-color-picker--small, .el-radio.el-radio--small, .el-switch--small, .el-slider--small, .el-rate--small { height: var(--control-height-sm); }
|
|
754
|
+
.el-form-item__label, .el-form-item--default .el-form-item__label { height: var(--control-height-md); line-height: var(--control-height-md); }
|
|
755
|
+
.el-form-item__content, .el-form-item--default .el-form-item__content { line-height: var(--control-height-md); }
|
|
756
|
+
.el-form-item--large .el-form-item__label { height: var(--control-height-lg); line-height: var(--control-height-lg); }
|
|
757
|
+
.el-form-item--large .el-form-item__content { line-height: var(--control-height-lg); }
|
|
758
|
+
.el-form-item--small .el-form-item__label { height: var(--control-height-sm); line-height: var(--control-height-sm); }
|
|
759
|
+
.el-form-item--small .el-form-item__content { line-height: var(--control-height-sm); }
|
|
760
|
+
.el-segmented { min-height: var(--control-height-md); }
|
|
761
|
+
.el-segmented--large { min-height: var(--control-height-lg); }
|
|
762
|
+
.el-segmented--small { min-height: var(--control-height-sm); }
|
|
763
|
+
.el-input-number { line-height: calc(var(--control-height-md) - 2px); }
|
|
764
|
+
.el-input-number--small { line-height: calc(var(--control-height-sm) - 2px); }
|
|
765
|
+
.el-input-number--large { line-height: calc(var(--control-height-lg) - 2px); }
|
|
766
|
+
|
|
767
|
+
/* ── 树、标签页头间距、合计行、弹窗尺寸档、加载中的按钮 ── */
|
|
768
|
+
/* 树:当前节点用奶金浅底(color.bg.selected-subtle,同 antd 树的选中底)+ 500 字重;行高进控件档;展开箭头用 icon.muted(占位符灰只有 2.5:1) */
|
|
769
|
+
.el-tree { --el-tree-node-content-height: var(--control-height-md); --el-tree-expand-icon-color: var(--color-icon-muted); --el-tree-node-hover-bg-color: var(--color-bg-hover); }
|
|
770
|
+
.el-tree-node__content { border-radius: var(--radius-md); }
|
|
771
|
+
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: var(--color-bg-selected-subtle); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
|
|
772
|
+
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__expand-icon, .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label, .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-text { color: inherit; } /* 标签用 el-text 渲染时自带正文色,当前项上跟随 */
|
|
773
|
+
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:hover { background-color: var(--color-bg-selected-subtle); }
|
|
774
|
+
/* 标签页头与内容的间距:Element 写死 15px,接到间距阶梯 */
|
|
775
|
+
.el-tabs__header { margin: 0 0 var(--spacing-4); }
|
|
776
|
+
.el-tabs--border-card > .el-tabs__header { margin: 0; }
|
|
777
|
+
/* 直接放在内容区的标签栏(报表页这类只切换下方内容、pane 为空的页面级标签):下边距交给内容区的 gap,不与它叠成两倍(同配方 .content > .stat-strip) */
|
|
778
|
+
.content > .el-tabs > .el-tabs__header { margin-bottom: 0; }
|
|
779
|
+
/* 表格合计行(show-summary):Element 用行 hover 色做底、字重同正文,压不住正文行 → 浅底 + 500 + 等宽数字(DESIGN 表格配方「合计行」) */
|
|
780
|
+
.el-table__footer-wrapper td.el-table__cell { background-color: var(--color-bg-subtle); color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-family: var(--text-numeric-family); font-variant-numeric: var(--text-numeric-variant); }
|
|
781
|
+
/* 弹窗尺寸档:用 class 而不是 :width="'var(--…)'" 传字符串——确认类 sm、带表单 md */
|
|
782
|
+
.el-dialog.is-sm { --el-dialog-width: var(--layout-modal-width-sm); }
|
|
783
|
+
.el-dialog.is-md { --el-dialog-width: var(--layout-modal-width-md); }
|
|
784
|
+
/* 加载中的按钮不压淡:Element 在 loading 时同时加 is-disabled,正在处理的主按钮不应像禁用态 */
|
|
785
|
+
.el-button.is-loading.is-disabled, .el-button.is-loading.is-disabled:hover { opacity: 1; }
|