@whitesev/pops 2.1.5 → 2.1.7

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 (41) hide show
  1. package/dist/index.amd.js +101 -49
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +101 -49
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +101 -49
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +101 -49
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +101 -49
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +101 -49
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +13 -0
  14. package/dist/types/src/types/button.d.ts +8 -39
  15. package/package.json +3 -2
  16. package/src/Pops.ts +14 -1
  17. package/src/components/alert/index.css +0 -47
  18. package/src/components/alert/index.ts +2 -2
  19. package/src/components/confirm/index.css +0 -47
  20. package/src/components/confirm/index.ts +4 -4
  21. package/src/components/drawer/index.css +0 -17
  22. package/src/components/drawer/index.ts +2 -3
  23. package/src/components/folder/config.ts +23 -9
  24. package/src/components/folder/index.css +67 -62
  25. package/src/components/folder/index.ts +4 -4
  26. package/src/components/iframe/index.css +3 -33
  27. package/src/components/iframe/index.ts +5 -5
  28. package/src/components/loading/index.css +17 -12
  29. package/src/components/loading/index.ts +5 -5
  30. package/src/components/panel/handlerComponents.ts +12 -1
  31. package/src/components/panel/index.css +136 -63
  32. package/src/components/panel/index.ts +2 -2
  33. package/src/components/prompt/index.css +23 -51
  34. package/src/components/prompt/index.ts +6 -6
  35. package/src/components/rightClickMenu/index.css +14 -3
  36. package/src/components/searchSuggestion/index.ts +20 -5
  37. package/src/components/tooltip/index.css +39 -19
  38. package/src/css/button.css +354 -98
  39. package/src/css/index.css +88 -16
  40. package/src/handler/PopsElementHandler.ts +2 -2
  41. package/src/types/button.d.ts +8 -39
package/src/components/tooltip/index.css CHANGED
@@ -1,25 +1,32 @@
1
1
  .pops-tip {
2
+ --pops-bg-opacity: 1;
2
3
  --tooltip-color: #4e4e4e;
3
4
  --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
4
5
  --tooltip-bd-radius: 2px;
6
+ --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);
7
+ --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);
5
8
  --tooltip-font-size: 14px;
6
9
  --tooltip-padding-top: 13px;
7
10
  --tooltip-padding-right: 13px;
8
11
  --tooltip-padding-bottom: 13px;
9
12
  --tooltip-padding-left: 13px;
10
13
 
14
+ --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
15
+ --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
11
16
  --tooltip-arrow--after-color: rgb(78, 78, 78);
12
17
  --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
13
18
  --tooltip-arrow--after-width: 12px;
14
19
  --tooltip-arrow--after-height: 12px;
15
-
20
+ }
21
+ .pops-tip {
16
22
  padding: var(--tooltip-padding-top) var(--tooltip-padding-right)
17
23
  var(--tooltip-padding-bottom) var(--tooltip-padding-left);
18
24
  max-width: 400px;
19
25
  max-height: 300px;
20
26
  border-radius: var(--tooltip-bd-radius);
21
27
  background-color: var(--tooltip-bg-color);
22
- box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
28
+ box-shadow: 0 1.5px 4px var(--tooltip-box-shadow-left-color),
29
+ 0 1.5px 6px var(--tooltip-box-shadow-right-color);
23
30
  color: var(--tooltip-color);
24
31
  font-size: var(--tooltip-font-size);
25
32
  }
@@ -29,22 +36,7 @@
29
36
  .pops-tip[data-position="fixed"] {
30
37
  position: fixed;
31
38
  }
32
- /* github的样式 */
33
- .pops-tip.github-tooltip {
34
- --tooltip-bg-opacity: 1;
35
- --tooltip-color: rgb(255, 255, 255);
36
- --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
37
- --tooltip-bd-radius: 6px;
38
- --tooltip-padding-top: 6px;
39
- --tooltip-padding-right: 8px;
40
- --tooltip-padding-bottom: 6px;
41
- --tooltip-padding-left: 8px;
42
39
 
43
- --tooltip-arrow--after-color: rgb(255, 255, 255);
44
- --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
45
- --tooltip-arrow--after-width: 8px;
46
- --tooltip-arrow--after-height: 8px;
47
- }
48
40
  .pops-tip .pops-tip-arrow {
49
41
  position: absolute;
50
42
  top: 100%;
@@ -63,7 +55,8 @@
63
55
  height: var(--tooltip-arrow--after-height);
64
56
  background: var(--tooltip-arrow--after-bg-color);
65
57
  color: var(--tooltip-arrow--after-color);
66
- box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
58
+ box-shadow: 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
59
+ 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
67
60
  content: "";
68
61
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
69
62
  }
@@ -85,7 +78,8 @@
85
78
  width: var(--tooltip-arrow--after-width);
86
79
  height: var(--tooltip-arrow--after-height);
87
80
  background: var(--tooltip-arrow--after-bg-color);
88
- box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);
81
+ box-shadow: 0 1px 7px var(--tooltip-arrow-box-shadow-left-color),
82
+ 0 1px 7px var(--tooltip-arrow-box-shadow-right-color);
89
83
  content: "";
90
84
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
91
85
  }
@@ -174,3 +168,29 @@
174
168
  -webkit-animation-name: pops-motion-fadeInRight;
175
169
  animation-name: pops-motion-fadeInRight;
176
170
  }
171
+
172
+ /* github的样式 */
173
+ .pops-tip.github-tooltip {
174
+ --tooltip-bg-opacity: 1;
175
+ --tooltip-color: #ffffff;
176
+ --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
177
+ --tooltip-bd-radius: 6px;
178
+ --tooltip-padding-top: 6px;
179
+ --tooltip-padding-right: 8px;
180
+ --tooltip-padding-bottom: 6px;
181
+ --tooltip-padding-left: 8px;
182
+
183
+ --tooltip-arrow--after-color: rgb(255, 255, 255);
184
+ --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));
185
+ --tooltip-arrow--after-width: 8px;
186
+ --tooltip-arrow--after-height: 8px;
187
+ }
188
+
189
+ @media (prefers-color-scheme: dark) {
190
+ .pops-tip {
191
+ --tooltip-color: #ffffff;
192
+ --tooltip-bg-color: #fafafa;
193
+ --tooltip-arrow--after-color: #fafafa;
194
+ --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));
195
+ }
196
+ }
package/src/css/button.css CHANGED
@@ -16,6 +16,262 @@
16
16
 
17
17
  --container-title-height: 55px;
18
18
  --container-bottom-btn-height: 55px;
19
+
20
+ /* default按钮 */
21
+ --button-default-color: #333333;
22
+ --button-default-bd-color: #dcdfe6;
23
+ --button-default-bg-color: #ffffff;
24
+ --button-default-active-color: #409eff;
25
+ --button-default-active-bd-color: #409eff;
26
+ --button-default-active-bg-color: #ecf5ff;
27
+ --button-default-hover-color: #409eff;
28
+ --button-default-hover-bd-color: #c6e2ff;
29
+ --button-default-hover-bg-color: #ecf5ff;
30
+ --button-default-focus-visible-outline-color: #a0cfff;
31
+ --button-default-focus-visible-outline: 2px solid
32
+ var(--button-default-focus-visible-outline-color);
33
+ --button-default-focus-visible-outline-offset: 1px;
34
+ --button-default-disabled-color: #a8abb2;
35
+ --button-default-disabled-bd-color: #ffffff;
36
+ --button-default-disabled-bg-color: #e4e7ed;
37
+
38
+ /* primary按钮 */
39
+ --button-primary-color: #ffffff;
40
+ --button-primary-bd-color: #409eff;
41
+ --button-primary-bg-color: #409eff;
42
+ --button-primary-active-color: #ffffff;
43
+ --button-primary-active-bd-color: #337ecc;
44
+ --button-primary-active-bg-color: #337ecc;
45
+ --button-primary-hover-color: #ffffff;
46
+ --button-primary-hover-bd-color: #79bbff;
47
+ --button-primary-hover-bg-color: #79bbff;
48
+ --button-primary-focus-visible-outline-color: #a0cfff;
49
+ --button-primary-focus-visible-outline: 2px solid
50
+ var(--button-primary-focus-visible-outline-color);
51
+ --button-primary-focus-visible-outline-offset: 1px;
52
+ --button-primary-disabled-color: #ffffff80;
53
+ --button-primary-disabled-bd-color: #a0cfff;
54
+ --button-primary-disabled-bg-color: #a0cfff;
55
+
56
+ /* success按钮 */
57
+ --button-success-color: #ffffff;
58
+ --button-success-bd-color: #4cae4c;
59
+ --button-success-bg-color: #5cb85c;
60
+ --button-success-active-color: #ffffff;
61
+ --button-success-active-bd-color: #529b2e;
62
+ --button-success-active-bg-color: #529b2e;
63
+ --button-success-hover-color: #ffffff;
64
+ --button-success-hover-bd-color: #95d475;
65
+ --button-success-hover-bg-color: #95d475;
66
+ --button-success-focus-visible-outline-color: #b3e19d;
67
+ --button-success-focus-visible-outline: 2px solid
68
+ var(--button-success-focus-visible-outline-color);
69
+ --button-success-focus-visible-outline-offset: 1px;
70
+ --button-success-disabled-color: #ffffff80;
71
+ --button-success-disabled-bd-color: #b3e19d;
72
+ --button-success-disabled-bg-color: #b3e19d;
73
+
74
+ /* info按钮 */
75
+ --button-info-color: #ffffff;
76
+ --button-info-bd-color: #909399;
77
+ --button-info-bg-color: #909399;
78
+ --button-info-active-color: #ffffff;
79
+ --button-info-active-bd-color: #73767a;
80
+ --button-info-active-bg-color: #73767a;
81
+ --button-info-hover-color: #ffffff;
82
+ --button-info-hover-bd-color: #b1b3b8;
83
+ --button-info-hover-bg-color: #b1b3b8;
84
+ --button-info-focus-visible-outline-color: #c8c9cc;
85
+ --button-info-focus-visible-outline: 2px solid
86
+ var(--button-info-focus-visible-outline-color);
87
+ --button-info-focus-visible-outline-offset: 1px;
88
+ --button-info-disabled-color: #ffffff80;
89
+ --button-info-disabled-bd-color: #c8c9cc;
90
+ --button-info-disabled-bg-color: #c8c9cc;
91
+
92
+ /* warning按钮 */
93
+ --button-warning-color: #ffffff;
94
+ --button-warning-bd-color: #e6a23c;
95
+ --button-warning-bg-color: #e6a23c;
96
+ --button-warning-active-color: #ffffff;
97
+ --button-warning-active-bd-color: #b88230;
98
+ --button-warning-active-bg-color: #b88230;
99
+ --button-warning-hover-color: #ffffff80;
100
+ --button-warning-hover-bd-color: #eebe77;
101
+ --button-warning-hover-bg-color: #eebe77;
102
+ --button-warning-focus-visible-outline-color: #f3d19e;
103
+ --button-warning-focus-visible-outline: 2px solid
104
+ var(--button-warning-focus-visible-outline-color);
105
+ --button-warning-focus-visible-outline-offset: 1px;
106
+ --button-warning-disabled-color: #ffffff80;
107
+ --button-warning-disabled-bd-color: #f3d19e;
108
+ --button-warning-disabled-bg-color: #f3d19e;
109
+
110
+ /* danger按钮 */
111
+ --button-danger-color: #ffffff;
112
+ --button-danger-bd-color: #f56c6c;
113
+ --button-danger-bg-color: #f56c6c;
114
+ --button-danger-active-color: #ffffff;
115
+ --button-danger-active-bd-color: #c45656;
116
+ --button-danger-active-bg-color: #c45656;
117
+ --button-danger-hover-color: #ffffff;
118
+ --button-danger-hover-bd-color: #f89898;
119
+ --button-danger-hover-bg-color: #f89898;
120
+ --button-danger-focus-visible-outline-color: #fab6b6;
121
+ --button-danger-focus-visible-outline: 2px solid
122
+ var(--button-danger-focus-visible-outline-color);
123
+ --button-danger-focus-visible-outline-offset: 1px;
124
+ --button-danger-disabled-color: #ffffff80;
125
+ --button-danger-disabled-bd-color: #fab6b6;
126
+ --button-danger-disabled-bg-color: #fab6b6;
127
+
128
+ /* xiaomi-primary按钮 */
129
+ --button-xiaomi-primary-color: #ffffff;
130
+ --button-xiaomi-primary-bd-color: #ff5c00;
131
+ --button-xiaomi-primary-bg-color: #ff5c00;
132
+ --button-xiaomi-primary-active-color: #ffffff;
133
+ --button-xiaomi-primary-active-bd-color: #da4f00;
134
+ --button-xiaomi-primary-active-bg-color: #da4f00;
135
+ --button-xiaomi-primary-hover-color: #ffffff;
136
+ --button-xiaomi-primary-hover-bd-color: #ff7e29;
137
+ --button-xiaomi-primary-hover-bg-color: #ff7e29;
138
+ --button-xiaomi-primary-focus-visible-outline-color: #ffa061;
139
+ --button-xiaomi-primary-focus-visible-outline: 2px solid
140
+ var(--button-xiaomi-primary-focus-visible-outline-color);
141
+ --button-xiaomi-primary-focus-visible-outline-offset: 1px;
142
+ --button-xiaomi-primary-disabled-color: #ffffff80;
143
+ --button-xiaomi-primary-disabled-bd-color: #fad5b6;
144
+ --button-xiaomi-primary-disabled-bg-color: #fad5b6;
145
+
146
+ /* violet按钮 */
147
+ --button-violet-color: #ffffff;
148
+ --button-violet-bd-color: #626aef;
149
+ --button-violet-bg-color: #626aef;
150
+ --button-violet-active-color: #ffffff;
151
+ --button-violet-active-bd-color: #8188f2;
152
+ --button-violet-active-bg-color: #8188f2;
153
+ --button-violet-hover-color: #ffffff;
154
+ --button-violet-hover-bd-color: #4b50ad;
155
+ --button-violet-hover-bg-color: #4b50ad;
156
+ --button-violet-focus-visible-outline-color: #2a598a;
157
+ --button-violet-focus-visible-outline: 2px solid
158
+ var(--button-violet-focus-visible-outline-color);
159
+ --button-violet-focus-visible-outline-offset: 1px;
160
+ --button-violet-disabled-color: #ffffff80;
161
+ --button-violet-disabled-bd-color: #3b3f82;
162
+ --button-violet-disabled-bg-color: #3b3f82;
163
+ }
164
+
165
+ @media (prefers-color-scheme: dark) {
166
+ .pops {
167
+ /* default按钮 */
168
+ --button-default-color: #cfd3dc;
169
+ --button-default-bd-color: #4c4d4f;
170
+ --button-default-bg-color: transparent;
171
+ --button-default-active-color: #409eff;
172
+ --button-default-active-bd-color: #409eff;
173
+ --button-default-active-bg-color: #18222c;
174
+ --button-default-hover-color: #409eff;
175
+ --button-default-hover-bd-color: #213d5b;
176
+ --button-default-hover-bg-color: #18222c;
177
+ --button-default-focus-visible-outline-color: #2a598a;
178
+ --button-default-focus-visible-outline: 2px solid
179
+ var(--button-default-focus-visible-outline-color);
180
+ --button-default-focus-visible-outline-offset: 1px;
181
+ --button-default-disabled-color: #ffffff80;
182
+ --button-default-disabled-bd-color: #414243;
183
+ --button-default-disabled-bg-color: transparent;
184
+
185
+ /* primary按钮 */
186
+ --button-primary-color: #ffffff;
187
+ --button-primary-bd-color: #409eff;
188
+ --button-primary-bg-color: #409eff;
189
+ --button-primary-active-color: #ffffff;
190
+ --button-primary-active-bd-color: #66b1ff;
191
+ --button-primary-active-bg-color: #66b1ff;
192
+ --button-primary-hover-color: #ffffff;
193
+ --button-primary-hover-bd-color: #3375b9;
194
+ --button-primary-hover-bg-color: #3375b9;
195
+ --button-primary-focus-visible-outline-color: #2a598a;
196
+ --button-primary-focus-visible-outline: 2px solid
197
+ var(--button-primary-focus-visible-outline-color);
198
+ --button-primary-focus-visible-outline-offset: 1px;
199
+ --button-primary-disabled-color: #ffffff80;
200
+ --button-primary-disabled-bd-color: #2a598a;
201
+ --button-primary-disabled-bg-color: #2a598a;
202
+
203
+ /* success按钮 */
204
+ --button-success-color: #ffffff;
205
+ --button-success-bd-color: #67c23a;
206
+ --button-success-bg-color: #67c23a;
207
+ --button-success-active-color: #ffffff;
208
+ --button-success-active-bd-color: #85ce61;
209
+ --button-success-active-bg-color: #85ce61;
210
+ --button-success-hover-color: #ffffff;
211
+ --button-success-hover-bd-color: #4e8e2f;
212
+ --button-success-hover-bg-color: #4e8e2f;
213
+ --button-success-focus-visible-outline-color: #3e6b27;
214
+ --button-success-focus-visible-outline: 2px solid
215
+ var(--button-success-focus-visible-outline-color);
216
+ --button-success-focus-visible-outline-offset: 1px;
217
+ --button-success-disabled-color: #ffffff80;
218
+ --button-success-disabled-bd-color: #3e6b27;
219
+ --button-success-disabled-bg-color: #3e6b27;
220
+
221
+ /* info按钮 */
222
+ --button-info-color: #ffffff;
223
+ --button-info-bd-color: #909399;
224
+ --button-info-bg-color: #909399;
225
+ --button-info-active-color: #ffffff;
226
+ --button-info-active-bd-color: #a6a9ad;
227
+ --button-info-active-bg-color: #a6a9ad;
228
+ --button-info-hover-color: #ffffff;
229
+ --button-info-hover-bd-color: #6b6d71;
230
+ --button-info-hover-bg-color: #6b6d71;
231
+ --button-info-focus-visible-outline-color: #525457;
232
+ --button-info-focus-visible-outline: 2px solid
233
+ var(--button-info-focus-visible-outline-color);
234
+ --button-info-focus-visible-outline-offset: 1px;
235
+ --button-info-disabled-color: #ffffff80;
236
+ --button-info-disabled-bd-color: #525457;
237
+ --button-info-disabled-bg-color: #525457;
238
+
239
+ /* warning按钮 */
240
+ --button-warning-color: #ffffff;
241
+ --button-warning-bd-color: #e6a23c;
242
+ --button-warning-bg-color: #e6a23c;
243
+ --button-warning-active-color: #ffffff;
244
+ --button-warning-active-bd-color: #ebb563;
245
+ --button-warning-active-bg-color: #ebb563;
246
+ --button-warning-hover-color: #ffffff80;
247
+ --button-warning-hover-bd-color: #a77730;
248
+ --button-warning-hover-bg-color: #a77730;
249
+ --button-warning-focus-visible-outline-color: #7d5b28;
250
+ --button-warning-focus-visible-outline: 2px solid
251
+ var(--button-warning-focus-visible-outline-color);
252
+ --button-warning-focus-visible-outline-offset: 1px;
253
+ --button-warning-disabled-color: #ffffff80;
254
+ --button-warning-disabled-bd-color: #7d5b28;
255
+ --button-warning-disabled-bg-color: #7d5b28;
256
+
257
+ /* danger按钮 */
258
+ --button-danger-color: #ffffff;
259
+ --button-danger-bd-color: #f56c6c;
260
+ --button-danger-bg-color: #f56c6c;
261
+ --button-danger-active-color: #ffffff;
262
+ --button-danger-active-bd-color: #f78989;
263
+ --button-danger-active-bg-color: #f78989;
264
+ --button-danger-hover-color: #ffffff;
265
+ --button-danger-hover-bd-color: #b25252;
266
+ --button-danger-hover-bg-color: #b25252;
267
+ --button-danger-focus-visible-outline-color: #854040;
268
+ --button-danger-focus-visible-outline: 2px solid
269
+ var(--button-danger-focus-visible-outline-color);
270
+ --button-danger-focus-visible-outline-offset: 1px;
271
+ --button-danger-disabled-color: #ffffff80;
272
+ --button-danger-disabled-bd-color: #854040;
273
+ --button-danger-disabled-bg-color: #854040;
274
+ }
19
275
  }
20
276
  .pops[data-bottom-btn="false"] {
21
277
  --container-bottom-btn-height: 0px;
@@ -115,176 +371,176 @@
115
371
  }
116
372
 
117
373
  .pops button[type="default"] {
118
- --button-color: #333333;
119
- --button-bd-color: #dcdfe6;
120
- --button-bg-color: #ffffff;
374
+ --button-color: var(--button-default-color);
375
+ --button-bd-color: var(--button-default-bd-color);
376
+ --button-bg-color: var(--button-default-bg-color);
121
377
  }
122
378
  .pops button[type="default"]:active {
123
- --button-color: #409eff;
124
- --button-bd-color: #409eff;
125
- --button-bg-color: #ecf5ff;
379
+ --button-color: var(--button-default-active-color);
380
+ --button-bd-color: var(--button-default-active-bd-color);
381
+ --button-bg-color: var(--button-default-active-bg-color);
126
382
  }
127
383
  .pops button[type="default"]:hover {
128
- --button-color: #409eff;
129
- --button-bd-color: #c6e2ff;
130
- --button-bg-color: #ecf5ff;
384
+ --button-color: var(--button-default-hover-color);
385
+ --button-bd-color: var(--button-default-hover-bd-color);
386
+ --button-bg-color: var(--button-default-hover-bg-color);
131
387
  }
132
388
  .pops button[type="default"]:focus-visible {
133
- outline: 2px solid #a0cfff;
134
- outline-offset: 1px;
389
+ outline: var(--button-default-focus-visible-outline);
390
+ outline-offset: var(--button-default-focus-visible-outline-offset);
135
391
  }
136
392
  .pops button[type="default"]:disabled {
137
- --button-color: #a8abb2;
138
- --button-bd-color: #fff;
139
- --button-bg-color: #e4e7ed;
393
+ --button-color: var(--button-default-disabled-color);
394
+ --button-bd-color: var(--button-default-disabled-bd-color);
395
+ --button-bg-color: var(--button-default-disabled-bg-color);
140
396
  }
141
397
 
142
398
  .pops button[type="primary"] {
143
- --button-color: #ffffff;
144
- --button-bd-color: #409eff;
145
- --button-bg-color: #409eff;
399
+ --button-color: var(--button-primary-color);
400
+ --button-bd-color: var(--button-primary-bd-color);
401
+ --button-bg-color: var(--button-primary-bg-color);
146
402
  }
147
403
  .pops button[type="primary"]:active {
148
- --button-color: #ffffff;
149
- --button-bd-color: #337ecc;
150
- --button-bg-color: #337ecc;
404
+ --button-color: var(--button-primary-active-color);
405
+ --button-bd-color: var(--button-primary-active-bd-color);
406
+ --button-bg-color: var(--button-primary-active-bg-color);
151
407
  }
152
408
  .pops button[type="primary"]:hover {
153
- --button-color: #ffffff;
154
- --button-bd-color: #79bbff;
155
- --button-bg-color: #79bbff;
409
+ --button-color: var(--button-primary-hover-color);
410
+ --button-bd-color: var(--button-primary-hover-bd-color);
411
+ --button-bg-color: var(--button-primary-hover-bg-color);
156
412
  }
157
413
  .pops button[type="primary"]:focus-visible {
158
- outline: 2px solid #a0cfff;
159
- outline-offset: 1px;
414
+ outline: var(--button-primary-focus-visible-outline);
415
+ outline-offset: var(--button-primary-focus-visible-outline-offset);
160
416
  }
161
417
  .pops button[type="primary"]:disabled {
162
- --button-color: #ffffff;
163
- --button-bd-color: #a0cfff;
164
- --button-bg-color: #a0cfff;
418
+ --button-color: var(--button-primary-disabled-color);
419
+ --button-bd-color: var(--button-primary-disabled-bd-color);
420
+ --button-bg-color: var(--button-primary-disabled-bg-color);
165
421
  }
166
422
 
167
423
  .pops button[type="success"] {
168
- --button-color: #ffffff;
169
- --button-bd-color: #4cae4c;
170
- --button-bg-color: #5cb85c;
424
+ --button-color: var(--button-success-color);
425
+ --button-bd-color: var(--button-success-bd-color);
426
+ --button-bg-color: var(--button-success-bg-color);
171
427
  }
172
428
  .pops button[type="success"]:active {
173
- --button-color: #ffffff;
174
- --button-bd-color: #529b2e;
175
- --button-bg-color: #529b2e;
429
+ --button-color: var(--button-success-active-color);
430
+ --button-bd-color: var(--button-success-active-bd-color);
431
+ --button-bg-color: var(--button-success-active-bg-color);
176
432
  }
177
433
  .pops button[type="success"]:hover {
178
- --button-color: #ffffff;
179
- --button-bd-color: #95d475;
180
- --button-bg-color: #95d475;
434
+ --button-color: var(--button-success-hover-color);
435
+ --button-bd-color: var(--button-success-hover-bd-color);
436
+ --button-bg-color: var(--button-success-hover-bg-color);
181
437
  }
182
438
  .pops button[type="success"]:focus-visible {
183
- outline: 2px solid #b3e19d;
184
- outline-offset: 1px;
439
+ outline: var(--button-success-focus-visible-outline);
440
+ outline-offset: var(--button-success-focus-visible-outline-offset);
185
441
  }
186
442
  .pops button[type="success"]:disabled {
187
- --button-color: #ffffff;
188
- --button-bd-color: #b3e19d;
189
- --button-bg-color: #b3e19d;
443
+ --button-color: var(--button-success-disabled-color);
444
+ --button-bd-color: var(--button-success-disabled-bd-color);
445
+ --button-bg-color: var(--button-success-disabled-bg-color);
190
446
  }
191
447
 
192
448
  .pops button[type="info"] {
193
- --button-color: #ffffff;
194
- --button-bd-color: #909399;
195
- --button-bg-color: #909399;
449
+ --button-color: var(--button-info-color);
450
+ --button-bd-color: var(--button-info-bd-color);
451
+ --button-bg-color: var(--button-info-bg-color);
196
452
  }
197
453
  .pops button[type="info"]:active {
198
- --button-color: #ffffff;
199
- --button-bd-color: #73767a;
200
- --button-bg-color: #73767a;
454
+ --button-color: var(--button-info-active-color);
455
+ --button-bd-color: var(--button-info-active-bd-color);
456
+ --button-bg-color: var(--button-info-active-bg-color);
201
457
  }
202
458
  .pops button[type="info"]:hover {
203
- --button-color: #ffffff;
204
- --button-bd-color: #b1b3b8;
205
- --button-bg-color: #b1b3b8;
459
+ --button-color: var(--button-info-hover-color);
460
+ --button-bd-color: var(--button-info-hover-bd-color);
461
+ --button-bg-color: var(--button-info-hover-bg-color);
206
462
  }
207
463
  .pops button[type="info"]:focus-visible {
208
- outline: 2px solid #c8c9cc;
209
- outline-offset: 1px;
464
+ outline: var(--button-info-focus-visible-outline);
465
+ outline-offset: var(--button-info-focus-visible-outline-offset);
210
466
  }
211
467
  .pops button[type="info"]:disabled {
212
- --button-color: #ffffff;
213
- --button-bd-color: #c8c9cc;
214
- --button-bg-color: #c8c9cc;
468
+ --button-color: var(--button-success-disabled-color);
469
+ --button-bd-color: var(--button-success-disabled-bd-color);
470
+ --button-bg-color: var(--button-success-disabled-bg-color);
215
471
  }
216
472
 
217
473
  .pops button[type="warning"] {
218
- --button-color: #ffffff;
219
- --button-bd-color: #e6a23c;
220
- --button-bg-color: #e6a23c;
474
+ --button-color: var(--button-warning-color);
475
+ --button-bd-color: var(--button-warning-bd-color);
476
+ --button-bg-color: var(--button-warning-bg-color);
221
477
  }
222
478
  .pops button[type="warning"]:active {
223
- --button-color: #ffffff;
224
- --button-bd-color: #b88230;
225
- --button-bg-color: #b88230;
479
+ --button-color: var(--button-warning-active-color);
480
+ --button-bd-color: var(--button-warning-active-bd-color);
481
+ --button-bg-color: var(--button-warning-active-bg-color);
226
482
  }
227
483
  .pops button[type="warning"]:hover {
228
- --button-color: #ffffff;
229
- --button-bd-color: #eebe77;
230
- --button-bg-color: #eebe77;
484
+ --button-color: var(--button-warning-hover-color);
485
+ --button-bd-color: var(--button-warning-hover-bd-color);
486
+ --button-bg-color: var(--button-warning-hover-bg-color);
231
487
  }
232
488
  .pops button[type="warning"]:focus-visible {
233
- outline: 2px solid #f3d19e;
234
- outline-offset: 1px;
489
+ outline: var(--button-warning-focus-visible-outline);
490
+ outline-offset: var(--button-warning-focus-visible-outline-offset);
235
491
  }
236
492
  .pops button[type="warning"]:disabled {
237
- --button-color: #ffffff;
238
- --button-bd-color: #f3d19e;
239
- --button-bg-color: #f3d19e;
493
+ --button-color: var(--button-success-disabled-color);
494
+ --button-bd-color: var(--button-success-disabled-bd-color);
495
+ --button-bg-color: var(--button-success-disabled-bg-color);
240
496
  }
241
497
 
242
498
  .pops button[type="danger"] {
243
- --button-color: #ffffff;
244
- --button-bd-color: #f56c6c;
245
- --button-bg-color: #f56c6c;
499
+ --button-color: var(--button-danger-color);
500
+ --button-bd-color: var(--button-danger-bd-color);
501
+ --button-bg-color: var(--button-danger-bg-color);
246
502
  }
247
503
  .pops button[type="danger"]:active {
248
- --button-color: #ffffff;
249
- --button-bd-color: #c45656;
250
- --button-bg-color: #c45656;
504
+ --button-color: var(--button-danger-active-color);
505
+ --button-bd-color: var(--button-danger-active-bd-color);
506
+ --button-bg-color: var(--button-danger-active-bg-color);
251
507
  }
252
508
  .pops button[type="danger"]:hover {
253
- --button-color: #ffffff;
254
- --button-bd-color: #f89898;
255
- --button-bg-color: #f89898;
509
+ --button-color: var(--button-danger-hover-color);
510
+ --button-bd-color: var(--button-danger-hover-bd-color);
511
+ --button-bg-color: var(--button-danger-hover-bg-color);
256
512
  }
257
513
  .pops button[type="danger"]:focus-visible {
258
- outline: 2px solid #fab6b6;
259
- outline-offset: 1px;
514
+ outline: var(--button-danger-focus-visible-outline);
515
+ outline-offset: var(--button-danger-focus-visible-outline-offset);
260
516
  }
261
517
  .pops button[type="danger"]:disabled {
262
- --button-color: #ffffff;
263
- --button-bd-color: #fab6b6;
264
- --button-bg-color: #fab6b6;
518
+ --button-color: var(--button-success-disabled-color);
519
+ --button-bd-color: var(--button-success-disabled-bd-color);
520
+ --button-bg-color: var(--button-success-disabled-bg-color);
265
521
  }
266
522
 
267
523
  .pops button[type="xiaomi-primary"] {
268
- --button-color: #ffffff;
269
- --button-bd-color: #ff5c00;
270
- --button-bg-color: #ff5c00;
524
+ --button-color: var(--button-xiaomi-primary-color);
525
+ --button-bd-color: var(--button-xiaomi-primary-bd-color);
526
+ --button-bg-color: var(--button-xiaomi-primary-bg-color);
271
527
  }
272
528
  .pops button[type="xiaomi-primary"]:active {
273
- --button-color: #ffffff;
274
- --button-bd-color: #da4f00;
275
- --button-bg-color: #da4f00;
529
+ --button-color: var(--button-xiaomi-primary-active-color);
530
+ --button-bd-color: var(--button-xiaomi-primary-active-bd-color);
531
+ --button-bg-color: var(--button-xiaomi-primary-active-bg-color);
276
532
  }
277
533
  .pops button[type="xiaomi-primary"]:hover {
278
- --button-color: #ffffff;
279
- --button-bd-color: #ff7e29;
280
- --button-bg-color: #ff7e29;
534
+ --button-color: var(--button-xiaomi-primary-hover-color);
535
+ --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);
536
+ --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);
281
537
  }
282
538
  .pops button[type="xiaomi-primary"]:focus-visible {
283
- outline: 2px solid #fab6b6;
284
- outline-offset: 1px;
539
+ outline: var(--button-xiaomi-primary-focus-visible-outline);
540
+ outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);
285
541
  }
286
542
  .pops button[type="xiaomi-primary"]:disabled {
287
- --button-color: #ffffff;
288
- --button-bd-color: #fad5b6;
289
- --button-bg-color: #fad5b6;
543
+ --button-color: var(--button-success-disabled-color);
544
+ --button-bd-color: var(--button-success-disabled-bd-color);
545
+ --button-bg-color: var(--button-success-disabled-bg-color);
290
546
  }