@topvisor/ui 0.0.9 → 0.0.11

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