@whitesev/pops 2.4.6 → 2.4.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 (142) hide show
  1. package/dist/index.amd.js +578 -571
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.cjs.js +578 -571
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.esm.js +578 -571
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.iife.js +578 -571
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.system.js +578 -571
  10. package/dist/index.system.js.map +1 -1
  11. package/dist/index.umd.js +578 -571
  12. package/dist/index.umd.js.map +1 -1
  13. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +252 -252
  14. package/dist/types/src/types/animation.d.ts +19 -19
  15. package/dist/types/src/types/button.d.ts +187 -187
  16. package/dist/types/src/types/components.d.ts +210 -210
  17. package/dist/types/src/types/event.d.ts +63 -63
  18. package/dist/types/src/types/global.d.ts +25 -25
  19. package/dist/types/src/types/icon.d.ts +32 -32
  20. package/dist/types/src/types/inst.d.ts +24 -24
  21. package/dist/types/src/types/main.d.ts +111 -111
  22. package/dist/types/src/types/mask.d.ts +49 -49
  23. package/dist/types/src/types/position.d.ts +60 -60
  24. package/index.ts +3 -0
  25. package/package.json +4 -2
  26. package/src/Pops.ts +206 -0
  27. package/src/PopsAnimation.ts +32 -0
  28. package/src/PopsCSS.ts +51 -0
  29. package/src/PopsCore.ts +64 -0
  30. package/src/PopsIcon.ts +95 -0
  31. package/src/PopsInst.ts +21 -0
  32. package/src/components/alert/config.ts +62 -0
  33. package/src/components/alert/index.css +0 -0
  34. package/src/components/alert/index.ts +163 -0
  35. package/src/components/alert/types/index.ts +23 -0
  36. package/src/components/confirm/config.ts +90 -0
  37. package/src/components/confirm/index.css +0 -0
  38. package/src/components/confirm/index.ts +166 -0
  39. package/src/components/confirm/types/index.ts +17 -0
  40. package/src/components/drawer/config.ts +89 -0
  41. package/src/components/drawer/index.css +37 -0
  42. package/src/components/drawer/index.ts +237 -0
  43. package/src/components/drawer/types/index.ts +61 -0
  44. package/src/components/folder/config.ts +147 -0
  45. package/src/components/folder/folderIcon.ts +28 -0
  46. package/src/components/folder/index.css +303 -0
  47. package/src/components/folder/index.ts +929 -0
  48. package/src/components/folder/types/index.ts +97 -0
  49. package/src/components/iframe/config.ts +60 -0
  50. package/src/components/iframe/index.css +76 -0
  51. package/src/components/iframe/index.ts +334 -0
  52. package/src/components/iframe/types/index.ts +139 -0
  53. package/src/components/loading/config.ts +29 -0
  54. package/src/components/loading/index.css +66 -0
  55. package/src/components/loading/index.ts +99 -0
  56. package/src/components/loading/types/index.ts +34 -0
  57. package/src/components/panel/config.ts +519 -0
  58. package/src/components/panel/handlerComponents.ts +2900 -0
  59. package/src/components/panel/index.css +1222 -0
  60. package/src/components/panel/index.ts +207 -0
  61. package/src/components/panel/types/components-button.ts +68 -0
  62. package/src/components/panel/types/components-common.ts +50 -0
  63. package/src/components/panel/types/components-deepMenu.ts +84 -0
  64. package/src/components/panel/types/components-forms.ts +44 -0
  65. package/src/components/panel/types/components-input.ts +78 -0
  66. package/src/components/panel/types/components-own.ts +30 -0
  67. package/src/components/panel/types/components-select.ts +93 -0
  68. package/src/components/panel/types/components-selectMultiple.ts +130 -0
  69. package/src/components/panel/types/components-slider.ts +77 -0
  70. package/src/components/panel/types/components-switch.ts +56 -0
  71. package/src/components/panel/types/components-textarea.ts +68 -0
  72. package/src/components/panel/types/index.ts +177 -0
  73. package/src/components/prompt/config.ts +94 -0
  74. package/src/components/prompt/index.css +34 -0
  75. package/src/components/prompt/index.ts +216 -0
  76. package/src/components/prompt/types/index.ts +55 -0
  77. package/src/components/rightClickMenu/config.ts +98 -0
  78. package/src/components/rightClickMenu/index.css +112 -0
  79. package/src/components/rightClickMenu/index.ts +602 -0
  80. package/src/components/rightClickMenu/types/index.ts +97 -0
  81. package/src/components/searchSuggestion/config.ts +56 -0
  82. package/src/components/searchSuggestion/index.ts +856 -0
  83. package/src/components/searchSuggestion/types/index.ts +239 -0
  84. package/src/components/tooltip/config.ts +34 -0
  85. package/src/components/tooltip/index.css +199 -0
  86. package/src/components/tooltip/index.ts +604 -0
  87. package/src/components/tooltip/types/index.ts +117 -0
  88. package/src/config/CommonCSSClassName.ts +17 -0
  89. package/src/config/GlobalConfig.ts +63 -0
  90. package/src/css/animation.css +987 -0
  91. package/src/css/button.css +551 -0
  92. package/src/css/common.css +48 -0
  93. package/src/css/index.css +253 -0
  94. package/src/css/ninePalaceGridPosition.css +50 -0
  95. package/src/css/scrollbar.css +22 -0
  96. package/src/handler/PopsElementHandler.ts +304 -0
  97. package/src/handler/PopsHandler.ts +589 -0
  98. package/src/svg/arrowLeft.svg +4 -0
  99. package/src/svg/arrowRight.svg +4 -0
  100. package/src/svg/chromeFilled.svg +11 -0
  101. package/src/svg/circleClose.svg +8 -0
  102. package/src/svg/close.svg +5 -0
  103. package/src/svg/cpu.svg +8 -0
  104. package/src/svg/delete.svg +5 -0
  105. package/src/svg/documentCopy.svg +5 -0
  106. package/src/svg/edit.svg +8 -0
  107. package/src/svg/eleme.svg +5 -0
  108. package/src/svg/elemePlus.svg +5 -0
  109. package/src/svg/headset.svg +5 -0
  110. package/src/svg/hide.svg +8 -0
  111. package/src/svg/keyboard.svg +8 -0
  112. package/src/svg/loading.svg +5 -0
  113. package/src/svg/max.svg +5 -0
  114. package/src/svg/min.svg +5 -0
  115. package/src/svg/mise.svg +5 -0
  116. package/src/svg/monitor.svg +5 -0
  117. package/src/svg/next.svg +5 -0
  118. package/src/svg/picture.svg +8 -0
  119. package/src/svg/prev.svg +5 -0
  120. package/src/svg/search.svg +5 -0
  121. package/src/svg/share.svg +5 -0
  122. package/src/svg/upload.svg +5 -0
  123. package/src/svg/videoPause.svg +5 -0
  124. package/src/svg/videoPlay.svg +5 -0
  125. package/src/svg/view.svg +5 -0
  126. package/src/types/PopsDOMUtilsEventType.d.ts +252 -0
  127. package/src/types/animation.d.ts +19 -0
  128. package/src/types/button.d.ts +187 -0
  129. package/src/types/components.d.ts +210 -0
  130. package/src/types/event.d.ts +63 -0
  131. package/src/types/global.d.ts +25 -0
  132. package/src/types/icon.d.ts +32 -0
  133. package/src/types/inst.d.ts +24 -0
  134. package/src/types/main.d.ts +111 -0
  135. package/src/types/mask.d.ts +49 -0
  136. package/src/types/position.d.ts +60 -0
  137. package/src/utils/PopsDOMUtils.ts +2408 -0
  138. package/src/utils/PopsDOMUtilsEventsConfig.ts +4 -0
  139. package/src/utils/PopsInstanceUtils.ts +688 -0
  140. package/src/utils/PopsMathUtils.ts +71 -0
  141. package/src/utils/PopsSafeUtils.ts +22 -0
  142. package/src/utils/PopsUtils.ts +406 -0
package/src/css/button.css ADDED
@@ -0,0 +1,551 @@
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 var(--button-default-focus-visible-outline-color);
32
+ --button-default-focus-visible-outline-offset: 1px;
33
+ --button-default-disabled-color: #a8abb2;
34
+ --button-default-disabled-bd-color: #ffffff;
35
+ --button-default-disabled-bg-color: #e4e7ed;
36
+
37
+ /* primary按钮 */
38
+ --button-primary-color: #ffffff;
39
+ --button-primary-bd-color: #409eff;
40
+ --button-primary-bg-color: #409eff;
41
+ --button-primary-active-color: #ffffff;
42
+ --button-primary-active-bd-color: #337ecc;
43
+ --button-primary-active-bg-color: #337ecc;
44
+ --button-primary-hover-color: #ffffff;
45
+ --button-primary-hover-bd-color: #79bbff;
46
+ --button-primary-hover-bg-color: #79bbff;
47
+ --button-primary-focus-visible-outline-color: #a0cfff;
48
+ --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);
49
+ --button-primary-focus-visible-outline-offset: 1px;
50
+ --button-primary-disabled-color: #ffffff80;
51
+ --button-primary-disabled-bd-color: #a0cfff;
52
+ --button-primary-disabled-bg-color: #a0cfff;
53
+
54
+ /* success按钮 */
55
+ --button-success-color: #ffffff;
56
+ --button-success-bd-color: #4cae4c;
57
+ --button-success-bg-color: #5cb85c;
58
+ --button-success-active-color: #ffffff;
59
+ --button-success-active-bd-color: #529b2e;
60
+ --button-success-active-bg-color: #529b2e;
61
+ --button-success-hover-color: #ffffff;
62
+ --button-success-hover-bd-color: #95d475;
63
+ --button-success-hover-bg-color: #95d475;
64
+ --button-success-focus-visible-outline-color: #b3e19d;
65
+ --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);
66
+ --button-success-focus-visible-outline-offset: 1px;
67
+ --button-success-disabled-color: #ffffff80;
68
+ --button-success-disabled-bd-color: #b3e19d;
69
+ --button-success-disabled-bg-color: #b3e19d;
70
+
71
+ /* info按钮 */
72
+ --button-info-color: #ffffff;
73
+ --button-info-bd-color: #909399;
74
+ --button-info-bg-color: #909399;
75
+ --button-info-active-color: #ffffff;
76
+ --button-info-active-bd-color: #73767a;
77
+ --button-info-active-bg-color: #73767a;
78
+ --button-info-hover-color: #ffffff;
79
+ --button-info-hover-bd-color: #b1b3b8;
80
+ --button-info-hover-bg-color: #b1b3b8;
81
+ --button-info-focus-visible-outline-color: #c8c9cc;
82
+ --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);
83
+ --button-info-focus-visible-outline-offset: 1px;
84
+ --button-info-disabled-color: #ffffff80;
85
+ --button-info-disabled-bd-color: #c8c9cc;
86
+ --button-info-disabled-bg-color: #c8c9cc;
87
+
88
+ /* warning按钮 */
89
+ --button-warning-color: #ffffff;
90
+ --button-warning-bd-color: #e6a23c;
91
+ --button-warning-bg-color: #e6a23c;
92
+ --button-warning-active-color: #ffffff;
93
+ --button-warning-active-bd-color: #b88230;
94
+ --button-warning-active-bg-color: #b88230;
95
+ --button-warning-hover-color: #ffffff80;
96
+ --button-warning-hover-bd-color: #eebe77;
97
+ --button-warning-hover-bg-color: #eebe77;
98
+ --button-warning-focus-visible-outline-color: #f3d19e;
99
+ --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);
100
+ --button-warning-focus-visible-outline-offset: 1px;
101
+ --button-warning-disabled-color: #ffffff80;
102
+ --button-warning-disabled-bd-color: #f3d19e;
103
+ --button-warning-disabled-bg-color: #f3d19e;
104
+
105
+ /* danger按钮 */
106
+ --button-danger-color: #ffffff;
107
+ --button-danger-bd-color: #f56c6c;
108
+ --button-danger-bg-color: #f56c6c;
109
+ --button-danger-active-color: #ffffff;
110
+ --button-danger-active-bd-color: #c45656;
111
+ --button-danger-active-bg-color: #c45656;
112
+ --button-danger-hover-color: #ffffff;
113
+ --button-danger-hover-bd-color: #f89898;
114
+ --button-danger-hover-bg-color: #f89898;
115
+ --button-danger-focus-visible-outline-color: #fab6b6;
116
+ --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);
117
+ --button-danger-focus-visible-outline-offset: 1px;
118
+ --button-danger-disabled-color: #ffffff80;
119
+ --button-danger-disabled-bd-color: #fab6b6;
120
+ --button-danger-disabled-bg-color: #fab6b6;
121
+
122
+ /* xiaomi-primary按钮 */
123
+ --button-xiaomi-primary-color: #ffffff;
124
+ --button-xiaomi-primary-bd-color: #ff5c00;
125
+ --button-xiaomi-primary-bg-color: #ff5c00;
126
+ --button-xiaomi-primary-active-color: #ffffff;
127
+ --button-xiaomi-primary-active-bd-color: #da4f00;
128
+ --button-xiaomi-primary-active-bg-color: #da4f00;
129
+ --button-xiaomi-primary-hover-color: #ffffff;
130
+ --button-xiaomi-primary-hover-bd-color: #ff7e29;
131
+ --button-xiaomi-primary-hover-bg-color: #ff7e29;
132
+ --button-xiaomi-primary-focus-visible-outline-color: #ffa061;
133
+ --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);
134
+ --button-xiaomi-primary-focus-visible-outline-offset: 1px;
135
+ --button-xiaomi-primary-disabled-color: #ffffff80;
136
+ --button-xiaomi-primary-disabled-bd-color: #fad5b6;
137
+ --button-xiaomi-primary-disabled-bg-color: #fad5b6;
138
+
139
+ /* violet按钮 */
140
+ --button-violet-color: #ffffff;
141
+ --button-violet-bd-color: #626aef;
142
+ --button-violet-bg-color: #626aef;
143
+ --button-violet-active-color: #ffffff;
144
+ --button-violet-active-bd-color: #8188f2;
145
+ --button-violet-active-bg-color: #8188f2;
146
+ --button-violet-hover-color: #ffffff;
147
+ --button-violet-hover-bd-color: #4b50ad;
148
+ --button-violet-hover-bg-color: #4b50ad;
149
+ --button-violet-focus-visible-outline-color: #2a598a;
150
+ --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);
151
+ --button-violet-focus-visible-outline-offset: 1px;
152
+ --button-violet-disabled-color: #ffffff80;
153
+ --button-violet-disabled-bd-color: #3b3f82;
154
+ --button-violet-disabled-bg-color: #3b3f82;
155
+ }
156
+
157
+ @media (prefers-color-scheme: dark) {
158
+ .pops {
159
+ /* default按钮 */
160
+ --button-default-color: #cfd3dc;
161
+ --button-default-bd-color: #4c4d4f;
162
+ --button-default-bg-color: transparent;
163
+ --button-default-active-color: #409eff;
164
+ --button-default-active-bd-color: #409eff;
165
+ --button-default-active-bg-color: #18222c;
166
+ --button-default-hover-color: #409eff;
167
+ --button-default-hover-bd-color: #213d5b;
168
+ --button-default-hover-bg-color: #18222c;
169
+ --button-default-focus-visible-outline-color: #2a598a;
170
+ --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);
171
+ --button-default-focus-visible-outline-offset: 1px;
172
+ --button-default-disabled-color: #ffffff80;
173
+ --button-default-disabled-bd-color: #414243;
174
+ --button-default-disabled-bg-color: transparent;
175
+
176
+ /* primary按钮 */
177
+ --button-primary-color: #ffffff;
178
+ --button-primary-bd-color: #409eff;
179
+ --button-primary-bg-color: #409eff;
180
+ --button-primary-active-color: #ffffff;
181
+ --button-primary-active-bd-color: #66b1ff;
182
+ --button-primary-active-bg-color: #66b1ff;
183
+ --button-primary-hover-color: #ffffff;
184
+ --button-primary-hover-bd-color: #3375b9;
185
+ --button-primary-hover-bg-color: #3375b9;
186
+ --button-primary-focus-visible-outline-color: #2a598a;
187
+ --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);
188
+ --button-primary-focus-visible-outline-offset: 1px;
189
+ --button-primary-disabled-color: #ffffff80;
190
+ --button-primary-disabled-bd-color: #2a598a;
191
+ --button-primary-disabled-bg-color: #2a598a;
192
+
193
+ /* success按钮 */
194
+ --button-success-color: #ffffff;
195
+ --button-success-bd-color: #67c23a;
196
+ --button-success-bg-color: #67c23a;
197
+ --button-success-active-color: #ffffff;
198
+ --button-success-active-bd-color: #85ce61;
199
+ --button-success-active-bg-color: #85ce61;
200
+ --button-success-hover-color: #ffffff;
201
+ --button-success-hover-bd-color: #4e8e2f;
202
+ --button-success-hover-bg-color: #4e8e2f;
203
+ --button-success-focus-visible-outline-color: #3e6b27;
204
+ --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);
205
+ --button-success-focus-visible-outline-offset: 1px;
206
+ --button-success-disabled-color: #ffffff80;
207
+ --button-success-disabled-bd-color: #3e6b27;
208
+ --button-success-disabled-bg-color: #3e6b27;
209
+
210
+ /* info按钮 */
211
+ --button-info-color: #ffffff;
212
+ --button-info-bd-color: #909399;
213
+ --button-info-bg-color: #909399;
214
+ --button-info-active-color: #ffffff;
215
+ --button-info-active-bd-color: #a6a9ad;
216
+ --button-info-active-bg-color: #a6a9ad;
217
+ --button-info-hover-color: #ffffff;
218
+ --button-info-hover-bd-color: #6b6d71;
219
+ --button-info-hover-bg-color: #6b6d71;
220
+ --button-info-focus-visible-outline-color: #525457;
221
+ --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);
222
+ --button-info-focus-visible-outline-offset: 1px;
223
+ --button-info-disabled-color: #ffffff80;
224
+ --button-info-disabled-bd-color: #525457;
225
+ --button-info-disabled-bg-color: #525457;
226
+
227
+ /* warning按钮 */
228
+ --button-warning-color: #ffffff;
229
+ --button-warning-bd-color: #e6a23c;
230
+ --button-warning-bg-color: #e6a23c;
231
+ --button-warning-active-color: #ffffff;
232
+ --button-warning-active-bd-color: #ebb563;
233
+ --button-warning-active-bg-color: #ebb563;
234
+ --button-warning-hover-color: #ffffff80;
235
+ --button-warning-hover-bd-color: #a77730;
236
+ --button-warning-hover-bg-color: #a77730;
237
+ --button-warning-focus-visible-outline-color: #7d5b28;
238
+ --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);
239
+ --button-warning-focus-visible-outline-offset: 1px;
240
+ --button-warning-disabled-color: #ffffff80;
241
+ --button-warning-disabled-bd-color: #7d5b28;
242
+ --button-warning-disabled-bg-color: #7d5b28;
243
+
244
+ /* danger按钮 */
245
+ --button-danger-color: #ffffff;
246
+ --button-danger-bd-color: #f56c6c;
247
+ --button-danger-bg-color: #f56c6c;
248
+ --button-danger-active-color: #ffffff;
249
+ --button-danger-active-bd-color: #f78989;
250
+ --button-danger-active-bg-color: #f78989;
251
+ --button-danger-hover-color: #ffffff;
252
+ --button-danger-hover-bd-color: #b25252;
253
+ --button-danger-hover-bg-color: #b25252;
254
+ --button-danger-focus-visible-outline-color: #854040;
255
+ --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);
256
+ --button-danger-focus-visible-outline-offset: 1px;
257
+ --button-danger-disabled-color: #ffffff80;
258
+ --button-danger-disabled-bd-color: #854040;
259
+ --button-danger-disabled-bg-color: #854040;
260
+ }
261
+ }
262
+ .pops[data-bottom-btn="false"] {
263
+ --container-bottom-btn-height: 0px;
264
+ }
265
+ .pops button {
266
+ white-space: nowrap;
267
+ float: right;
268
+ display: inline-block;
269
+ margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);
270
+ padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
271
+ outline: 0;
272
+ }
273
+ .pops button[data-has-icon="false"] .pops-bottom-icon {
274
+ display: none;
275
+ }
276
+ .pops button {
277
+ border-radius: var(--button-radius);
278
+ box-shadow: none;
279
+ font-weight: 400;
280
+ font-size: var(--button-font-size);
281
+ cursor: pointer;
282
+ transition: all 0.3s ease-in-out;
283
+ }
284
+ .pops button {
285
+ display: flex;
286
+ align-items: center;
287
+ height: var(--button-height);
288
+ line-height: normal;
289
+ box-sizing: border-box;
290
+ border: 1px solid var(--button-bd-color);
291
+ -webkit-user-select: none;
292
+ -moz-user-select: none;
293
+ -ms-user-select: none;
294
+ user-select: none;
295
+ }
296
+ .pops button {
297
+ color: var(--button-color);
298
+ border-color: var(--button-bd-color);
299
+ background-color: var(--button-bg-color);
300
+ }
301
+ .pops button:active {
302
+ color: var(--button-color);
303
+ border-color: var(--button-bd-color);
304
+ background-color: var(--button-bg-color);
305
+ outline: 0;
306
+ }
307
+ .pops button:hover {
308
+ color: var(--button-color);
309
+ border-color: var(--button-bd-color);
310
+ background-color: var(--button-bg-color);
311
+ }
312
+ .pops button:focus-visible {
313
+ color: var(--button-color);
314
+ border-color: var(--button-bd-color);
315
+ background-color: var(--button-bg-color);
316
+ }
317
+ .pops button:disabled {
318
+ cursor: not-allowed;
319
+ color: var(--button-color);
320
+ border-color: var(--button-bd-color);
321
+ background-color: var(--button-bg-color);
322
+ }
323
+ .pops button.pops-button-large {
324
+ --button-height: 32px;
325
+ --button-padding-top: 12px;
326
+ --button-padding-bottom: 12px;
327
+ --button-padding-left: 19px;
328
+ --button-padding-right: 19px;
329
+ --button-font-size: 14px;
330
+ --button-border-radius: 4px;
331
+ }
332
+
333
+ .pops button.pops-button-small {
334
+ --button-height: 24px;
335
+ --button-padding-top: 5px;
336
+ --button-padding-bottom: 5px;
337
+ --button-padding-left: 11px;
338
+ --button-padding-right: 11px;
339
+ --button-font-size: 12px;
340
+ --button-border-radius: 4px;
341
+ }
342
+ .pops-panel-button-no-icon .pops-panel-button_inner i {
343
+ display: none;
344
+ }
345
+ .pops-panel-button-right-icon .pops-panel-button_inner {
346
+ flex-direction: row-reverse;
347
+ }
348
+ .pops-panel-button .pops-panel-button_inner i:has(svg),
349
+ .pops-panel-button-right-icon .pops-panel-button-text {
350
+ margin-right: 6px;
351
+ }
352
+
353
+ .pops button[data-type="default"] {
354
+ --button-color: var(--button-default-color);
355
+ --button-bd-color: var(--button-default-bd-color);
356
+ --button-bg-color: var(--button-default-bg-color);
357
+ }
358
+ .pops button[data-type="default"]:active {
359
+ --button-color: var(--button-default-active-color);
360
+ --button-bd-color: var(--button-default-active-bd-color);
361
+ --button-bg-color: var(--button-default-active-bg-color);
362
+ }
363
+ .pops button[data-type="default"]:hover {
364
+ --button-color: var(--button-default-hover-color);
365
+ --button-bd-color: var(--button-default-hover-bd-color);
366
+ --button-bg-color: var(--button-default-hover-bg-color);
367
+ }
368
+ .pops button[data-type="default"]:focus-visible {
369
+ outline: var(--button-default-focus-visible-outline);
370
+ outline-offset: var(--button-default-focus-visible-outline-offset);
371
+ }
372
+ .pops button[data-type="default"]:disabled {
373
+ --button-color: var(--button-default-disabled-color);
374
+ --button-bd-color: var(--button-default-disabled-bd-color);
375
+ --button-bg-color: var(--button-default-disabled-bg-color);
376
+ }
377
+
378
+ .pops button[data-type="primary"] {
379
+ --button-color: var(--button-primary-color);
380
+ --button-bd-color: var(--button-primary-bd-color);
381
+ --button-bg-color: var(--button-primary-bg-color);
382
+ }
383
+ .pops button[data-type="primary"]:active {
384
+ --button-color: var(--button-primary-active-color);
385
+ --button-bd-color: var(--button-primary-active-bd-color);
386
+ --button-bg-color: var(--button-primary-active-bg-color);
387
+ }
388
+ .pops button[data-type="primary"]:hover {
389
+ --button-color: var(--button-primary-hover-color);
390
+ --button-bd-color: var(--button-primary-hover-bd-color);
391
+ --button-bg-color: var(--button-primary-hover-bg-color);
392
+ }
393
+ .pops button[data-type="primary"]:focus-visible {
394
+ outline: var(--button-primary-focus-visible-outline);
395
+ outline-offset: var(--button-primary-focus-visible-outline-offset);
396
+ }
397
+ .pops button[data-type="primary"]:disabled {
398
+ --button-color: var(--button-primary-disabled-color);
399
+ --button-bd-color: var(--button-primary-disabled-bd-color);
400
+ --button-bg-color: var(--button-primary-disabled-bg-color);
401
+ }
402
+
403
+ .pops button[data-type="success"] {
404
+ --button-color: var(--button-success-color);
405
+ --button-bd-color: var(--button-success-bd-color);
406
+ --button-bg-color: var(--button-success-bg-color);
407
+ }
408
+ .pops button[data-type="success"]:active {
409
+ --button-color: var(--button-success-active-color);
410
+ --button-bd-color: var(--button-success-active-bd-color);
411
+ --button-bg-color: var(--button-success-active-bg-color);
412
+ }
413
+ .pops button[data-type="success"]:hover {
414
+ --button-color: var(--button-success-hover-color);
415
+ --button-bd-color: var(--button-success-hover-bd-color);
416
+ --button-bg-color: var(--button-success-hover-bg-color);
417
+ }
418
+ .pops button[data-type="success"]:focus-visible {
419
+ outline: var(--button-success-focus-visible-outline);
420
+ outline-offset: var(--button-success-focus-visible-outline-offset);
421
+ }
422
+ .pops button[data-type="success"]:disabled {
423
+ --button-color: var(--button-success-disabled-color);
424
+ --button-bd-color: var(--button-success-disabled-bd-color);
425
+ --button-bg-color: var(--button-success-disabled-bg-color);
426
+ }
427
+
428
+ .pops button[data-type="info"] {
429
+ --button-color: var(--button-info-color);
430
+ --button-bd-color: var(--button-info-bd-color);
431
+ --button-bg-color: var(--button-info-bg-color);
432
+ }
433
+ .pops button[data-type="info"]:active {
434
+ --button-color: var(--button-info-active-color);
435
+ --button-bd-color: var(--button-info-active-bd-color);
436
+ --button-bg-color: var(--button-info-active-bg-color);
437
+ }
438
+ .pops button[data-type="info"]:hover {
439
+ --button-color: var(--button-info-hover-color);
440
+ --button-bd-color: var(--button-info-hover-bd-color);
441
+ --button-bg-color: var(--button-info-hover-bg-color);
442
+ }
443
+ .pops button[data-type="info"]:focus-visible {
444
+ outline: var(--button-info-focus-visible-outline);
445
+ outline-offset: var(--button-info-focus-visible-outline-offset);
446
+ }
447
+ .pops button[data-type="info"]:disabled {
448
+ --button-color: var(--button-info-disabled-color);
449
+ --button-bd-color: var(--button-info-disabled-bd-color);
450
+ --button-bg-color: var(--button-info-disabled-bg-color);
451
+ }
452
+
453
+ .pops button[data-type="warning"] {
454
+ --button-color: var(--button-warning-color);
455
+ --button-bd-color: var(--button-warning-bd-color);
456
+ --button-bg-color: var(--button-warning-bg-color);
457
+ }
458
+ .pops button[data-type="warning"]:active {
459
+ --button-color: var(--button-warning-active-color);
460
+ --button-bd-color: var(--button-warning-active-bd-color);
461
+ --button-bg-color: var(--button-warning-active-bg-color);
462
+ }
463
+ .pops button[data-type="warning"]:hover {
464
+ --button-color: var(--button-warning-hover-color);
465
+ --button-bd-color: var(--button-warning-hover-bd-color);
466
+ --button-bg-color: var(--button-warning-hover-bg-color);
467
+ }
468
+ .pops button[data-type="warning"]:focus-visible {
469
+ outline: var(--button-warning-focus-visible-outline);
470
+ outline-offset: var(--button-warning-focus-visible-outline-offset);
471
+ }
472
+ .pops button[data-type="warning"]:disabled {
473
+ --button-color: var(--button-warning-disabled-color);
474
+ --button-bd-color: var(--button-warning-disabled-bd-color);
475
+ --button-bg-color: var(--button-warning-disabled-bg-color);
476
+ }
477
+
478
+ .pops button[data-type="danger"] {
479
+ --button-color: var(--button-danger-color);
480
+ --button-bd-color: var(--button-danger-bd-color);
481
+ --button-bg-color: var(--button-danger-bg-color);
482
+ }
483
+ .pops button[data-type="danger"]:active {
484
+ --button-color: var(--button-danger-active-color);
485
+ --button-bd-color: var(--button-danger-active-bd-color);
486
+ --button-bg-color: var(--button-danger-active-bg-color);
487
+ }
488
+ .pops button[data-type="danger"]:hover {
489
+ --button-color: var(--button-danger-hover-color);
490
+ --button-bd-color: var(--button-danger-hover-bd-color);
491
+ --button-bg-color: var(--button-danger-hover-bg-color);
492
+ }
493
+ .pops button[data-type="danger"]:focus-visible {
494
+ outline: var(--button-danger-focus-visible-outline);
495
+ outline-offset: var(--button-danger-focus-visible-outline-offset);
496
+ }
497
+ .pops button[data-type="danger"]:disabled {
498
+ --button-color: var(--button-danger-disabled-color);
499
+ --button-bd-color: var(--button-danger-disabled-bd-color);
500
+ --button-bg-color: var(--button-danger-disabled-bg-color);
501
+ }
502
+
503
+ .pops button[data-type="xiaomi-primary"] {
504
+ --button-color: var(--button-xiaomi-primary-color);
505
+ --button-bd-color: var(--button-xiaomi-primary-bd-color);
506
+ --button-bg-color: var(--button-xiaomi-primary-bg-color);
507
+ }
508
+ .pops button[data-type="xiaomi-primary"]:active {
509
+ --button-color: var(--button-xiaomi-primary-active-color);
510
+ --button-bd-color: var(--button-xiaomi-primary-active-bd-color);
511
+ --button-bg-color: var(--button-xiaomi-primary-active-bg-color);
512
+ }
513
+ .pops button[data-type="xiaomi-primary"]:hover {
514
+ --button-color: var(--button-xiaomi-primary-hover-color);
515
+ --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);
516
+ --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);
517
+ }
518
+ .pops button[data-type="xiaomi-primary"]:focus-visible {
519
+ outline: var(--button-xiaomi-primary-focus-visible-outline);
520
+ outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);
521
+ }
522
+ .pops button[data-type="xiaomi-primary"]:disabled {
523
+ --button-color: var(--button-xiaomi-primary-disabled-color);
524
+ --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);
525
+ --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);
526
+ }
527
+
528
+ .pops button[data-type="violet"] {
529
+ --button-color: var(--button-violet-color);
530
+ --button-bd-color: var(--button-violet-bd-color);
531
+ --button-bg-color: var(--button-violet-bg-color);
532
+ }
533
+ .pops button[data-type="violet"]:active {
534
+ --button-color: var(--button-violet-active-color);
535
+ --button-bd-color: var(--button-violet-active-bd-color);
536
+ --button-bg-color: var(--button-violet-active-bg-color);
537
+ }
538
+ .pops button[data-type="violet"]:hover {
539
+ --button-color: var(--button-violet-hover-color);
540
+ --button-bd-color: var(--button-violet-hover-bd-color);
541
+ --button-bg-color: var(--button-violet-hover-bg-color);
542
+ }
543
+ .pops button[data-type="violet"]:focus-visible {
544
+ outline: var(--button-violet-focus-visible-outline);
545
+ outline-offset: var(--button-violet-focus-visible-outline-offset);
546
+ }
547
+ .pops button[data-type="violet"]:disabled {
548
+ --button-color: var(--button-violet-disabled-color);
549
+ --button-bd-color: var(--button-violet-disabled-bd-color);
550
+ --button-bg-color: var(--button-violet-disabled-bg-color);
551
+ }
package/src/css/common.css ADDED
@@ -0,0 +1,48 @@
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
+ -webkit-user-select: none;
27
+ -moz-user-select: none;
28
+ -ms-user-select: none;
29
+ 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(--pops-text-is-disabled-color);
43
+ }
44
+ .pops-text-is-disabled-important {
45
+ --pops-text-is-disabled-color: #a8abb2;
46
+ color: var(--pops-text-is-disabled-color) !important;
47
+ --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;
48
+ }