@whitesev/pops 2.2.8 → 2.3.0

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 (146) hide show
  1. package/dist/index.amd.js +2817 -3012
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +2817 -3012
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +2817 -3012
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +2817 -3012
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +2817 -3012
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +2817 -3012
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/Pops.d.ts +497 -192
  14. package/dist/types/src/PopsIcon.d.ts +2 -2
  15. package/dist/types/src/components/panel/index.d.ts +1 -1
  16. package/dist/types/src/components/rightClickMenu/index.d.ts +487 -182
  17. package/dist/types/src/components/tooltip/index.d.ts +2 -2
  18. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +256 -259
  19. package/dist/types/src/types/animation.d.ts +19 -19
  20. package/dist/types/src/types/button.d.ts +187 -196
  21. package/dist/types/src/types/components.d.ts +213 -229
  22. package/dist/types/src/types/event.d.ts +63 -63
  23. package/dist/types/src/types/global.d.ts +20 -20
  24. package/dist/types/src/types/icon.d.ts +32 -32
  25. package/dist/types/src/types/inst.d.ts +24 -24
  26. package/dist/types/src/types/main.d.ts +114 -122
  27. package/dist/types/src/types/mask.d.ts +49 -49
  28. package/dist/types/src/types/position.d.ts +60 -60
  29. package/package.json +13 -8
  30. package/src/Pops.ts +0 -209
  31. package/src/PopsAnimation.ts +0 -32
  32. package/src/PopsCSS.ts +0 -51
  33. package/src/PopsCore.ts +0 -44
  34. package/src/PopsIcon.ts +0 -95
  35. package/src/PopsInst.ts +0 -21
  36. package/src/components/alert/config.ts +0 -62
  37. package/src/components/alert/index.css +0 -0
  38. package/src/components/alert/index.ts +0 -181
  39. package/src/components/alert/types/index.ts +0 -30
  40. package/src/components/confirm/config.ts +0 -90
  41. package/src/components/confirm/index.css +0 -0
  42. package/src/components/confirm/index.ts +0 -192
  43. package/src/components/confirm/types/index.ts +0 -17
  44. package/src/components/drawer/config.ts +0 -89
  45. package/src/components/drawer/index.css +0 -35
  46. package/src/components/drawer/index.ts +0 -260
  47. package/src/components/drawer/types/index.ts +0 -61
  48. package/src/components/folder/config.ts +0 -147
  49. package/src/components/folder/folderIcon.ts +0 -28
  50. package/src/components/folder/index.css +0 -314
  51. package/src/components/folder/index.ts +0 -1050
  52. package/src/components/folder/types/index.ts +0 -101
  53. package/src/components/iframe/config.ts +0 -60
  54. package/src/components/iframe/index.css +0 -75
  55. package/src/components/iframe/index.ts +0 -351
  56. package/src/components/iframe/types/index.ts +0 -146
  57. package/src/components/loading/config.ts +0 -29
  58. package/src/components/loading/index.css +0 -66
  59. package/src/components/loading/index.ts +0 -114
  60. package/src/components/loading/types/index.ts +0 -40
  61. package/src/components/panel/config.ts +0 -550
  62. package/src/components/panel/handlerComponents.ts +0 -3277
  63. package/src/components/panel/index.css +0 -1292
  64. package/src/components/panel/index.ts +0 -213
  65. package/src/components/panel/types/components-button.ts +0 -69
  66. package/src/components/panel/types/components-common.ts +0 -55
  67. package/src/components/panel/types/components-deepMenu.ts +0 -85
  68. package/src/components/panel/types/components-forms.ts +0 -45
  69. package/src/components/panel/types/components-input.ts +0 -82
  70. package/src/components/panel/types/components-own.ts +0 -31
  71. package/src/components/panel/types/components-select.ts +0 -101
  72. package/src/components/panel/types/components-selectMultiple.ts +0 -133
  73. package/src/components/panel/types/components-slider.ts +0 -78
  74. package/src/components/panel/types/components-switch.ts +0 -57
  75. package/src/components/panel/types/components-textarea.ts +0 -69
  76. package/src/components/panel/types/index.ts +0 -177
  77. package/src/components/prompt/config.ts +0 -94
  78. package/src/components/prompt/index.css +0 -34
  79. package/src/components/prompt/index.ts +0 -222
  80. package/src/components/prompt/types/index.ts +0 -55
  81. package/src/components/rightClickMenu/config.ts +0 -130
  82. package/src/components/rightClickMenu/index.css +0 -88
  83. package/src/components/rightClickMenu/index.ts +0 -689
  84. package/src/components/rightClickMenu/types/index.ts +0 -91
  85. package/src/components/searchSuggestion/config.ts +0 -59
  86. package/src/components/searchSuggestion/index.ts +0 -708
  87. package/src/components/searchSuggestion/types/index.ts +0 -147
  88. package/src/components/tooltip/config.ts +0 -34
  89. package/src/components/tooltip/index.css +0 -196
  90. package/src/components/tooltip/index.ts +0 -655
  91. package/src/components/tooltip/types/index.ts +0 -125
  92. package/src/config/CommonCSSClassName.ts +0 -17
  93. package/src/config/GlobalConfig.ts +0 -80
  94. package/src/css/animation.css +0 -2245
  95. package/src/css/button.css +0 -542
  96. package/src/css/common.css +0 -52
  97. package/src/css/index.css +0 -254
  98. package/src/css/ninePalaceGridPosition.css +0 -50
  99. package/src/css/scrollbar.css +0 -22
  100. package/src/handler/PopsElementHandler.ts +0 -325
  101. package/src/handler/PopsHandler.ts +0 -719
  102. package/src/svg/arrowLeft.svg +0 -4
  103. package/src/svg/arrowRight.svg +0 -4
  104. package/src/svg/chromeFilled.svg +0 -14
  105. package/src/svg/circleClose.svg +0 -8
  106. package/src/svg/close.svg +0 -5
  107. package/src/svg/cpu.svg +0 -8
  108. package/src/svg/delete.svg +0 -5
  109. package/src/svg/documentCopy.svg +0 -5
  110. package/src/svg/edit.svg +0 -8
  111. package/src/svg/eleme.svg +0 -5
  112. package/src/svg/elemePlus.svg +0 -5
  113. package/src/svg/headset.svg +0 -5
  114. package/src/svg/hide.svg +0 -8
  115. package/src/svg/keyboard.svg +0 -8
  116. package/src/svg/loading.svg +0 -5
  117. package/src/svg/max.svg +0 -5
  118. package/src/svg/min.svg +0 -5
  119. package/src/svg/mise.svg +0 -5
  120. package/src/svg/monitor.svg +0 -5
  121. package/src/svg/next.svg +0 -5
  122. package/src/svg/picture.svg +0 -8
  123. package/src/svg/prev.svg +0 -5
  124. package/src/svg/search.svg +0 -5
  125. package/src/svg/share.svg +0 -5
  126. package/src/svg/upload.svg +0 -5
  127. package/src/svg/videoPause.svg +0 -5
  128. package/src/svg/videoPlay.svg +0 -5
  129. package/src/svg/view.svg +0 -5
  130. package/src/types/PopsDOMUtilsEventType.d.ts +0 -259
  131. package/src/types/animation.d.ts +0 -19
  132. package/src/types/button.d.ts +0 -196
  133. package/src/types/components.d.ts +0 -229
  134. package/src/types/event.d.ts +0 -63
  135. package/src/types/global.d.ts +0 -20
  136. package/src/types/icon.d.ts +0 -32
  137. package/src/types/inst.d.ts +0 -24
  138. package/src/types/main.d.ts +0 -122
  139. package/src/types/mask.d.ts +0 -49
  140. package/src/types/position.d.ts +0 -60
  141. package/src/utils/PopsDOMUtils.ts +0 -2649
  142. package/src/utils/PopsDOMUtilsEventsConfig.ts +0 -6
  143. package/src/utils/PopsInstanceUtils.ts +0 -801
  144. package/src/utils/PopsMathUtils.ts +0 -77
  145. package/src/utils/PopsSafeUtils.ts +0 -24
  146. package/src/utils/PopsUtils.ts +0 -430
package/src/css/button.css DELETED
@@ -1,542 +0,0 @@
1
- .pops {
2
- --button-font-size: 14px;
3
- --button-height: 32px;
4
- --button-color: rgb(51, 51, 51);
5
- --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
6
- --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
7
- --button-margin-top: 0px;
8
- --button-margin-bottom: 0px;
9
- --button-margin-left: 5px;
10
- --button-margin-right: 5px;
11
- --button-padding-top: 6px;
12
- --button-padding-bottom: 6px;
13
- --button-padding-left: 12px;
14
- --button-padding-right: 12px;
15
- --button-radius: 4px;
16
-
17
- --container-title-height: 55px;
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
- }
275
- }
276
- .pops[data-bottom-btn="false"] {
277
- --container-bottom-btn-height: 0px;
278
- }
279
- .pops button {
280
- white-space: nowrap;
281
- float: right;
282
- display: inline-block;
283
- margin: var(--button-margin-top) var(--button-margin-right)
284
- var(--button-margin-bottom) var(--button-margin-left);
285
- padding: var(--button-padding-top) var(--button-padding-right)
286
- var(--button-padding-bottom) var(--button-padding-left);
287
- outline: 0;
288
- }
289
- .pops button[data-has-icon="false"] .pops-bottom-icon {
290
- display: none;
291
- }
292
- .pops button {
293
- border-radius: var(--button-radius);
294
- box-shadow: none;
295
- font-weight: 400;
296
- font-size: var(--button-font-size);
297
- cursor: pointer;
298
- transition: all 0.3s ease-in-out;
299
- }
300
- .pops button {
301
- display: flex;
302
- align-items: center;
303
- height: var(--button-height);
304
- line-height: normal;
305
- box-sizing: border-box;
306
- user-select: none;
307
- -webkit-user-select: none;
308
- -moz-user-select: none;
309
- -ms-user-select: none;
310
- border: 1px solid var(--button-bd-color);
311
- }
312
- .pops button {
313
- color: var(--button-color);
314
- border-color: var(--button-bd-color);
315
- background-color: var(--button-bg-color);
316
- }
317
- .pops button:active {
318
- color: var(--button-color);
319
- border-color: var(--button-bd-color);
320
- background-color: var(--button-bg-color);
321
- outline: 0;
322
- }
323
- .pops button:hover {
324
- color: var(--button-color);
325
- border-color: var(--button-bd-color);
326
- background-color: var(--button-bg-color);
327
- }
328
- .pops button:focus-visible {
329
- color: var(--button-color);
330
- border-color: var(--button-bd-color);
331
- background-color: var(--button-bg-color);
332
- }
333
- .pops button:disabled {
334
- cursor: not-allowed;
335
- color: var(--button-color);
336
- border-color: var(--button-bd-color);
337
- background-color: var(--button-bg-color);
338
- }
339
- .pops button.pops-button-large {
340
- --button-height: 32px;
341
- --button-padding-top: 12px;
342
- --button-padding-bottom: 12px;
343
- --button-padding-left: 19px;
344
- --button-padding-right: 19px;
345
- --button-font-size: 14px;
346
- --button-border-radius: 4px;
347
- }
348
-
349
- .pops button.pops-button-small {
350
- --button-height: 24px;
351
- --button-padding-top: 5px;
352
- --button-padding-bottom: 5px;
353
- --button-padding-left: 11px;
354
- --button-padding-right: 11px;
355
- --button-font-size: 12px;
356
- --button-border-radius: 4px;
357
- }
358
- .pops-panel-button-no-icon .pops-panel-button_inner i {
359
- display: none;
360
- }
361
- .pops-panel-button-right-icon .pops-panel-button_inner {
362
- flex-direction: row-reverse;
363
- }
364
- .pops-panel-button .pops-panel-button_inner i:has(svg),
365
- .pops-panel-button-right-icon .pops-panel-button-text {
366
- margin-right: 6px;
367
- }
368
-
369
- .pops button[data-type="default"] {
370
- --button-color: var(--button-default-color);
371
- --button-bd-color: var(--button-default-bd-color);
372
- --button-bg-color: var(--button-default-bg-color);
373
- }
374
- .pops button[data-type="default"]:active {
375
- --button-color: var(--button-default-active-color);
376
- --button-bd-color: var(--button-default-active-bd-color);
377
- --button-bg-color: var(--button-default-active-bg-color);
378
- }
379
- .pops button[data-type="default"]:hover {
380
- --button-color: var(--button-default-hover-color);
381
- --button-bd-color: var(--button-default-hover-bd-color);
382
- --button-bg-color: var(--button-default-hover-bg-color);
383
- }
384
- .pops button[data-type="default"]:focus-visible {
385
- outline: var(--button-default-focus-visible-outline);
386
- outline-offset: var(--button-default-focus-visible-outline-offset);
387
- }
388
- .pops button[data-type="default"]:disabled {
389
- --button-color: var(--button-default-disabled-color);
390
- --button-bd-color: var(--button-default-disabled-bd-color);
391
- --button-bg-color: var(--button-default-disabled-bg-color);
392
- }
393
-
394
- .pops button[data-type="primary"] {
395
- --button-color: var(--button-primary-color);
396
- --button-bd-color: var(--button-primary-bd-color);
397
- --button-bg-color: var(--button-primary-bg-color);
398
- }
399
- .pops button[data-type="primary"]:active {
400
- --button-color: var(--button-primary-active-color);
401
- --button-bd-color: var(--button-primary-active-bd-color);
402
- --button-bg-color: var(--button-primary-active-bg-color);
403
- }
404
- .pops button[data-type="primary"]:hover {
405
- --button-color: var(--button-primary-hover-color);
406
- --button-bd-color: var(--button-primary-hover-bd-color);
407
- --button-bg-color: var(--button-primary-hover-bg-color);
408
- }
409
- .pops button[data-type="primary"]:focus-visible {
410
- outline: var(--button-primary-focus-visible-outline);
411
- outline-offset: var(--button-primary-focus-visible-outline-offset);
412
- }
413
- .pops button[data-type="primary"]:disabled {
414
- --button-color: var(--button-primary-disabled-color);
415
- --button-bd-color: var(--button-primary-disabled-bd-color);
416
- --button-bg-color: var(--button-primary-disabled-bg-color);
417
- }
418
-
419
- .pops button[data-type="success"] {
420
- --button-color: var(--button-success-color);
421
- --button-bd-color: var(--button-success-bd-color);
422
- --button-bg-color: var(--button-success-bg-color);
423
- }
424
- .pops button[data-type="success"]:active {
425
- --button-color: var(--button-success-active-color);
426
- --button-bd-color: var(--button-success-active-bd-color);
427
- --button-bg-color: var(--button-success-active-bg-color);
428
- }
429
- .pops button[data-type="success"]:hover {
430
- --button-color: var(--button-success-hover-color);
431
- --button-bd-color: var(--button-success-hover-bd-color);
432
- --button-bg-color: var(--button-success-hover-bg-color);
433
- }
434
- .pops button[data-type="success"]:focus-visible {
435
- outline: var(--button-success-focus-visible-outline);
436
- outline-offset: var(--button-success-focus-visible-outline-offset);
437
- }
438
- .pops button[data-type="success"]:disabled {
439
- --button-color: var(--button-success-disabled-color);
440
- --button-bd-color: var(--button-success-disabled-bd-color);
441
- --button-bg-color: var(--button-success-disabled-bg-color);
442
- }
443
-
444
- .pops button[data-type="info"] {
445
- --button-color: var(--button-info-color);
446
- --button-bd-color: var(--button-info-bd-color);
447
- --button-bg-color: var(--button-info-bg-color);
448
- }
449
- .pops button[data-type="info"]:active {
450
- --button-color: var(--button-info-active-color);
451
- --button-bd-color: var(--button-info-active-bd-color);
452
- --button-bg-color: var(--button-info-active-bg-color);
453
- }
454
- .pops button[data-type="info"]:hover {
455
- --button-color: var(--button-info-hover-color);
456
- --button-bd-color: var(--button-info-hover-bd-color);
457
- --button-bg-color: var(--button-info-hover-bg-color);
458
- }
459
- .pops button[data-type="info"]:focus-visible {
460
- outline: var(--button-info-focus-visible-outline);
461
- outline-offset: var(--button-info-focus-visible-outline-offset);
462
- }
463
- .pops button[data-type="info"]:disabled {
464
- --button-color: var(--button-success-disabled-color);
465
- --button-bd-color: var(--button-success-disabled-bd-color);
466
- --button-bg-color: var(--button-success-disabled-bg-color);
467
- }
468
-
469
- .pops button[data-type="warning"] {
470
- --button-color: var(--button-warning-color);
471
- --button-bd-color: var(--button-warning-bd-color);
472
- --button-bg-color: var(--button-warning-bg-color);
473
- }
474
- .pops button[data-type="warning"]:active {
475
- --button-color: var(--button-warning-active-color);
476
- --button-bd-color: var(--button-warning-active-bd-color);
477
- --button-bg-color: var(--button-warning-active-bg-color);
478
- }
479
- .pops button[data-type="warning"]:hover {
480
- --button-color: var(--button-warning-hover-color);
481
- --button-bd-color: var(--button-warning-hover-bd-color);
482
- --button-bg-color: var(--button-warning-hover-bg-color);
483
- }
484
- .pops button[data-type="warning"]:focus-visible {
485
- outline: var(--button-warning-focus-visible-outline);
486
- outline-offset: var(--button-warning-focus-visible-outline-offset);
487
- }
488
- .pops button[data-type="warning"]:disabled {
489
- --button-color: var(--button-success-disabled-color);
490
- --button-bd-color: var(--button-success-disabled-bd-color);
491
- --button-bg-color: var(--button-success-disabled-bg-color);
492
- }
493
-
494
- .pops button[data-type="danger"] {
495
- --button-color: var(--button-danger-color);
496
- --button-bd-color: var(--button-danger-bd-color);
497
- --button-bg-color: var(--button-danger-bg-color);
498
- }
499
- .pops button[data-type="danger"]:active {
500
- --button-color: var(--button-danger-active-color);
501
- --button-bd-color: var(--button-danger-active-bd-color);
502
- --button-bg-color: var(--button-danger-active-bg-color);
503
- }
504
- .pops button[data-type="danger"]:hover {
505
- --button-color: var(--button-danger-hover-color);
506
- --button-bd-color: var(--button-danger-hover-bd-color);
507
- --button-bg-color: var(--button-danger-hover-bg-color);
508
- }
509
- .pops button[data-type="danger"]:focus-visible {
510
- outline: var(--button-danger-focus-visible-outline);
511
- outline-offset: var(--button-danger-focus-visible-outline-offset);
512
- }
513
- .pops button[data-type="danger"]:disabled {
514
- --button-color: var(--button-success-disabled-color);
515
- --button-bd-color: var(--button-success-disabled-bd-color);
516
- --button-bg-color: var(--button-success-disabled-bg-color);
517
- }
518
-
519
- .pops button[data-type="xiaomi-primary"] {
520
- --button-color: var(--button-xiaomi-primary-color);
521
- --button-bd-color: var(--button-xiaomi-primary-bd-color);
522
- --button-bg-color: var(--button-xiaomi-primary-bg-color);
523
- }
524
- .pops button[data-type="xiaomi-primary"]:active {
525
- --button-color: var(--button-xiaomi-primary-active-color);
526
- --button-bd-color: var(--button-xiaomi-primary-active-bd-color);
527
- --button-bg-color: var(--button-xiaomi-primary-active-bg-color);
528
- }
529
- .pops button[data-type="xiaomi-primary"]:hover {
530
- --button-color: var(--button-xiaomi-primary-hover-color);
531
- --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);
532
- --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);
533
- }
534
- .pops button[data-type="xiaomi-primary"]:focus-visible {
535
- outline: var(--button-xiaomi-primary-focus-visible-outline);
536
- outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);
537
- }
538
- .pops button[data-type="xiaomi-primary"]:disabled {
539
- --button-color: var(--button-success-disabled-color);
540
- --button-bd-color: var(--button-success-disabled-bd-color);
541
- --button-bg-color: var(--button-success-disabled-bg-color);
542
- }
package/src/css/common.css DELETED
@@ -1,52 +0,0 @@
1
- .pops-flex-items-center {
2
- display: flex;
3
- align-items: center;
4
- }
5
- .pops-flex-y-center {
6
- display: flex;
7
- justify-content: space-between;
8
- }
9
- .pops-flex-x-center {
10
- display: flex;
11
- align-content: center;
12
- }
13
- .pops-hide {
14
- display: none;
15
- }
16
- .pops-hide-important {
17
- display: none !important;
18
- }
19
- .pops-no-border {
20
- border: 0;
21
- }
22
- .pops-no-border-important {
23
- border: 0 !important;
24
- }
25
- .pops-user-select-none {
26
- user-select: none;
27
- -webkit-user-select: none;
28
- -ms-user-select: none;
29
- -moz-user-select: none;
30
- }
31
- .pops-line-height-center {
32
- line-height: normal;
33
- align-content: center;
34
- }
35
- .pops-width-fill {
36
- width: -webkit-fill-available;
37
- width: -moz-available;
38
- }
39
- .pops-text-is-disabled {
40
- --pops-text-is-disabled-color: #a8abb2;
41
- color: var(--pops-text-is-disabled-color);
42
- --pops-panel-forms-container-item-left-desc-text-color: var(
43
- --pops-text-is-disabled-color
44
- );
45
- }
46
- .pops-text-is-disabled-important {
47
- --pops-text-is-disabled-color: #a8abb2;
48
- color: var(--pops-text-is-disabled-color) !important;
49
- --pops-panel-forms-container-item-left-desc-text-color: var(
50
- --pops-text-is-disabled-color
51
- ) !important;
52
- }