@topvisor/ui 0.0.12 → 0.0.14

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 (57) hide show
  1. package/.chunks/forms-1b3f76e9.es.js +410 -0
  2. package/.chunks/forms-1b3f76e9.es.js.map +1 -0
  3. package/.chunks/forms-512abfa7.amd.js +413 -0
  4. package/.chunks/forms-512abfa7.amd.js.map +1 -0
  5. package/README.md +62 -85
  6. package/{l/common → common}/common.amd.js +0 -1
  7. package/{l/common → common}/common.amd.js.map +1 -1
  8. package/{l/common → common}/common.js +0 -1
  9. package/{l/common → common}/common.js.map +1 -1
  10. package/core.css +442 -371
  11. package/dark.css +127 -115
  12. package/forms/forms.amd.js +11 -0
  13. package/forms/forms.amd.js.map +1 -0
  14. package/forms/forms.js +11 -0
  15. package/forms/forms.js.map +1 -0
  16. package/{c/style.css → forms.css} +301 -252
  17. package/helpers/helpers.amd.js +6 -0
  18. package/helpers/helpers.amd.js.map +1 -0
  19. package/helpers/helpers.js +6 -0
  20. package/helpers/helpers.js.map +1 -0
  21. package/icomoon/demo-files/Read Me.txt +7 -7
  22. package/icomoon/demo-files/demo.css +161 -161
  23. package/icomoon/demo-files/demo.js +30 -30
  24. package/icomoon/demo.html +2931 -2931
  25. package/icomoon/fonts/Topvisor-2.svg +231 -231
  26. package/icomoon/style.css +644 -644
  27. package/light.css +127 -128
  28. package/package.json +19 -19
  29. package/c/_plugin-vue_export-helper-cb5c78ba.js +0 -12
  30. package/c/_plugin-vue_export-helper-cb5c78ba.js.map +0 -1
  31. package/c/_plugin-vue_export-helper-cc2b3d55.js +0 -11
  32. package/c/_plugin-vue_export-helper-cc2b3d55.js.map +0 -1
  33. package/c/button/button.amd.js +0 -99
  34. package/c/button/button.amd.js.map +0 -1
  35. package/c/button/button.js +0 -100
  36. package/c/button/button.js.map +0 -1
  37. package/c/checkbox/checkbox.amd.js +0 -58
  38. package/c/checkbox/checkbox.amd.js.map +0 -1
  39. package/c/checkbox/checkbox.js +0 -59
  40. package/c/checkbox/checkbox.js.map +0 -1
  41. package/c/example/example.amd.js +0 -35
  42. package/c/example/example.amd.js.map +0 -1
  43. package/c/example/example.js +0 -36
  44. package/c/example/example.js.map +0 -1
  45. package/c/icon/icon.amd.js +0 -22
  46. package/c/icon/icon.amd.js.map +0 -1
  47. package/c/icon/icon.js +0 -22
  48. package/c/icon/icon.js.map +0 -1
  49. package/c/radio/radio.amd.js +0 -49
  50. package/c/radio/radio.amd.js.map +0 -1
  51. package/c/radio/radio.js +0 -50
  52. package/c/radio/radio.js.map +0 -1
  53. package/l/forms/forms.amd.js +0 -161
  54. package/l/forms/forms.amd.js.map +0 -1
  55. package/l/forms/forms.js +0 -160
  56. package/l/forms/forms.js.map +0 -1
  57. package/l/style.css +0 -320
package/l/style.css DELETED
@@ -1,320 +0,0 @@
1
-
2
- /* стили этого компонента грузятся всегда: resources/styles/core/icon.css */
3
- .top-button {
4
- cursor: pointer;
5
- box-shadow: var(--top-button-box-shadow);
6
- background-color: var(--top-button-background-color);
7
- height: var(--top-forms-base-height);
8
- padding: 0 var(--top-forms-padding);
9
- color: var(--top-button-color);
10
- line-height: 1;
11
- white-space: nowrap;
12
- display: inline-flex;
13
- align-items: center;
14
- justify-content: center;
15
-
16
- transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
17
- }
18
- .top-button:hover {
19
- box-shadow: var(--top-button-box-shadow-hover);
20
- background-color: var(--top-button-background-color-hover);
21
- }
22
- .top-button:active {
23
- box-shadow: var(--top-button-box-shadow-active);
24
- background-color: var(--top-button-background-color-active);
25
- }
26
- .top-button.top-active {
27
- box-shadow: var(--top-button-box-shadow-selected);
28
- background-color: var(--top-button-background-color-selected);
29
- }
30
- .top-button.top-button-progress {
31
- cursor: help;
32
- box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
33
- background-image:
34
- linear-gradient(-45deg,
35
- rgba(255, 255, 255, 0.2) 25%,
36
- transparent 25%,
37
- transparent 50%,
38
- rgba(255, 255, 255, 0.2) 50%,
39
- rgba(255, 255, 255, 0.2) 75%,
40
- transparent 75%,
41
- transparent);
42
- background-size: 32px 32px;
43
- animation: _progress_fevtt_1 1s linear infinite;
44
- }
45
- @keyframes _progress_fevtt_1 {
46
- 0% {
47
- background-position-x: 0px;
48
- }
49
- 100% {
50
- background-position-x: 32px;
51
- }
52
- }
53
- a.top-button,
54
- button.top-button {
55
- min-width: 135px;
56
- text-decoration: none;
57
- }
58
- a.top-button,
59
- a.top-button:hover {
60
- min-width: var(--top-forms-base-height);
61
- text-decoration: none;
62
- }
63
- .top-button[data-top-icon]:not(:empty),
64
- .top-button[data-top-icon2]:not(:empty) {
65
- justify-content: flex-start;
66
- text-align: left;
67
- }
68
- .top-button[data-top-icon] {
69
- padding-left: 0;
70
- }
71
- .top-button[data-top-icon2] {
72
- padding-right: var(--top-select_arrow-width);
73
- }
74
- .top-button[data-top-icon2]:after {
75
- margin-left: auto;
76
- }
77
- .top-button:empty {
78
- min-width: var(--top-forms-base-height);
79
- }
80
- .top-button[data-top-icon]:empty,
81
- .top-button[data-top-icon2]:empty {
82
- padding: 0;
83
- }
84
- .top-button.top-color_blue {
85
- --top-button-background-color: var(--color-blue-500);
86
- }
87
- .top-button.top-color_green {
88
- --top-button-background-color: var(--color-green-500);
89
- }
90
- .top-button.top-color_orange {
91
- --top-button-background-color: var(--color-orange-500);
92
- }
93
- .top-button.top-color_red {
94
- --top-button-background-color: var(--color-red-500);
95
- }
96
- .top-button.top-color_pink {
97
- --top-button-background-color: var(--color-pink-500);
98
- }
99
- .top-button.top-color_theme {
100
- --top-button-box-shadow-hover: none;
101
- --top-button-box-shadow-active: none;
102
- --top-button-box-shadow-selected: none;
103
-
104
- --top-icon-color: var(--color-text-2);
105
- --top-icon2-color: var(--color-text-2);
106
-
107
- --top-button-color: var(--color-text-1);
108
- --top-button-background-color: transparent;
109
- --top-button-background-color-hover: var(--color-secondary-opacity);
110
- --top-button-background-color-active: var(--color-secondary-2-opacity);
111
- --top-button-background-color-selected: var(--color-secondary-2-opacity);
112
- }
113
- .top-button.top-color_theme.top-active {
114
- --top-icon-color: var(--color-text-2);
115
- }
116
- .top-button.top-style_outline {
117
- --top-button-box-shadow: none;
118
- --top-button-box-shadow-hover: none;
119
- --top-button-box-shadow-active: none;
120
- --top-button-box-shadow-selected: none;
121
-
122
- --top-forms-border-color: var(--top-style_outline-color);
123
-
124
- --top-style_outline-color: var(--color-steel-400);
125
-
126
- --top-button-color: var(--top-style_outline-color);
127
- --top-button-background-color: var(--content-background-color);
128
- --top-button-background-color-hover: var(--color-theme-100);
129
- --top-button-background-color-active: var(--color-theme-150);
130
- --top-button-background-color-selected: var(--color-theme-125);
131
-
132
- --top-forms-border-width: 1px;
133
- }
134
- .top-button.top-style_outline.top-color_theme {
135
- --top-button-color: var(--color-text);
136
- }
137
- .top-button.top-style_outline.top-color_blue {
138
- --top-style_outline-color: var(--color-blue-500);
139
- }
140
- .top-button.top-style_outline.top-color_green {
141
- --top-style_outline-color: var(--color-green-500);
142
- }
143
- .top-button.top-style_outline.top-color_orange {
144
- --top-style_outline-color: var(--color-orange-500);
145
- }
146
- .top-button.top-style_outline.top-color_red {
147
- --top-style_outline-color: var(--color-red-500);
148
- }
149
- .top-button.top-style_outline.top-color_pink {
150
- --top-style_outline-color: var(--color-pink-500);
151
- }
152
- .top-button.top-style_soft {
153
- --top-shadow-darken: none;
154
- --top-shadow-darken-2: none;
155
- --top-shadow-darken-3: none;
156
-
157
- --top-button-color: var(--color-text);
158
- --top-button-background-color: var(--color-secondary-opacity);
159
- --top-button-background-color-hover: var(--color-secondary-2-opacity);
160
- --top-button-background-color-active: var(--color-secondary-3-opacity);
161
- --top-button-background-color-selected: var(--color-secondary-3-opacity);
162
- }
163
- .top-button.top-style_soft.top-color_blue {
164
- --top-button-color: var(--color-blue-500);
165
- }
166
- .top-button.top-style_soft.top-color_orange {
167
- --top-button-color: var(--color-orange-500);
168
- }
169
- .top-button.top-style_soft.top-color_green {
170
- --top-button-color: var(--color-green-500);
171
- }
172
- .top-button.top-style_soft.top-color_red {
173
- --top-button-color: var(--color-red-500);
174
- }
175
- .top-button.top-style_soft.top-color_pink {
176
- --top-button-color: var(--color-pink-500);
177
- }
178
- .top-button.top-style_transparent {
179
- --top-shadow-darken: none;
180
- --top-shadow-darken-2: none;
181
- --top-shadow-darken-3: none;
182
-
183
- --top-button-color: var(--color-text);
184
- --top-button-background-color: transparent;
185
- --top-button-background-color-hover: transparent;
186
- --top-button-background-color-active: transparent;
187
- --top-button-background-color-selected: var(--color-steel-200);
188
- }
189
- .top-button.top-style_transparent:hover {
190
- opacity: 0.8;
191
- }
192
- .top-button.top-style_transparent.top-color_blue {
193
- --top-button-color: var(--color-blue-450);
194
- }
195
- .top-button.top-style_transparent.top-color_green {
196
- --top-button-color: var(--color-green-450);
197
- }
198
- .top-button.top-style_transparent.top-color_orange {
199
- --top-button-color: var(--color-orange-450);
200
- }
201
- .top-button.top-style_transparent.top-color_red {
202
- --top-button-color: var(--color-red-450);
203
- }
204
- .top-button.top-style_transparent.top-color_pink {
205
- --top-button-color: var(--color-pink-450);
206
- }
207
- .top-button {
208
- --top-button-color: var(--color-white);
209
- --top-button-background-color: transparent;
210
- --top-button-background-color-hover: var(--top-button-background-color);
211
- --top-button-background-color-active: var(--top-button-background-color-hover);
212
- --top-button-background-color-selected: var(--top-button-background-color-hover);
213
- --top-button-box-shadow: none;
214
- --top-button-box-shadow-hover: var(--top-shadow-darken-2);
215
- --top-button-box-shadow-active: var(--top-shadow-darken-3);
216
- --top-button-box-shadow-selected: var(--top-shadow-darken-3);
217
- --top-forms-border-width: 0px;
218
- --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
219
- --top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
220
- }
221
- .top-button.top-size_l {
222
- --top-forms-padding: var(--top-forms-padding_l);
223
- --top-forms-base-height: var(--top-forms-base-height_l);
224
- }
225
- .top-button.top-size_xl {
226
- --top-forms-padding: var(--top-forms-padding_xl);
227
- --top-forms-base-height: var(--top-forms-base-height_xl);
228
- }
229
- .top-button-progress {}
230
-
231
- [type="checkbox"].top-el:before {
232
- --top-checkbox-color: var(--top-radio-color);
233
- --top-checkbox-color-hover: var(--top-radio-color-hover);
234
-
235
- --top-checkbox-symbol: '';
236
-
237
- font-family: "Topvisor-2";
238
- }
239
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):before {
240
- content: ' ';
241
- text-align: center;
242
- line-height: 16px;
243
- font-size: 16px;
244
- border-radius: 4px;
245
- background: var(--content-background-color);
246
- border: 1px solid var(--color-gray-200);
247
- width: 16px;
248
- height: 16px;
249
- color: #FFF;
250
- text-indent: 0px;
251
- font-family: 'Topvisor-2';
252
- }
253
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher)[title]:after {
254
- margin: 0 0 0 8px;
255
- }
256
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):not(:checked):not(:disabled):not(:indeterminate):hover:before {
257
- border-color: var(--color-gray-400);
258
- background: var(--color-steel-150)
259
- }
260
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):checked:before,
261
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):indeterminate:before {
262
- content: var(--top-checkbox-symbol);
263
- border-color: var(--top-checkbox-color);
264
- background: var(--top-checkbox-color);
265
- }
266
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):checked:not(:disabled):hover:before,
267
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher):indeterminate:not(:disabled):hover:before {
268
- border-color: var(--top-checkbox-color-hover);
269
- background: var(--top-checkbox-color-hover);
270
- }
271
- [type="checkbox"].top-el:indeterminate:before {
272
- --top-checkbox-symbol: '';
273
- }
274
-
275
- /* top-checkbox_input-switcher */
276
- [type="checkbox"].top-checkbox_input-switcher {
277
- line-height: 1;
278
- }
279
- [type="checkbox"].top-checkbox_input-switcher:before {
280
- --top-checkbox-background-color: var(--color-theme-200);
281
- --top-checkbox-background-color-hover: var(--color-theme-300);
282
- --top-checkbox-background-color-checked: var(--top-radio-color);
283
- --top-checkbox-background-color-checked-hover: var(--top-radio-color-hover);
284
-
285
- --top-checkbox_input-switcher-color: #FFF;
286
- --top-checkbox_input-switcher-color-hover: #FFF;
287
- --top-checkbox_input-switcher-color-checked: #FFF;
288
- --top-checkbox_input-switcher-color-checked-hover: #FFF;
289
-
290
- --top-checkbox-symbol: '';
291
-
292
- transition: text-indent 50ms;
293
- content: var(--top-checkbox-symbol);
294
- border-radius: 9px;
295
- background: var(--top-checkbox-background-color);
296
- width: 30px;
297
- padding: 0 1px;
298
- color: var(--top-checkbox_input-switcher-color);
299
- font-family: Topvisor-2;
300
- font-size: 16px;
301
- line-height: 16px;
302
- text-indent: -1px;
303
- display: inline-block;
304
- }
305
- [type="checkbox"].top-checkbox_input-switcher:not(:disabled):hover:before {
306
- background: var(--top-checkbox-background-color-hover);
307
- color: var(--top-checkbox_input-switcher-color-hover);
308
- }
309
- [type="checkbox"].top-checkbox_input-switcher:after {
310
- white-space: nowrap;
311
- }
312
- [type="checkbox"].top-checkbox_input-switcher:checked:before {
313
- background: var(--top-checkbox-background-color-checked);
314
- color: var(--top-checkbox_input-switcher-color-checked);
315
- text-indent: 15px;
316
- }
317
- [type="checkbox"].top-checkbox_input-switcher:not(:disabled):checked:hover:before {
318
- background: var(--top-checkbox-background-color-checked-hover);
319
- color: var(--top-checkbox_input-switcher-color-checked-hover);
320
- }