xt-element-ui 1.2.2 → 1.2.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.
Files changed (36) hide show
  1. package/lib/index.common.js +1322 -1281
  2. package/lib/index.css +1 -1
  3. package/lib/index.umd.js +1327 -1286
  4. package/lib/index.umd.min.js +5 -5
  5. package/package.json +1 -1
  6. package/src/components/ex-button/index.vue +1 -1
  7. package/src/components/ex-button/style/index.scss +10 -4
  8. package/src/components/ex-chart/ExPie.vue +1 -4
  9. package/src/components/ex-chart/theme/dark.js +15 -13
  10. package/src/components/ex-chart/utils.js +1 -1
  11. package/src/components/ex-page/index.js +2 -0
  12. package/src/components/ex-select-tree/index.js +2 -0
  13. package/src/components/{xt-select-tree → ex-select-tree}/index.vue +1 -1
  14. package/src/components/ex-table/ExTableCell.vue +3 -2
  15. package/src/components/ex-table/VirtualElTable.vue +234 -0
  16. package/src/components/ex-table/index.vue +176 -445
  17. package/src/components/ex-upload/index.js +2 -0
  18. package/src/components/xt-button/index.vue +2 -2
  19. package/src/components/xt-button/style/index.scss +524 -614
  20. package/src/components/xt-card-item/index copy.vue +93 -0
  21. package/src/components/xt-card-item/index.vue +23 -83
  22. package/src/components/xt-card-item/style/index copy.scss +72 -0
  23. package/src/components/xt-card-item/style/index.scss +51 -40
  24. package/src/components/xt-config-provider/index.js +2 -2
  25. package/src/components/xt-config-provider/index.vue +9 -5
  26. package/src/components/xt-text/index.vue +58 -29
  27. package/src/components/xt-text/style/index.scss +13 -13
  28. package/src/styles/css-variables.scss +1 -1
  29. package/src/styles/element-theme.scss +1 -1
  30. package/src/utils/index.js +11 -2
  31. package/src/components/xt-page/index.js +0 -0
  32. package/src/components/xt-select-tree/index.js +0 -0
  33. package/src/components/xt-upload/index.js +0 -2
  34. /package/src/components/{xt-page → ex-page}/index.vue +0 -0
  35. /package/src/components/{xt-upload → ex-upload}/index.vue +0 -0
  36. /package/src/components/{xt-upload → ex-upload}/preview.vue +0 -0
package/src/components/xt-button/style/index.scss CHANGED
@@ -1,524 +1,425 @@
1
1
  @import '../../../styles/variables.scss';
2
2
 
3
- .xt-button-group>.xt-button+.xt-button {
4
- margin-left: 0
5
- }
6
-
7
- .xt-button-group>.xt-button:first-child:last-child {
8
- border-top-right-radius: var(--xt-border-radius-base);
9
- border-bottom-right-radius: var(--xt-border-radius-base);
10
- border-top-left-radius: var(--xt-border-radius-base);
11
- border-bottom-left-radius: var(--xt-border-radius-base)
12
- }
13
-
14
- .xt-button-group>.xt-button:first-child:last-child.is-round {
15
- border-radius: var(--xt-border-radius-round)
16
- }
17
-
18
- .xt-button-group>.xt-button:first-child:last-child.is-circle {
19
- border-radius: 50%
20
- }
21
-
22
- .xt-button-group>.xt-button:not(:first-child):not(:last-child) {
23
- border-radius: 0
24
- }
25
-
26
- .xt-button-group>.xt-button:hover,.xt-button-group>.xt-button:focus,.xt-button-group>.xt-button:active {
27
- z-index: 1
28
- }
29
-
30
- .xt-button-group>.xt-button.is-active {
31
- z-index: 1
32
- }
33
-
3
+ // 按钮基础全局变量（抽离顶层，统一管控）
4
+ :root {
5
+ --xt-button-divide-border-color: rgba(255, 255, 255, 0.5);
6
+ }
7
+
8
+ // 按钮组容器基础
9
+ .xt-button-group {
10
+ > .xt-button + .xt-button {
11
+ margin-left: 0;
12
+ }
13
+
14
+ // 单个按钮（组内唯一）恢复完整圆角
15
+ > .xt-button:first-child:last-child {
16
+ border-radius: var(--xt-border-radius-base);
17
+
18
+ &.is-round {
19
+ border-radius: var(--xt-border-radius-round);
20
+ }
21
+ &.is-circle {
22
+ border-radius: 50%;
23
+ }
24
+ }
25
+
26
+ // 组内中间按钮 无圆角
27
+ > .xt-button:not(:first-child):not(:last-child) {
28
+ border-radius: 0;
29
+ }
30
+
31
+ // hover / focus / active / active 层级提升
32
+ > .xt-button {
33
+ &:hover,
34
+ &:focus,
35
+ &:active,
36
+ &.is-active {
37
+ z-index: 1;
38
+ }
39
+ }
40
+ }
41
+
42
+ // 水平按钮组
34
43
  .xt-button-group--horizontal {
35
- display: inline-block;
36
- vertical-align: middle
37
- }
44
+ display: inline-block;
45
+ vertical-align: middle;
38
46
 
39
- .xt-button-group--horizontal:before,.xt-button-group--horizontal:after {
47
+ &::before,
48
+ &::after {
40
49
  display: table;
41
- content: ""
42
- }
43
-
44
- .xt-button-group--horizontal:after {
45
- clear: both
46
- }
50
+ content: "";
51
+ }
52
+ &::after {
53
+ clear: both;
54
+ }
47
55
 
48
- .xt-button-group--horizontal>.xt-button {
56
+ > .xt-button {
49
57
  float: left;
50
- position: relative
51
- }
58
+ position: relative;
59
+ }
52
60
 
53
- .xt-button-group--horizontal>.xt-button:first-child {
61
+ > .xt-button:first-child {
54
62
  border-top-right-radius: 0;
55
- border-bottom-right-radius: 0
56
- }
57
-
58
- .xt-button-group--horizontal>.xt-button:last-child {
63
+ border-bottom-right-radius: 0;
64
+ }
65
+ > .xt-button:last-child {
59
66
  border-top-left-radius: 0;
60
- border-bottom-left-radius: 0
61
- }
62
-
63
- .xt-button-group--horizontal>.xt-button:not(:last-child) {
64
- margin-right: -1px
65
- }
66
-
67
- .xt-button-group--horizontal .xt-button--primary:first-child {
68
- border-right-color: var(--xt-button-divide-border-color)
69
- }
70
-
71
- .xt-button-group--horizontal .xt-button--primary:last-child {
72
- border-left-color: var(--xt-button-divide-border-color)
73
- }
74
-
75
- .xt-button-group--horizontal .xt-button--primary:not(:first-child):not(:last-child) {
76
- border-left-color: var(--xt-button-divide-border-color);
77
- border-right-color: var(--xt-button-divide-border-color)
78
- }
79
-
80
- .xt-button-group--horizontal .xt-button--success:first-child {
81
- border-right-color: var(--xt-button-divide-border-color)
82
- }
83
-
84
- .xt-button-group--horizontal .xt-button--success:last-child {
85
- border-left-color: var(--xt-button-divide-border-color)
86
- }
87
-
88
- .xt-button-group--horizontal .xt-button--success:not(:first-child):not(:last-child) {
89
- border-left-color: var(--xt-button-divide-border-color);
90
- border-right-color: var(--xt-button-divide-border-color)
91
- }
92
-
93
- .xt-button-group--horizontal .xt-button--warning:first-child {
94
- border-right-color: var(--xt-button-divide-border-color)
95
- }
96
-
97
- .xt-button-group--horizontal .xt-button--warning:last-child {
98
- border-left-color: var(--xt-button-divide-border-color)
99
- }
100
-
101
- .xt-button-group--horizontal .xt-button--warning:not(:first-child):not(:last-child) {
102
- border-left-color: var(--xt-button-divide-border-color);
103
- border-right-color: var(--xt-button-divide-border-color)
104
- }
105
-
106
- .xt-button-group--horizontal .xt-button--danger:first-child {
107
- border-right-color: var(--xt-button-divide-border-color)
108
- }
109
-
110
- .xt-button-group--horizontal .xt-button--danger:last-child {
111
- border-left-color: var(--xt-button-divide-border-color)
112
- }
113
-
114
- .xt-button-group--horizontal .xt-button--danger:not(:first-child):not(:last-child) {
115
- border-left-color: var(--xt-button-divide-border-color);
116
- border-right-color: var(--xt-button-divide-border-color)
117
- }
118
-
119
- .xt-button-group--horizontal .xt-button--info:first-child {
120
- border-right-color: var(--xt-button-divide-border-color)
121
- }
122
-
123
- .xt-button-group--horizontal .xt-button--info:last-child {
124
- border-left-color: var(--xt-button-divide-border-color)
125
- }
126
-
127
- .xt-button-group--horizontal .xt-button--info:not(:first-child):not(:last-child) {
128
- border-left-color: var(--xt-button-divide-border-color);
129
- border-right-color: var(--xt-button-divide-border-color)
130
- }
131
-
132
- .xt-button-group--horizontal>.el-dropdown>.xt-button {
67
+ border-bottom-left-radius: 0;
68
+ }
69
+ > .xt-button:not(:last-child) {
70
+ margin-right: -1px;
71
+ }
72
+
73
+ // 各类主题分割线颜色
74
+ .xt-button--primary,
75
+ .xt-button--success,
76
+ .xt-button--warning,
77
+ .xt-button--danger,
78
+ .xt-button--info {
79
+ &:first-child {
80
+ border-right-color: var(--xt-button-divide-border-color);
81
+ }
82
+ &:last-child {
83
+ border-left-color: var(--xt-button-divide-border-color);
84
+ }
85
+ &:not(:first-child):not(:last-child) {
86
+ border-left-color: var(--xt-button-divide-border-color);
87
+ border-right-color: var(--xt-button-divide-border-color);
88
+ }
89
+ }
90
+
91
+ > .el-dropdown > .xt-button {
133
92
  border-top-left-radius: 0;
134
93
  border-bottom-left-radius: 0;
135
- border-left-color: var(--xt-button-divide-border-color)
94
+ border-left-color: var(--xt-button-divide-border-color);
95
+ }
136
96
  }
137
97
 
98
+ // 垂直按钮组
138
99
  .xt-button-group--vertical {
139
- display: inline-flex;
140
- flex-direction: column;
141
- align-items: stretch
142
- }
100
+ display: inline-flex;
101
+ flex-direction: column;
102
+ align-items: stretch;
143
103
 
144
- .xt-button-group--vertical>.xt-button {
145
- margin-top: -1px
146
- }
104
+ > .xt-button,
105
+ > .el-dropdown {
106
+ margin-top: -1px;
107
+ }
147
108
 
148
- .xt-button-group--vertical>.xt-button:first-child {
109
+ > .xt-button:first-child {
149
110
  border-bottom-left-radius: 0;
150
- border-bottom-right-radius: 0
151
- }
152
-
153
- .xt-button-group--vertical>.xt-button:last-child {
111
+ border-bottom-right-radius: 0;
112
+ }
113
+ > .xt-button:last-child {
154
114
  border-top-left-radius: 0;
155
- border-top-right-radius: 0
156
- }
157
-
158
- .xt-button-group--vertical>.el-dropdown {
159
- margin-top: -1px
160
- }
115
+ border-top-right-radius: 0;
116
+ }
161
117
 
162
- .xt-button-group--vertical>.el-dropdown>.xt-button {
118
+ > .el-dropdown > .xt-button {
163
119
  border-top-left-radius: 0;
164
120
  border-top-right-radius: 0;
165
- border-left-color: var(--xt-button-divide-border-color)
166
- }
167
-
168
- .xt-button-group--vertical .xt-button--primary:first-child {
169
- border-bottom-color: var(--xt-button-divide-border-color)
170
- }
171
-
172
- .xt-button-group--vertical .xt-button--primary:last-child {
173
- border-top-color: var(--xt-button-divide-border-color)
174
- }
175
-
176
- .xt-button-group--vertical .xt-button--primary:not(:first-child):not(:last-child) {
177
- border-top-color: var(--xt-button-divide-border-color);
178
- border-bottom-color: var(--xt-button-divide-border-color)
179
- }
180
-
181
- .xt-button-group--vertical .xt-button--success:first-child {
182
- border-bottom-color: var(--xt-button-divide-border-color)
183
- }
184
-
185
- .xt-button-group--vertical .xt-button--success:last-child {
186
- border-top-color: var(--xt-button-divide-border-color)
187
- }
188
-
189
- .xt-button-group--vertical .xt-button--success:not(:first-child):not(:last-child) {
190
- border-top-color: var(--xt-button-divide-border-color);
191
- border-bottom-color: var(--xt-button-divide-border-color)
192
- }
193
-
194
- .xt-button-group--vertical .xt-button--warning:first-child {
195
- border-bottom-color: var(--xt-button-divide-border-color)
196
- }
197
-
198
- .xt-button-group--vertical .xt-button--warning:last-child {
199
- border-top-color: var(--xt-button-divide-border-color)
200
- }
201
-
202
- .xt-button-group--vertical .xt-button--warning:not(:first-child):not(:last-child) {
203
- border-top-color: var(--xt-button-divide-border-color);
204
- border-bottom-color: var(--xt-button-divide-border-color)
205
- }
206
-
207
- .xt-button-group--vertical .xt-button--danger:first-child {
208
- border-bottom-color: var(--xt-button-divide-border-color)
209
- }
210
-
211
- .xt-button-group--vertical .xt-button--danger:last-child {
212
- border-top-color: var(--xt-button-divide-border-color)
213
- }
214
-
215
- .xt-button-group--vertical .xt-button--danger:not(:first-child):not(:last-child) {
216
- border-top-color: var(--xt-button-divide-border-color);
217
- border-bottom-color: var(--xt-button-divide-border-color)
218
- }
219
-
220
- .xt-button-group--vertical .xt-button--info:first-child {
221
- border-bottom-color: var(--xt-button-divide-border-color)
222
- }
223
-
224
- .xt-button-group--vertical .xt-button--info:last-child {
225
- border-top-color: var(--xt-button-divide-border-color)
226
- }
227
-
228
- .xt-button-group--vertical .xt-button--info:not(:first-child):not(:last-child) {
229
- border-top-color: var(--xt-button-divide-border-color);
230
- border-bottom-color: var(--xt-button-divide-border-color)
231
- }
232
-
233
- .xt-button {
234
- --xt-button-font-weight: var(--xt-font-weight-primary);
235
- --xt-button-border-color: var(--xt-border-color);
236
- --xt-button-bg-color: var(--xt-fill-color-blank);
237
- --xt-button-text-color: var(--xt-text-color-regular);
238
- --xt-button-disabled-text-color: var(--xt-disabled-text-color);
239
- --xt-button-disabled-bg-color: var(--xt-fill-color-blank);
240
- --xt-button-disabled-border-color: var(--xt-border-color-light);
241
- --xt-button-divide-border-color: rgba(255, 255, 255, .5);
242
- --xt-button-hover-text-color: var(--xt-color-primary);
243
- --xt-button-hover-bg-color: var(--xt-color-primary-light-9);
244
- --xt-button-hover-border-color: var(--xt-color-primary-light-7);
245
- --xt-button-active-text-color: var(--xt-button-hover-text-color);
246
- --xt-button-active-border-color: var(--xt-color-primary);
247
- --xt-button-active-bg-color: var(--xt-button-hover-bg-color);
248
- --xt-button-outline-color: var(--xt-color-primary-light-5);
249
- --xt-button-hover-link-text-color: var(--xt-text-color-secondary);
250
- --xt-button-active-color: var(--xt-text-color-primary)
121
+ border-left-color: var(--xt-button-divide-border-color);
122
+ }
123
+
124
+ // 各类主题分割线颜色
125
+ .xt-button--primary,
126
+ .xt-button--success,
127
+ .xt-button--warning,
128
+ .xt-button--danger,
129
+ .xt-button--info {
130
+ &:first-child {
131
+ border-bottom-color: var(--xt-button-divide-border-color);
132
+ }
133
+ &:last-child {
134
+ border-top-color: var(--xt-button-divide-border-color);
135
+ }
136
+ &:not(:first-child):not(:last-child) {
137
+ border-top-color: var(--xt-button-divide-border-color);
138
+ border-bottom-color: var(--xt-button-divide-border-color);
139
+ }
140
+ }
251
141
  }
252
142
 
253
143
  .xt-button {
144
+ // 主题系列变量
145
+ --xt-button-font-weight: var(--xt-font-weight-primary);
146
+ --xt-button-border-color: var(--xt-border-color);
147
+ --xt-button-bg-color: var(--xt-fill-color-blank);
148
+ --xt-button-text-color: var(--xt-text-color-regular);
149
+ --xt-button-disabled-text-color: var(--xt-disabled-text-color);
150
+ --xt-button-disabled-bg-color: var(--xt-fill-color-blank);
151
+ --xt-button-disabled-border-color: var(--xt-border-color-light);
152
+ --xt-button-hover-text-color: var(--xt-color-primary);
153
+ --xt-button-hover-bg-color: var(--xt-color-primary-light-9);
154
+ --xt-button-hover-border-color: var(--xt-color-primary-light-7);
155
+ --xt-button-active-text-color: var(--xt-button-hover-text-color);
156
+ --xt-button-active-border-color: var(--xt-color-primary);
157
+ --xt-button-active-bg-color: var(--xt-button-hover-bg-color);
158
+ --xt-button-outline-color: var(--xt-color-primary-light-5);
159
+ --xt-button-hover-link-text-color: var(--xt-text-color-secondary);
160
+ --xt-button-active-color: var(--xt-text-color-primary);
161
+
162
+ // 布局基础
163
+ display: inline-flex;
164
+ justify-content: center;
165
+ align-items: center;
166
+ line-height: 1.5;
167
+ // 关键：取消固定 height，用 min-height + padding 自适应字体
168
+ min-height: 32px;
169
+ height: auto;
170
+ white-space: nowrap;
171
+ cursor: pointer;
172
+ color: var(--xt-button-text-color);
173
+ text-align: center;
174
+ box-sizing: border-box;
175
+ outline: none;
176
+ transition: 0.1s;
177
+ font-weight: var(--xt-button-font-weight);
178
+ user-select: none;
179
+ vertical-align: middle;
180
+ -webkit-appearance: none;
181
+ background-color: var(--xt-button-bg-color);
182
+ border: var(--xt-border);
183
+ border-color: var(--xt-button-border-color);
184
+ padding: 8px 15px;
185
+ font-size: var(--xt-font-size-base);
186
+ border-radius: var(--xt-border-radius-base);
187
+
188
+ // 相邻按钮间距
189
+ & + .xt-button {
190
+ margin-left: 12px;
191
+ }
192
+
193
+ // 内部文字容器
194
+ > span {
254
195
  display: inline-flex;
255
- justify-content: center;
256
196
  align-items: center;
257
- line-height: 1;
258
- height: 32px;
259
- white-space: nowrap;
260
- cursor: pointer;
261
- color: var(--xt-button-text-color);
262
- text-align: center;
263
- box-sizing: border-box;
264
- outline: none;
265
- transition: .1s;
266
- font-weight: var(--xt-button-font-weight);
267
- -webkit-user-select: none;
268
- user-select: none;
269
- vertical-align: middle;
270
- -webkit-appearance: none;
271
- background-color: var(--xt-button-bg-color);
272
- border: var(--xt-border);
273
- border-color: var(--xt-button-border-color)
274
- }
275
-
276
-
277
-
278
-
279
- .xt-button:hover {
197
+ }
198
+
199
+ // 图标 + 文字间距
200
+ [class*="el-icon"] + span {
201
+ margin-left: 6px;
202
+ }
203
+ [class*="el-icon"] svg {
204
+ vertical-align: bottom;
205
+ }
206
+
207
+ // 清除火狐默认焦点边框
208
+ &::-moz-focus-inner {
209
+ border: 0;
210
+ }
211
+
212
+ // hover / active 状态
213
+ &:hover {
280
214
  color: var(--xt-button-hover-text-color);
281
215
  border-color: var(--xt-button-hover-border-color);
282
216
  background-color: var(--xt-button-hover-bg-color);
283
- outline: none
284
- }
285
-
286
- .xt-button:active {
217
+ outline: none;
218
+ }
219
+ &:active {
287
220
  color: var(--xt-button-active-text-color);
288
221
  border-color: var(--xt-button-active-border-color);
289
222
  background-color: var(--xt-button-active-bg-color);
290
- outline: none
291
- }
223
+ outline: none;
224
+ }
292
225
 
293
- .xt-button:focus-visible {
226
+ // 键盘焦点样式
227
+ &:focus-visible {
294
228
  outline: 2px solid var(--xt-button-outline-color);
295
229
  outline-offset: 1px;
296
- transition: outline-offset 0s,outline 0s
297
- }
298
-
299
- .xt-button>span {
300
- display: inline-flex;
301
- align-items: center
302
- }
230
+ transition: outline-offset 0s, outline 0s;
231
+ }
303
232
 
304
- .xt-button+.xt-button {
305
- margin-left: 12px
306
- }
307
-
308
- .xt-button {
309
- padding: 8px 15px;
310
- font-size: var(--xt-font-size-base);
311
- border-radius: var(--xt-border-radius-base)
312
- }
313
-
314
- .xt-button.is-round {
315
- padding: 8px 15px
316
- }
317
-
318
- .xt-button::-moz-focus-inner {
319
- border: 0
320
- }
321
-
322
- .xt-button [class*=el-icon]+span {
323
- margin-left: 6px
324
- }
325
-
326
- .xt-button [class*=el-icon] svg {
327
- vertical-align: bottom
328
- }
329
-
330
- .xt-button.is-plain {
331
- --xt-button-hover-text-color: var(--xt-color-primary);
332
- --xt-button-hover-bg-color: var(--xt-fill-color-blank);
333
- --xt-button-hover-border-color: var(--xt-color-primary)
334
- }
335
-
336
- .xt-button.is-active {
233
+ // 激活态
234
+ &.is-active {
337
235
  color: var(--xt-button-active-text-color);
338
236
  border-color: var(--xt-button-active-border-color);
339
237
  background-color: var(--xt-button-active-bg-color);
340
- outline: none
341
- }
238
+ outline: none;
239
+ }
342
240
 
343
- .xt-button.is-disabled,.xt-button.is-disabled:hover {
344
- color: var(--xt-button-disabled-text-color);
241
+ // 禁用态
242
+ &.is-disabled {
345
243
  cursor: not-allowed;
244
+ color: var(--xt-button-disabled-text-color);
346
245
  background-image: none;
347
246
  background-color: var(--xt-button-disabled-bg-color);
348
- border-color: var(--xt-button-disabled-border-color)
349
- }
247
+ border-color: var(--xt-button-disabled-border-color);
350
248
 
351
- .xt-button.is-loading {
352
- position: relative;
353
- pointer-events: none
354
- }
249
+ &:hover {
250
+ color: var(--xt-button-disabled-text-color);
251
+ background-color: var(--xt-button-disabled-bg-color);
252
+ border-color: var(--xt-button-disabled-border-color);
253
+ }
254
+ }
355
255
 
356
- .xt-button.is-loading:before {
357
- z-index: 1;
256
+ // 加载态
257
+ &.is-loading {
258
+ position: relative;
358
259
  pointer-events: none;
359
- content: "";
360
- position: absolute;
361
- left: -1px;
362
- top: -1px;
363
- right: -1px;
364
- bottom: -1px;
365
- border-radius: inherit;
366
- background-color: var(--xt-mask-color-extra-light)
367
- }
368
-
369
- .xt-button.is-round {
370
- border-radius: var(--xt-border-radius-round)
371
- }
372
260
 
373
- .xt-button.is-dashed {
261
+ &::before {
262
+ z-index: 1;
263
+ pointer-events: none;
264
+ content: "";
265
+ position: absolute;
266
+ left: -1px;
267
+ top: -1px;
268
+ right: -1px;
269
+ bottom: -1px;
270
+ border-radius: inherit;
271
+ background-color: var(--xt-mask-color-extra-light);
272
+ }
273
+ }
274
+
275
+ // 圆角样式
276
+ &.is-round {
277
+ border-radius: var(--xt-border-radius-round);
278
+ }
279
+
280
+ // 虚线边框
281
+ &.is-dashed {
374
282
  border-style: dashed;
375
283
  --xt-button-hover-text-color: var(--xt-color-primary);
376
284
  --xt-button-hover-bg-color: var(--xt-fill-color-blank);
377
- --xt-button-hover-border-color: var(--xt-color-primary)
378
- }
285
+ --xt-button-hover-border-color: var(--xt-color-primary);
286
+ }
379
287
 
380
- .xt-button.is-circle {
288
+ // 圆形按钮
289
+ &.is-circle {
381
290
  width: 32px;
291
+ min-height: 32px;
292
+ padding: 8px;
382
293
  border-radius: 50%;
383
- padding: 8px
384
- }
294
+ }
385
295
 
386
- .xt-button.is-text {
387
- color: var(--xt-button-text-color);
296
+ // 文字按钮
297
+ &.is-text {
388
298
  border: 0 solid transparent;
389
- background-color: transparent
390
- }
391
-
392
- .xt-button.is-text.is-disabled {
393
- color: var(--xt-button-disabled-text-color);
394
- background-color: transparent!important
395
- }
396
-
397
- .xt-button.is-text:not(.is-disabled):hover {
398
- background-color: var(--xt-fill-color-light)
399
- }
400
-
401
- .xt-button.is-text:not(.is-disabled):focus-visible {
402
- outline: 2px solid var(--xt-button-outline-color);
403
- outline-offset: 1px;
404
- transition: outline-offset 0s,outline 0s
405
- }
406
-
407
- .xt-button.is-text:not(.is-disabled):active {
408
- background-color: var(--xt-fill-color)
409
- }
410
-
411
- .xt-button.is-text:not(.is-disabled).is-has-bg {
412
- background-color: var(--xt-fill-color-light)
413
- }
414
-
415
- .xt-button.is-text:not(.is-disabled).is-has-bg:hover {
416
- background-color: var(--xt-fill-color)
417
- }
418
-
419
- .xt-button.is-text:not(.is-disabled).is-has-bg:active {
420
- background-color: var(--xt-fill-color-dark)
421
- }
422
-
423
- .xt-button__text--expand {
424
- letter-spacing: .3em;
425
- margin-right: -.3em
426
- }
427
-
428
- .xt-button.is-link {
299
+ background-color: transparent;
300
+
301
+ &.is-disabled {
302
+ background-color: transparent !important;
303
+ }
304
+
305
+ &:not(.is-disabled) {
306
+ &:hover {
307
+ background-color: var(--xt-fill-color-light);
308
+ }
309
+ &:active {
310
+ background-color: var(--xt-fill-color);
311
+ }
312
+ &:focus-visible {
313
+ outline: 2px solid var(--xt-button-outline-color);
314
+ outline-offset: 1px;
315
+ transition: outline-offset 0s, outline 0s;
316
+ }
317
+
318
+ &.is-has-bg {
319
+ background-color: var(--xt-fill-color-light);
320
+ &:hover {
321
+ background-color: var(--xt-fill-color);
322
+ }
323
+ &:active {
324
+ background-color: var(--xt-fill-color-dark);
325
+ }
326
+ }
327
+ }
328
+ }
329
+
330
+ // 链接按钮
331
+ &.is-link {
429
332
  border-color: transparent;
430
- color: var(--xt-button-text-color);
431
333
  background: transparent;
432
334
  padding: 2px;
433
- height: auto
434
- }
435
-
436
- .xt-button.is-link:hover {
437
- color: var(--xt-button-hover-link-text-color)
438
- }
439
-
440
- .xt-button.is-link.is-disabled {
441
- color: var(--xt-button-disabled-text-color);
442
- background-color: transparent!important;
443
- border-color: transparent!important
444
- }
445
-
446
- .xt-button.is-link:not(.is-disabled):hover {
447
- border-color: transparent;
448
- background-color: transparent
449
- }
450
-
451
- .xt-button.is-link:not(.is-disabled):active {
452
- color: var(--xt-button-active-color);
453
- border-color: transparent;
454
- background-color: transparent
455
- }
456
-
457
- .xt-button--text {
335
+ min-height: auto;
336
+
337
+ &:hover {
338
+ color: var(--xt-button-hover-link-text-color);
339
+ border-color: transparent;
340
+ background-color: transparent;
341
+ }
342
+ &:active {
343
+ color: var(--xt-button-active-color);
344
+ border-color: transparent;
345
+ background-color: transparent;
346
+ }
347
+ &.is-disabled {
348
+ background-color: transparent !important;
349
+ border-color: transparent !important;
350
+ }
351
+ }
352
+
353
+ // 纯文字按钮变体
354
+ &.xt-button--text {
458
355
  border-color: transparent;
459
356
  background: transparent;
460
357
  color: var(--xt-color-primary);
461
358
  padding-left: 0;
462
- padding-right: 0
463
- }
464
-
465
- .xt-button--text.is-disabled {
466
- color: var(--xt-button-disabled-text-color);
467
- background-color: transparent!important;
468
- border-color: transparent!important
469
- }
470
-
471
- .xt-button--text:not(.is-disabled):hover {
472
- color: var(--xt-color-primary-light-3);
473
- border-color: transparent;
474
- background-color: transparent
475
- }
476
-
477
- .xt-button--text:not(.is-disabled):active {
478
- color: var(--xt-color-primary-dark-2);
479
- border-color: transparent;
480
- background-color: transparent
481
- }
482
-
483
- .xt-button__link--expand {
484
- letter-spacing: .3em;
485
- margin-right: -.3em
486
- }
487
-
359
+ padding-right: 0;
360
+
361
+ &.is-disabled {
362
+ color: var(--xt-button-disabled-text-color);
363
+ background-color: transparent !important;
364
+ border-color: transparent !important;
365
+ }
366
+ &:not(.is-disabled) {
367
+ &:hover {
368
+ color: var(--xt-color-primary-light-3);
369
+ }
370
+ &:active {
371
+ color: var(--xt-color-primary-dark-2);
372
+ }
373
+ }
374
+ }
375
+
376
+ // 文字加宽效果
377
+ &__text--expand {
378
+ letter-spacing: 0.3em;
379
+ margin-right: -0.3em;
380
+ }
381
+ &__link--expand {
382
+ letter-spacing: 0.3em;
383
+ margin-right: -0.3em;
384
+ }
385
+ }
386
+
387
+ // 主要按钮 - primary
488
388
  .xt-button--primary {
489
- --xt-button-text-color: var(--xt-color-white);
490
- --xt-button-bg-color: var(--xt-color-primary);
491
- --xt-button-border-color: var(--xt-color-primary);
492
- --xt-button-outline-color: var(--xt-color-primary-light-5);
493
- --xt-button-active-color: var(--xt-color-primary-dark-2);
494
- --xt-button-hover-text-color: var(--xt-color-white);
495
- --xt-button-hover-link-text-color: var(--xt-color-primary-light-5);
496
- --xt-button-hover-bg-color: var(--xt-color-primary-light-3);
497
- --xt-button-hover-border-color: var(--xt-color-primary-light-3);
498
- --xt-button-active-bg-color: var(--xt-color-primary-dark-2);
499
- --xt-button-active-border-color: var(--xt-color-primary-dark-2);
500
- --xt-button-disabled-text-color: var(--xt-color-white);
501
- --xt-button-disabled-bg-color: var(--xt-color-primary-light-5);
502
- --xt-button-disabled-border-color: var(--xt-color-primary-light-5)
503
- }
504
-
505
- .xt-button--primary.is-plain,.xt-button--primary.is-text,.xt-button--primary.is-link {
389
+ --xt-button-text-color: var(--xt-color-white);
390
+ --xt-button-bg-color: var(--xt-color-primary);
391
+ --xt-button-border-color: var(--xt-color-primary);
392
+ --xt-button-outline-color: var(--xt-color-primary-light-5);
393
+ --xt-button-active-color: var(--xt-color-primary-dark-2);
394
+ --xt-button-hover-text-color: var(--xt-color-white);
395
+ --xt-button-hover-link-text-color: var(--xt-color-primary-light-5);
396
+ --xt-button-hover-bg-color: var(--xt-color-primary-light-3);
397
+ --xt-button-hover-border-color: var(--xt-color-primary-light-3);
398
+ --xt-button-active-bg-color: var(--xt-color-primary-dark-2);
399
+ --xt-button-active-border-color: var(--xt-color-primary-dark-2);
400
+ --xt-button-disabled-text-color: var(--xt-color-white);
401
+ --xt-button-disabled-bg-color: var(--xt-color-primary-light-5);
402
+ --xt-button-disabled-border-color: var(--xt-color-primary-light-5);
403
+
404
+ &.is-plain,
405
+ &.is-text,
406
+ &.is-link {
506
407
  --xt-button-text-color: var(--xt-color-primary);
507
408
  --xt-button-bg-color: var(--xt-color-primary-light-9);
508
409
  --xt-button-border-color: var(--xt-color-primary-light-5);
509
410
  --xt-button-hover-text-color: var(--xt-color-white);
510
411
  --xt-button-hover-bg-color: var(--xt-color-primary);
511
412
  --xt-button-hover-border-color: var(--xt-color-primary);
512
- --xt-button-active-text-color: var(--xt-color-white)
513
- }
413
+ --xt-button-active-text-color: var(--xt-color-white);
514
414
 
515
- .xt-button--primary.is-plain.is-disabled,.xt-button--primary.is-plain.is-disabled:hover,.xt-button--primary.is-plain.is-disabled:focus,.xt-button--primary.is-plain.is-disabled:active,.xt-button--primary.is-text.is-disabled,.xt-button--primary.is-text.is-disabled:hover,.xt-button--primary.is-text.is-disabled:focus,.xt-button--primary.is-text.is-disabled:active,.xt-button--primary.is-link.is-disabled,.xt-button--primary.is-link.is-disabled:hover,.xt-button--primary.is-link.is-disabled:focus,.xt-button--primary.is-link.is-disabled:active {
516
- color: var(--xt-color-primary-light-5);
517
- background-color: var(--xt-color-primary-light-9);
518
- border-color: var(--xt-color-primary-light-8)
519
- }
415
+ &.is-disabled {
416
+ color: var(--xt-color-primary-light-5);
417
+ background-color: var(--xt-color-primary-light-9);
418
+ border-color: var(--xt-color-primary-light-8);
419
+ }
420
+ }
520
421
 
521
- .xt-button--primary.is-dashed {
422
+ &.is-dashed {
522
423
  --xt-button-text-color: var(--xt-color-primary);
523
424
  --xt-button-bg-color: var(--xt-color-primary-light-9);
524
425
  --xt-button-border-color: var(--xt-color-primary-light-5);
@@ -527,49 +428,52 @@
527
428
  --xt-button-hover-border-color: var(--xt-color-primary-light-3);
528
429
  --xt-button-active-text-color: var(--xt-color-primary-dark-2);
529
430
  --xt-button-active-bg-color: var(--xt-color-primary-light-9);
530
- --xt-button-active-border-color: var(--xt-color-primary-dark-2)
531
- }
431
+ --xt-button-active-border-color: var(--xt-color-primary-dark-2);
532
432
 
533
- .xt-button--primary.is-dashed.is-disabled,.xt-button--primary.is-dashed.is-disabled:hover,.xt-button--primary.is-dashed.is-disabled:focus,.xt-button--primary.is-dashed.is-disabled:active {
534
- color: var(--xt-color-primary-light-5);
535
- background-color: var(--xt-color-primary-light-9);
536
- border-color: var(--xt-color-primary-light-8)
433
+ &.is-disabled {
434
+ color: var(--xt-color-primary-light-5);
435
+ background-color: var(--xt-color-primary-light-9);
436
+ border-color: var(--xt-color-primary-light-8);
437
+ }
438
+ }
537
439
  }
538
440
 
441
+ // 成功按钮 - success
539
442
  .xt-button--success {
540
- --xt-button-text-color: var(--xt-color-white);
541
- --xt-button-bg-color: var(--xt-color-success);
542
- --xt-button-border-color: var(--xt-color-success);
543
- --xt-button-outline-color: var(--xt-color-success-light-5);
544
- --xt-button-active-color: var(--xt-color-success-dark-2);
545
- --xt-button-hover-text-color: var(--xt-color-white);
546
- --xt-button-hover-link-text-color: var(--xt-color-success-light-5);
547
- --xt-button-hover-bg-color: var(--xt-color-success-light-3);
548
- --xt-button-hover-border-color: var(--xt-color-success-light-3);
549
- --xt-button-active-bg-color: var(--xt-color-success-dark-2);
550
- --xt-button-active-border-color: var(--xt-color-success-dark-2);
551
- --xt-button-disabled-text-color: var(--xt-color-white);
552
- --xt-button-disabled-bg-color: var(--xt-color-success-light-5);
553
- --xt-button-disabled-border-color: var(--xt-color-success-light-5)
554
- }
555
-
556
- .xt-button--success.is-plain,.xt-button--success.is-text,.xt-button--success.is-link {
443
+ --xt-button-text-color: var(--xt-color-white);
444
+ --xt-button-bg-color: var(--xt-color-success);
445
+ --xt-button-border-color: var(--xt-color-success);
446
+ --xt-button-outline-color: var(--xt-color-success-light-5);
447
+ --xt-button-active-color: var(--xt-color-success-dark-2);
448
+ --xt-button-hover-text-color: var(--xt-color-white);
449
+ --xt-button-hover-link-text-color: var(--xt-color-success-light-5);
450
+ --xt-button-hover-bg-color: var(--xt-color-success-light-3);
451
+ --xt-button-hover-border-color: var(--xt-color-success-light-3);
452
+ --xt-button-active-bg-color: var(--xt-color-success-dark-2);
453
+ --xt-button-active-border-color: var(--xt-color-success-dark-2);
454
+ --xt-button-disabled-text-color: var(--xt-color-white);
455
+ --xt-button-disabled-bg-color: var(--xt-color-success-light-5);
456
+ --xt-button-disabled-border-color: var(--xt-color-success-light-5);
457
+
458
+ &.is-plain,
459
+ &.is-text,
460
+ &.is-link {
557
461
  --xt-button-text-color: var(--xt-color-success);
558
462
  --xt-button-bg-color: var(--xt-color-success-light-9);
559
463
  --xt-button-border-color: var(--xt-color-success-light-5);
560
464
  --xt-button-hover-text-color: var(--xt-color-white);
561
465
  --xt-button-hover-bg-color: var(--xt-color-success);
562
466
  --xt-button-hover-border-color: var(--xt-color-success);
563
- --xt-button-active-text-color: var(--xt-color-white)
564
- }
467
+ --xt-button-active-text-color: var(--xt-color-white);
565
468
 
566
- .xt-button--success.is-plain.is-disabled,.xt-button--success.is-plain.is-disabled:hover,.xt-button--success.is-plain.is-disabled:focus,.xt-button--success.is-plain.is-disabled:active,.xt-button--success.is-text.is-disabled,.xt-button--success.is-text.is-disabled:hover,.xt-button--success.is-text.is-disabled:focus,.xt-button--success.is-text.is-disabled:active,.xt-button--success.is-link.is-disabled,.xt-button--success.is-link.is-disabled:hover,.xt-button--success.is-link.is-disabled:focus,.xt-button--success.is-link.is-disabled:active {
567
- color: var(--xt-color-success-light-5);
568
- background-color: var(--xt-color-success-light-9);
569
- border-color: var(--xt-color-success-light-8)
570
- }
469
+ &.is-disabled {
470
+ color: var(--xt-color-success-light-5);
471
+ background-color: var(--xt-color-success-light-9);
472
+ border-color: var(--xt-color-success-light-8);
473
+ }
474
+ }
571
475
 
572
- .xt-button--success.is-dashed {
476
+ &.is-dashed {
573
477
  --xt-button-text-color: var(--xt-color-success);
574
478
  --xt-button-bg-color: var(--xt-color-success-light-9);
575
479
  --xt-button-border-color: var(--xt-color-success-light-5);
@@ -578,49 +482,52 @@
578
482
  --xt-button-hover-border-color: var(--xt-color-success-light-3);
579
483
  --xt-button-active-text-color: var(--xt-color-success-dark-2);
580
484
  --xt-button-active-bg-color: var(--xt-color-success-light-9);
581
- --xt-button-active-border-color: var(--xt-color-success-dark-2)
582
- }
485
+ --xt-button-active-border-color: var(--xt-color-success-dark-2);
583
486
 
584
- .xt-button--success.is-dashed.is-disabled,.xt-button--success.is-dashed.is-disabled:hover,.xt-button--success.is-dashed.is-disabled:focus,.xt-button--success.is-dashed.is-disabled:active {
585
- color: var(--xt-color-success-light-5);
586
- background-color: var(--xt-color-success-light-9);
587
- border-color: var(--xt-color-success-light-8)
487
+ &.is-disabled {
488
+ color: var(--xt-color-success-light-5);
489
+ background-color: var(--xt-color-success-light-9);
490
+ border-color: var(--xt-color-success-light-8);
491
+ }
492
+ }
588
493
  }
589
494
 
495
+ // 警告按钮 - warning
590
496
  .xt-button--warning {
591
- --xt-button-text-color: var(--xt-color-white);
592
- --xt-button-bg-color: var(--xt-color-warning);
593
- --xt-button-border-color: var(--xt-color-warning);
594
- --xt-button-outline-color: var(--xt-color-warning-light-5);
595
- --xt-button-active-color: var(--xt-color-warning-dark-2);
596
- --xt-button-hover-text-color: var(--xt-color-white);
597
- --xt-button-hover-link-text-color: var(--xt-color-warning-light-5);
598
- --xt-button-hover-bg-color: var(--xt-color-warning-light-3);
599
- --xt-button-hover-border-color: var(--xt-color-warning-light-3);
600
- --xt-button-active-bg-color: var(--xt-color-warning-dark-2);
601
- --xt-button-active-border-color: var(--xt-color-warning-dark-2);
602
- --xt-button-disabled-text-color: var(--xt-color-white);
603
- --xt-button-disabled-bg-color: var(--xt-color-warning-light-5);
604
- --xt-button-disabled-border-color: var(--xt-color-warning-light-5)
605
- }
606
-
607
- .xt-button--warning.is-plain,.xt-button--warning.is-text,.xt-button--warning.is-link {
497
+ --xt-button-text-color: var(--xt-color-white);
498
+ --xt-button-bg-color: var(--xt-color-warning);
499
+ --xt-button-border-color: var(--xt-color-warning);
500
+ --xt-button-outline-color: var(--xt-color-warning-light-5);
501
+ --xt-button-active-color: var(--xt-color-warning-dark-2);
502
+ --xt-button-hover-text-color: var(--xt-color-white);
503
+ --xt-button-hover-link-text-color: var(--xt-color-warning-light-5);
504
+ --xt-button-hover-bg-color: var(--xt-color-warning-light-3);
505
+ --xt-button-hover-border-color: var(--xt-color-warning-light-3);
506
+ --xt-button-active-bg-color: var(--xt-color-warning-dark-2);
507
+ --xt-button-active-border-color: var(--xt-color-warning-dark-2);
508
+ --xt-button-disabled-text-color: var(--xt-color-white);
509
+ --xt-button-disabled-bg-color: var(--xt-color-warning-light-5);
510
+ --xt-button-disabled-border-color: var(--xt-color-warning-light-5);
511
+
512
+ &.is-plain,
513
+ &.is-text,
514
+ &.is-link {
608
515
  --xt-button-text-color: var(--xt-color-warning);
609
516
  --xt-button-bg-color: var(--xt-color-warning-light-9);
610
517
  --xt-button-border-color: var(--xt-color-warning-light-5);
611
518
  --xt-button-hover-text-color: var(--xt-color-white);
612
519
  --xt-button-hover-bg-color: var(--xt-color-warning);
613
520
  --xt-button-hover-border-color: var(--xt-color-warning);
614
- --xt-button-active-text-color: var(--xt-color-white)
615
- }
521
+ --xt-button-active-text-color: var(--xt-color-white);
616
522
 
617
- .xt-button--warning.is-plain.is-disabled,.xt-button--warning.is-plain.is-disabled:hover,.xt-button--warning.is-plain.is-disabled:focus,.xt-button--warning.is-plain.is-disabled:active,.xt-button--warning.is-text.is-disabled,.xt-button--warning.is-text.is-disabled:hover,.xt-button--warning.is-text.is-disabled:focus,.xt-button--warning.is-text.is-disabled:active,.xt-button--warning.is-link.is-disabled,.xt-button--warning.is-link.is-disabled:hover,.xt-button--warning.is-link.is-disabled:focus,.xt-button--warning.is-link.is-disabled:active {
618
- color: var(--xt-color-warning-light-5);
619
- background-color: var(--xt-color-warning-light-9);
620
- border-color: var(--xt-color-warning-light-8)
621
- }
523
+ &.is-disabled {
524
+ color: var(--xt-color-warning-light-5);
525
+ background-color: var(--xt-color-warning-light-9);
526
+ border-color: var(--xt-color-warning-light-8);
527
+ }
528
+ }
622
529
 
623
- .xt-button--warning.is-dashed {
530
+ &.is-dashed {
624
531
  --xt-button-text-color: var(--xt-color-warning);
625
532
  --xt-button-bg-color: var(--xt-color-warning-light-9);
626
533
  --xt-button-border-color: var(--xt-color-warning-light-5);
@@ -629,49 +536,52 @@
629
536
  --xt-button-hover-border-color: var(--xt-color-warning-light-3);
630
537
  --xt-button-active-text-color: var(--xt-color-warning-dark-2);
631
538
  --xt-button-active-bg-color: var(--xt-color-warning-light-9);
632
- --xt-button-active-border-color: var(--xt-color-warning-dark-2)
633
- }
539
+ --xt-button-active-border-color: var(--xt-color-warning-dark-2);
634
540
 
635
- .xt-button--warning.is-dashed.is-disabled,.xt-button--warning.is-dashed.is-disabled:hover,.xt-button--warning.is-dashed.is-disabled:focus,.xt-button--warning.is-dashed.is-disabled:active {
636
- color: var(--xt-color-warning-light-5);
637
- background-color: var(--xt-color-warning-light-9);
638
- border-color: var(--xt-color-warning-light-8)
541
+ &.is-disabled {
542
+ color: var(--xt-color-warning-light-5);
543
+ background-color: var(--xt-color-warning-light-9);
544
+ border-color: var(--xt-color-warning-light-8);
545
+ }
546
+ }
639
547
  }
640
548
 
549
+ // 危险按钮 - danger
641
550
  .xt-button--danger {
642
- --xt-button-text-color: var(--xt-color-white);
643
- --xt-button-bg-color: var(--xt-color-danger);
644
- --xt-button-border-color: var(--xt-color-danger);
645
- --xt-button-outline-color: var(--xt-color-danger-light-5);
646
- --xt-button-active-color: var(--xt-color-danger-dark-2);
647
- --xt-button-hover-text-color: var(--xt-color-white);
648
- --xt-button-hover-link-text-color: var(--xt-color-danger-light-5);
649
- --xt-button-hover-bg-color: var(--xt-color-danger-light-3);
650
- --xt-button-hover-border-color: var(--xt-color-danger-light-3);
651
- --xt-button-active-bg-color: var(--xt-color-danger-dark-2);
652
- --xt-button-active-border-color: var(--xt-color-danger-dark-2);
653
- --xt-button-disabled-text-color: var(--xt-color-white);
654
- --xt-button-disabled-bg-color: var(--xt-color-danger-light-5);
655
- --xt-button-disabled-border-color: var(--xt-color-danger-light-5)
656
- }
657
-
658
- .xt-button--danger.is-plain,.xt-button--danger.is-text,.xt-button--danger.is-link {
551
+ --xt-button-text-color: var(--xt-color-white);
552
+ --xt-button-bg-color: var(--xt-color-danger);
553
+ --xt-button-border-color: var(--xt-color-danger);
554
+ --xt-button-outline-color: var(--xt-color-danger-light-5);
555
+ --xt-button-active-color: var(--xt-color-danger-dark-2);
556
+ --xt-button-hover-text-color: var(--xt-color-white);
557
+ --xt-button-hover-link-text-color: var(--xt-color-danger-light-5);
558
+ --xt-button-hover-bg-color: var(--xt-color-danger-light-3);
559
+ --xt-button-hover-border-color: var(--xt-color-danger-light-3);
560
+ --xt-button-active-bg-color: var(--xt-color-danger-dark-2);
561
+ --xt-button-active-border-color: var(--xt-color-danger-dark-2);
562
+ --xt-button-disabled-text-color: var(--xt-color-white);
563
+ --xt-button-disabled-bg-color: var(--xt-color-danger-light-5);
564
+ --xt-button-disabled-border-color: var(--xt-color-danger-light-5);
565
+
566
+ &.is-plain,
567
+ &.is-text,
568
+ &.is-link {
659
569
  --xt-button-text-color: var(--xt-color-danger);
660
570
  --xt-button-bg-color: var(--xt-color-danger-light-9);
661
571
  --xt-button-border-color: var(--xt-color-danger-light-5);
662
572
  --xt-button-hover-text-color: var(--xt-color-white);
663
573
  --xt-button-hover-bg-color: var(--xt-color-danger);
664
574
  --xt-button-hover-border-color: var(--xt-color-danger);
665
- --xt-button-active-text-color: var(--xt-color-white)
666
- }
575
+ --xt-button-active-text-color: var(--xt-color-white);
667
576
 
668
- .xt-button--danger.is-plain.is-disabled,.xt-button--danger.is-plain.is-disabled:hover,.xt-button--danger.is-plain.is-disabled:focus,.xt-button--danger.is-plain.is-disabled:active,.xt-button--danger.is-text.is-disabled,.xt-button--danger.is-text.is-disabled:hover,.xt-button--danger.is-text.is-disabled:focus,.xt-button--danger.is-text.is-disabled:active,.xt-button--danger.is-link.is-disabled,.xt-button--danger.is-link.is-disabled:hover,.xt-button--danger.is-link.is-disabled:focus,.xt-button--danger.is-link.is-disabled:active {
669
- color: var(--xt-color-danger-light-5);
670
- background-color: var(--xt-color-danger-light-9);
671
- border-color: var(--xt-color-danger-light-8)
672
- }
577
+ &.is-disabled {
578
+ color: var(--xt-color-danger-light-5);
579
+ background-color: var(--xt-color-danger-light-9);
580
+ border-color: var(--xt-color-danger-light-8);
581
+ }
582
+ }
673
583
 
674
- .xt-button--danger.is-dashed {
584
+ &.is-dashed {
675
585
  --xt-button-text-color: var(--xt-color-danger);
676
586
  --xt-button-bg-color: var(--xt-color-danger-light-9);
677
587
  --xt-button-border-color: var(--xt-color-danger-light-5);
@@ -680,49 +590,52 @@
680
590
  --xt-button-hover-border-color: var(--xt-color-danger-light-3);
681
591
  --xt-button-active-text-color: var(--xt-color-danger-dark-2);
682
592
  --xt-button-active-bg-color: var(--xt-color-danger-light-9);
683
- --xt-button-active-border-color: var(--xt-color-danger-dark-2)
684
- }
593
+ --xt-button-active-border-color: var(--xt-color-danger-dark-2);
685
594
 
686
- .xt-button--danger.is-dashed.is-disabled,.xt-button--danger.is-dashed.is-disabled:hover,.xt-button--danger.is-dashed.is-disabled:focus,.xt-button--danger.is-dashed.is-disabled:active {
687
- color: var(--xt-color-danger-light-5);
688
- background-color: var(--xt-color-danger-light-9);
689
- border-color: var(--xt-color-danger-light-8)
595
+ &.is-disabled {
596
+ color: var(--xt-color-danger-light-5);
597
+ background-color: var(--xt-color-danger-light-9);
598
+ border-color: var(--xt-color-danger-light-8);
599
+ }
600
+ }
690
601
  }
691
602
 
603
+ // 信息按钮 - info
692
604
  .xt-button--info {
693
- --xt-button-text-color: var(--xt-color-white);
694
- --xt-button-bg-color: var(--xt-color-info);
695
- --xt-button-border-color: var(--xt-color-info);
696
- --xt-button-outline-color: var(--xt-color-info-light-5);
697
- --xt-button-active-color: var(--xt-color-info-dark-2);
698
- --xt-button-hover-text-color: var(--xt-color-white);
699
- --xt-button-hover-link-text-color: var(--xt-color-info-light-5);
700
- --xt-button-hover-bg-color: var(--xt-color-info-light-3);
701
- --xt-button-hover-border-color: var(--xt-color-info-light-3);
702
- --xt-button-active-bg-color: var(--xt-color-info-dark-2);
703
- --xt-button-active-border-color: var(--xt-color-info-dark-2);
704
- --xt-button-disabled-text-color: var(--xt-color-white);
705
- --xt-button-disabled-bg-color: var(--xt-color-info-light-5);
706
- --xt-button-disabled-border-color: var(--xt-color-info-light-5)
707
- }
708
-
709
- .xt-button--info.is-plain,.xt-button--info.is-text,.xt-button--info.is-link {
605
+ --xt-button-text-color: var(--xt-color-white);
606
+ --xt-button-bg-color: var(--xt-color-info);
607
+ --xt-button-border-color: var(--xt-color-info);
608
+ --xt-button-outline-color: var(--xt-color-info-light-5);
609
+ --xt-button-active-color: var(--xt-color-info-dark-2);
610
+ --xt-button-hover-text-color: var(--xt-color-white);
611
+ --xt-button-hover-link-text-color: var(--xt-color-info-light-5);
612
+ --xt-button-hover-bg-color: var(--xt-color-info-light-3);
613
+ --xt-button-hover-border-color: var(--xt-color-info-light-3);
614
+ --xt-button-active-bg-color: var(--xt-color-info-dark-2);
615
+ --xt-button-active-border-color: var(--xt-color-info-dark-2);
616
+ --xt-button-disabled-text-color: var(--xt-color-white);
617
+ --xt-button-disabled-bg-color: var(--xt-color-info-light-5);
618
+ --xt-button-disabled-border-color: var(--xt-color-info-light-5);
619
+
620
+ &.is-plain,
621
+ &.is-text,
622
+ &.is-link {
710
623
  --xt-button-text-color: var(--xt-color-info);
711
624
  --xt-button-bg-color: var(--xt-color-info-light-9);
712
625
  --xt-button-border-color: var(--xt-color-info-light-5);
713
626
  --xt-button-hover-text-color: var(--xt-color-white);
714
627
  --xt-button-hover-bg-color: var(--xt-color-info);
715
628
  --xt-button-hover-border-color: var(--xt-color-info);
716
- --xt-button-active-text-color: var(--xt-color-white)
717
- }
629
+ --xt-button-active-text-color: var(--xt-color-white);
718
630
 
719
- .xt-button--info.is-plain.is-disabled,.xt-button--info.is-plain.is-disabled:hover,.xt-button--info.is-plain.is-disabled:focus,.xt-button--info.is-plain.is-disabled:active,.xt-button--info.is-text.is-disabled,.xt-button--info.is-text.is-disabled:hover,.xt-button--info.is-text.is-disabled:focus,.xt-button--info.is-text.is-disabled:active,.xt-button--info.is-link.is-disabled,.xt-button--info.is-link.is-disabled:hover,.xt-button--info.is-link.is-disabled:focus,.xt-button--info.is-link.is-disabled:active {
720
- color: var(--xt-color-info-light-5);
721
- background-color: var(--xt-color-info-light-9);
722
- border-color: var(--xt-color-info-light-8)
723
- }
631
+ &.is-disabled {
632
+ color: var(--xt-color-info-light-5);
633
+ background-color: var(--xt-color-info-light-9);
634
+ border-color: var(--xt-color-info-light-8);
635
+ }
636
+ }
724
637
 
725
- .xt-button--info.is-dashed {
638
+ &.is-dashed {
726
639
  --xt-button-text-color: var(--xt-color-info);
727
640
  --xt-button-bg-color: var(--xt-color-info-light-9);
728
641
  --xt-button-border-color: var(--xt-color-info-light-5);
@@ -731,59 +644,56 @@
731
644
  --xt-button-hover-border-color: var(--xt-color-info-light-3);
732
645
  --xt-button-active-text-color: var(--xt-color-info-dark-2);
733
646
  --xt-button-active-bg-color: var(--xt-color-info-light-9);
734
- --xt-button-active-border-color: var(--xt-color-info-dark-2)
735
- }
647
+ --xt-button-active-border-color: var(--xt-color-info-dark-2);
736
648
 
737
- .xt-button--info.is-dashed.is-disabled,.xt-button--info.is-dashed.is-disabled:hover,.xt-button--info.is-dashed.is-disabled:focus,.xt-button--info.is-dashed.is-disabled:active {
738
- color: var(--xt-color-info-light-5);
739
- background-color: var(--xt-color-info-light-9);
740
- border-color: var(--xt-color-info-light-8)
649
+ &.is-disabled {
650
+ color: var(--xt-color-info-light-5);
651
+ background-color: var(--xt-color-info-light-9);
652
+ border-color: var(--xt-color-info-light-8);
653
+ }
654
+ }
741
655
  }
742
656
 
657
+ // 大号按钮
743
658
  .xt-button--large {
744
- --xt-button-size: 40px;
745
- height: var(--xt-button-size)
746
- }
659
+ --xt-button-size: 40px;
660
+ min-height: var(--xt-button-size);
661
+ padding: 12px 19px;
662
+ font-size: var(--xt-font-size-base);
663
+ border-radius: var(--xt-border-radius-base);
747
664
 
748
- .xt-button--large [class*=el-icon]+span {
749
- margin-left: 8px
750
- }
665
+ [class*="el-icon"] + span {
666
+ margin-left: 8px;
667
+ }
751
668
 
752
- .xt-button--large {
669
+ &.is-round {
753
670
  padding: 12px 19px;
754
- font-size: var(--xt-font-size-base);
755
- border-radius: var(--xt-border-radius-base)
756
- }
757
-
758
- .xt-button--large.is-round {
759
- padding: 12px 19px
760
- }
761
-
762
- .xt-button--large.is-circle {
671
+ }
672
+ &.is-circle {
763
673
  width: var(--xt-button-size);
764
- padding: 12px
674
+ min-height: var(--xt-button-size);
675
+ padding: 12px;
676
+ }
765
677
  }
766
678
 
679
+ // 小号按钮
767
680
  .xt-button--small {
768
- --xt-button-size: 24px;
769
- height: var(--xt-button-size)
770
- }
681
+ --xt-button-size: 24px;
682
+ min-height: var(--xt-button-size);
683
+ padding: 5px 11px;
684
+ font-size: 12px;
685
+ border-radius: calc(var(--xt-border-radius-base) - 1px);
771
686
 
772
- .xt-button--small [class*=el-icon]+span {
773
- margin-left: 4px
774
- }
687
+ [class*="el-icon"] + span {
688
+ margin-left: 4px;
689
+ }
775
690
 
776
- .xt-button--small {
691
+ &.is-round {
777
692
  padding: 5px 11px;
778
- font-size: 12px;
779
- border-radius: calc(var(--xt-border-radius-base) - 1px)
780
- }
781
-
782
- .xt-button--small.is-round {
783
- padding: 5px 11px
784
- }
785
-
786
- .xt-button--small.is-circle {
693
+ }
694
+ &.is-circle {
787
695
  width: var(--xt-button-size);
788
- padding: 5px
789
- }
696
+ min-height: var(--xt-button-size);
697
+ padding: 5px;
698
+ }
699
+ }