@topvisor/ui 0.0.13 → 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 -206
  54. package/l/forms/forms.amd.js.map +0 -1
  55. package/l/forms/forms.js +0 -205
  56. package/l/forms/forms.js.map +0 -1
  57. package/l/style.css +0 -352
@@ -1,359 +1,408 @@
1
-
2
- /* стили этого компонента грузятся всегда: resources/styles/core/icon.css */
3
-
4
- ._example_1exbj_2 {
5
- background: var(--6eb2e862);
6
- }
7
- ._example_1exbj_2.top-active {
8
- background: green;
9
- }
10
- .top-button {
11
- cursor: pointer;
12
- box-shadow: var(--top-button-box-shadow);
13
- background-color: var(--top-button-background-color);
14
- height: var(--top-forms-base-height);
15
- padding: 0 var(--top-forms-padding);
16
- color: var(--top-button-color);
17
- line-height: 1;
18
- white-space: nowrap;
19
- display: inline-flex;
20
- align-items: center;
21
- justify-content: center;
22
-
1
+ .top-button {
2
+ cursor: pointer;
3
+ box-sizing: border-box;
4
+ box-shadow: var(--top-button-box-shadow);
5
+ border-radius: var(--top-forms-radius);
6
+ border: var(--top-forms-border-width) solid var(--top-forms-border-color);
7
+ background-color: var(--top-button-background-color);
8
+ height: var(--top-forms-base-height);
9
+ padding: 0 var(--top-forms-padding);
10
+ color: var(--top-button-color);
11
+ line-height: 1;
12
+ white-space: nowrap;
13
+ display: inline-flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+
23
17
  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
24
18
  }
25
- .top-button:hover {
26
- box-shadow: var(--top-button-box-shadow-hover);
19
+ .top-button:hover {
20
+ box-shadow: var(--top-button-box-shadow-hover);
27
21
  background-color: var(--top-button-background-color-hover);
28
22
  }
29
- .top-button:active {
30
- box-shadow: var(--top-button-box-shadow-active);
23
+ .top-button:active {
24
+ box-shadow: var(--top-button-box-shadow-active);
31
25
  background-color: var(--top-button-background-color-active);
32
26
  }
33
- .top-button.top-active {
34
- box-shadow: var(--top-button-box-shadow-selected);
27
+ .top-button.top-active {
28
+ box-shadow: var(--top-button-box-shadow-selected);
35
29
  background-color: var(--top-button-background-color-selected);
36
30
  }
37
- .top-button.top-button-progress {
38
- cursor: help;
39
- box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
40
- background-image:
41
- linear-gradient(-45deg,
42
- rgba(255, 255, 255, 0.2) 25%,
43
- transparent 25%,
44
- transparent 50%,
45
- rgba(255, 255, 255, 0.2) 50%,
46
- rgba(255, 255, 255, 0.2) 75%,
47
- transparent 75%,
48
- transparent);
49
- background-size: 32px 32px;
50
- animation: _progress_fevtt_1 1s linear infinite;
51
- }
52
- @keyframes _progress_fevtt_1 {
53
- 0% {
31
+ .top-button.top-button-progress {
32
+ cursor: help;
33
+ box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
34
+ background-image:
35
+ linear-gradient(-45deg,
36
+ rgba(255, 255, 255, 0.2) 25%,
37
+ transparent 25%,
38
+ transparent 50%,
39
+ rgba(255, 255, 255, 0.2) 50%,
40
+ rgba(255, 255, 255, 0.2) 75%,
41
+ transparent 75%,
42
+ transparent);
43
+ background-size: 32px 32px;
44
+ animation: _progress_1f1nw_1 1s linear infinite;
45
+ }
46
+ @keyframes _progress_1f1nw_1 {
47
+ 0% {
54
48
  background-position-x: 0px;
55
49
  }
56
- 100% {
50
+ 100% {
57
51
  background-position-x: 32px;
58
52
  }
59
53
  }
60
- a.top-button,
61
- button.top-button {
62
- min-width: 135px;
54
+ a.top-button,
55
+ button.top-button {
56
+ min-width: 135px;
63
57
  text-decoration: none;
64
58
  }
65
- a.top-button,
66
- a.top-button:hover {
67
- min-width: var(--top-forms-base-height);
59
+ a.top-button,
60
+ a.top-button:hover {
61
+ min-width: var(--top-forms-base-height);
68
62
  text-decoration: none;
69
63
  }
70
- .top-button[data-top-icon]:not(:empty),
71
- .top-button[data-top-icon2]:not(:empty) {
72
- justify-content: flex-start;
64
+ .top-button[data-top-icon]:not(:empty),
65
+ .top-button[data-top-icon2]:not(:empty) {
66
+ justify-content: flex-start;
73
67
  text-align: left;
74
68
  }
75
- .top-button[data-top-icon] {
69
+ .top-button[data-top-icon] {
76
70
  padding-left: 0;
77
71
  }
78
- .top-button[data-top-icon2] {
72
+ .top-button[data-top-icon2] {
79
73
  padding-right: var(--top-select_arrow-width);
80
74
  }
81
- .top-button[data-top-icon2]:after {
75
+ .top-button[data-top-icon2]:after {
82
76
  margin-left: auto;
83
77
  }
84
- .top-button:empty {
78
+ .top-button:empty {
85
79
  min-width: var(--top-forms-base-height);
86
80
  }
87
- .top-button[data-top-icon]:empty,
88
- .top-button[data-top-icon2]:empty {
81
+ .top-button[data-top-icon]:empty,
82
+ .top-button[data-top-icon2]:empty {
89
83
  padding: 0;
90
84
  }
91
- .top-button.top-color_blue {
85
+ .top-button.top-color_blue {
92
86
  --top-button-background-color: var(--color-blue-500);
93
87
  }
94
- .top-button.top-color_green {
88
+ .top-button.top-color_green {
95
89
  --top-button-background-color: var(--color-green-500);
96
90
  }
97
- .top-button.top-color_orange {
91
+ .top-button.top-color_orange {
98
92
  --top-button-background-color: var(--color-orange-500);
99
93
  }
100
- .top-button.top-color_red {
94
+ .top-button.top-color_red {
101
95
  --top-button-background-color: var(--color-red-500);
102
96
  }
103
- .top-button.top-color_pink {
97
+ .top-button.top-color_pink {
104
98
  --top-button-background-color: var(--color-pink-500);
105
99
  }
106
- .top-button.top-color_theme {
107
- --top-button-box-shadow-hover: none;
108
- --top-button-box-shadow-active: none;
109
- --top-button-box-shadow-selected: none;
110
-
111
- --top-icon-color: var(--color-text-2);
112
- --top-icon2-color: var(--color-text-2);
113
-
114
- --top-button-color: var(--color-text-1);
115
- --top-button-background-color: transparent;
116
- --top-button-background-color-hover: var(--color-secondary-opacity);
117
- --top-button-background-color-active: var(--color-secondary-2-opacity);
100
+ .top-button.top-color_theme {
101
+ --top-button-box-shadow-hover: none;
102
+ --top-button-box-shadow-active: none;
103
+ --top-button-box-shadow-selected: none;
104
+
105
+ --top-icon-color: var(--color-text-2);
106
+ --top-icon2-color: var(--color-text-2);
107
+
108
+ --top-button-color: var(--color-text-1);
109
+ --top-button-background-color: transparent;
110
+ --top-button-background-color-hover: var(--color-secondary-opacity);
111
+ --top-button-background-color-active: var(--color-secondary-2-opacity);
118
112
  --top-button-background-color-selected: var(--color-secondary-2-opacity);
119
113
  }
120
- .top-button.top-color_theme.top-active {
114
+ .top-button.top-color_theme.top-active {
121
115
  --top-icon-color: var(--color-text-2);
122
116
  }
123
- .top-button.top-style_outline {
124
- --top-button-box-shadow: none;
125
- --top-button-box-shadow-hover: none;
126
- --top-button-box-shadow-active: none;
127
- --top-button-box-shadow-selected: none;
128
-
129
- --top-forms-border-color: var(--top-style_outline-color);
130
-
131
- --top-style_outline-color: var(--color-steel-400);
132
-
133
- --top-button-color: var(--top-style_outline-color);
134
- --top-button-background-color: var(--content-background-color);
135
- --top-button-background-color-hover: var(--color-theme-100);
136
- --top-button-background-color-active: var(--color-theme-150);
137
- --top-button-background-color-selected: var(--color-theme-125);
138
-
117
+ .top-button.top-style_outline {
118
+ --top-button-box-shadow: none;
119
+ --top-button-box-shadow-hover: none;
120
+ --top-button-box-shadow-active: none;
121
+ --top-button-box-shadow-selected: none;
122
+
123
+ --top-forms-border-color: var(--top-style_outline-color);
124
+
125
+ --top-style_outline-color: var(--color-steel-400);
126
+
127
+ --top-button-color: var(--top-style_outline-color);
128
+ --top-button-background-color: var(--content-background-color);
129
+ --top-button-background-color-hover: var(--color-theme-100);
130
+ --top-button-background-color-active: var(--color-theme-150);
131
+ --top-button-background-color-selected: var(--color-theme-125);
132
+
139
133
  --top-forms-border-width: 1px;
140
134
  }
141
- .top-button.top-style_outline.top-color_theme {
135
+ .top-button.top-style_outline.top-color_theme {
142
136
  --top-button-color: var(--color-text);
143
137
  }
144
- .top-button.top-style_outline.top-color_blue {
138
+ .top-button.top-style_outline.top-color_blue {
145
139
  --top-style_outline-color: var(--color-blue-500);
146
140
  }
147
- .top-button.top-style_outline.top-color_green {
141
+ .top-button.top-style_outline.top-color_green {
148
142
  --top-style_outline-color: var(--color-green-500);
149
143
  }
150
- .top-button.top-style_outline.top-color_orange {
144
+ .top-button.top-style_outline.top-color_orange {
151
145
  --top-style_outline-color: var(--color-orange-500);
152
146
  }
153
- .top-button.top-style_outline.top-color_red {
147
+ .top-button.top-style_outline.top-color_red {
154
148
  --top-style_outline-color: var(--color-red-500);
155
149
  }
156
- .top-button.top-style_outline.top-color_pink {
150
+ .top-button.top-style_outline.top-color_pink {
157
151
  --top-style_outline-color: var(--color-pink-500);
158
152
  }
159
- .top-button.top-style_soft {
160
- --top-shadow-darken: none;
161
- --top-shadow-darken-2: none;
162
- --top-shadow-darken-3: none;
163
-
164
- --top-button-color: var(--color-text);
165
- --top-button-background-color: var(--color-secondary-opacity);
166
- --top-button-background-color-hover: var(--color-secondary-2-opacity);
167
- --top-button-background-color-active: var(--color-secondary-3-opacity);
153
+ .top-button.top-style_soft {
154
+ --top-shadow-darken: none;
155
+ --top-shadow-darken-2: none;
156
+ --top-shadow-darken-3: none;
157
+
158
+ --top-button-color: var(--color-text);
159
+ --top-button-background-color: var(--color-secondary-opacity);
160
+ --top-button-background-color-hover: var(--color-secondary-2-opacity);
161
+ --top-button-background-color-active: var(--color-secondary-3-opacity);
168
162
  --top-button-background-color-selected: var(--color-secondary-3-opacity);
169
163
  }
170
- .top-button.top-style_soft.top-color_blue {
164
+ .top-button.top-style_soft.top-color_blue {
171
165
  --top-button-color: var(--color-blue-500);
172
166
  }
173
- .top-button.top-style_soft.top-color_orange {
167
+ .top-button.top-style_soft.top-color_orange {
174
168
  --top-button-color: var(--color-orange-500);
175
169
  }
176
- .top-button.top-style_soft.top-color_green {
170
+ .top-button.top-style_soft.top-color_green {
177
171
  --top-button-color: var(--color-green-500);
178
172
  }
179
- .top-button.top-style_soft.top-color_red {
173
+ .top-button.top-style_soft.top-color_red {
180
174
  --top-button-color: var(--color-red-500);
181
175
  }
182
- .top-button.top-style_soft.top-color_pink {
176
+ .top-button.top-style_soft.top-color_pink {
183
177
  --top-button-color: var(--color-pink-500);
184
178
  }
185
- .top-button.top-style_transparent {
186
- --top-shadow-darken: none;
187
- --top-shadow-darken-2: none;
188
- --top-shadow-darken-3: none;
189
-
190
- --top-button-color: var(--color-text);
191
- --top-button-background-color: transparent;
192
- --top-button-background-color-hover: transparent;
193
- --top-button-background-color-active: transparent;
179
+ .top-button.top-style_transparent {
180
+ --top-shadow-darken: none;
181
+ --top-shadow-darken-2: none;
182
+ --top-shadow-darken-3: none;
183
+
184
+ --top-button-color: var(--color-text);
185
+ --top-button-background-color: transparent;
186
+ --top-button-background-color-hover: transparent;
187
+ --top-button-background-color-active: transparent;
194
188
  --top-button-background-color-selected: var(--color-steel-200);
195
189
  }
196
- .top-button.top-style_transparent:hover {
190
+ .top-button.top-style_transparent:hover {
197
191
  opacity: 0.8;
198
192
  }
199
- .top-button.top-style_transparent.top-color_blue {
193
+ .top-button.top-style_transparent.top-color_blue {
200
194
  --top-button-color: var(--color-blue-450);
201
195
  }
202
- .top-button.top-style_transparent.top-color_green {
196
+ .top-button.top-style_transparent.top-color_green {
203
197
  --top-button-color: var(--color-green-450);
204
198
  }
205
- .top-button.top-style_transparent.top-color_orange {
199
+ .top-button.top-style_transparent.top-color_orange {
206
200
  --top-button-color: var(--color-orange-450);
207
201
  }
208
- .top-button.top-style_transparent.top-color_red {
202
+ .top-button.top-style_transparent.top-color_red {
209
203
  --top-button-color: var(--color-red-450);
210
204
  }
211
- .top-button.top-style_transparent.top-color_pink {
205
+ .top-button.top-style_transparent.top-color_pink {
212
206
  --top-button-color: var(--color-pink-450);
213
207
  }
214
- .top-button {
215
- --top-button-color: var(--color-white);
216
- --top-button-background-color: transparent;
217
- --top-button-background-color-hover: var(--top-button-background-color);
218
- --top-button-background-color-active: var(--top-button-background-color-hover);
219
- --top-button-background-color-selected: var(--top-button-background-color-hover);
220
- --top-button-box-shadow: none;
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));
208
+ .top-button {
209
+ --top-button-color: var(--color-white);
210
+ --top-button-background-color: transparent;
211
+ --top-button-background-color-hover: var(--top-button-background-color);
212
+ --top-button-background-color-active: var(--top-button-background-color-hover);
213
+ --top-button-background-color-selected: var(--top-button-background-color-hover);
214
+ --top-button-box-shadow: none;
215
+ --top-button-box-shadow-hover: var(--top-shadow-darken-2);
216
+ --top-button-box-shadow-active: var(--top-shadow-darken-3);
217
+ --top-button-box-shadow-selected: var(--top-shadow-darken-3);
218
+ --top-forms-border-width: 0px;
219
+ --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
226
220
  --top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
227
221
  }
228
- .top-button.top-size_l {
229
- --top-forms-padding: var(--top-forms-padding_l);
222
+ .top-button.top-size_l {
223
+ --top-forms-padding: var(--top-forms-padding_l);
230
224
  --top-forms-base-height: var(--top-forms-base-height_l);
231
225
  }
232
- .top-button.top-size_xl {
233
- --top-forms-padding: var(--top-forms-padding_xl);
226
+ .top-button.top-size_xl {
227
+ --top-forms-padding: var(--top-forms-padding_xl);
234
228
  --top-forms-base-height: var(--top-forms-base-height_xl);
235
- }
236
- .top-button-progress {}
229
+ }
237
230
 
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";
231
+ .top-forms-optionLabel_title {
232
+ min-height: var(--top-forms-option-height);
233
+ display: flex; align-items: center;
234
+ }
235
+ .top-forms-optionLabel_description {
236
+ color: var(--color-text-3);
237
+ font-size: 0.85em;
238
+ line-height: var(--top-forms-option-height);
239
+ }
240
+
241
+ .top-checkbox {
242
+ cursor: pointer;
243
+ display: inline-flex;
245
244
  }
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;
245
+ .top-checkbox_input {
246
+ cursor: inherit;
251
247
  border-radius: 4px;
252
248
  background: var(--content-background-color);
253
- border: 1px solid var(--color-gray-200);
254
- width: 16px;
255
- height: 16px;
249
+ border: 1px solid var(--top-forms-border-color);
250
+ width: calc(var(--top-forms-option-height) - 3px * 2);
251
+ height: calc(var(--top-forms-option-height) - 3px * 2);
252
+ }
253
+ .top-checkbox_input:before {
254
+ content: ' ';
256
255
  color: #FFF;
257
- text-indent: 0px;
258
- font-family: 'Topvisor-2';
256
+ font-family: 'Topvisor-2';
257
+ font-size: 16px;
258
+ }
259
+ .top-checkbox_input:not(:checked):not(:indeterminate):hover {
260
+ border-color: var(--top-forms-option-color);
261
+ background: var(--color-theme-50)
262
+ }
263
+
264
+ /* checked / indeterminate */
265
+ .top-checkbox_input:checked,
266
+ .top-checkbox_input:indeterminate {
267
+ border-color: var(--top-forms-option-color);
268
+ background: var(--top-forms-option-color);
269
+ }
270
+ .top-checkbox_input:checked:before {
271
+ content: '';
272
+ }
273
+ .top-checkbox_input:indeterminate:before {
274
+ content: '';
275
+ }
276
+ .top-checkbox_input:checked:hover,
277
+ .top-checkbox_input:indeterminate:hover {
278
+ border-color: var(--top-forms-option-color-hover);
279
+ background: var(--top-forms-option-color-hover);
280
+ }
281
+
282
+ /* disabled */
283
+ .top-checkbox_input:checked:disabled,
284
+ .top-checkbox_input:indeterminate:disabled {
285
+ border-color: transparent;
286
+ background: var(--color-theme-400);
287
+ }
288
+
289
+ /* isError */
290
+ .top-checkbox_input.top-error {
291
+ border-color: var(--color-negative) !important;
259
292
  }
260
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher)[title]:after {
261
- margin: 0 0 0 8px;
293
+ .top-checkbox_input:checked.top-error,
294
+ .top-checkbox_input:indeterminate.top-error {
295
+ background: var(--color-negative);
296
+ }
297
+
298
+ .top-input {
299
+ width: 180px;
300
+ display: inline-flex;
301
+ align-items: center;
302
+ gap: var(--top-gap-1);
262
303
  }
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)
304
+ .top-input_input {
305
+ background: var(--top-forms-background-color);
266
306
  }
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);
307
+ .top-input_input:hover {
308
+ background: var(--top-forms-background-color-hover);
272
309
  }
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);
310
+ .top-input_input:focus {
311
+ outline-color: var(--color-theme-75);
312
+ outline-offset: 0px;
277
313
  }
278
- [type="checkbox"].top-el:indeterminate:before {
279
- --top-checkbox-symbol: '';
314
+ .top-input-withCleaner .top-input_input:not(:placeholder-shown) {
315
+ --top-forms_clear-width: 24px;
280
316
  }
281
317
 
282
- /* top-checkbox_input-switcher */
283
- [type="checkbox"].top-checkbox_input-switcher {
284
- line-height: 1;
285
- }
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;
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);
318
+ /* TODO: перенести в inputsRange */
319
+ .top-input_input {
320
+ width: 50%;
321
+ flex-grow: 1;
322
+ }
323
+ .top-input[data-top-icon]:before {
324
+ --top-icon-color: var(--color-text-secondary);
327
325
  }
328
326
 
329
- :root {
330
- --top-radio-background-color: var(--content-background-color);
331
- --top-radio-background-color-hover: var(--top-radio-background-color);
327
+ :root {
328
+ --top-radio-background-color: var(--content-background-color);
329
+ --top-radio-background-color-hover: var(--top-radio-background-color);
332
330
  --top-radio-background-color-active: var(--top-radio-background-color);
333
331
  }
334
- .top-radio {
332
+ .top-radio {
335
333
  cursor: pointer;
336
334
  }
337
- [type="radio"].top-el:before {
338
- content: ' ';
339
- border-radius: 100%;
340
- border: 1px solid var(--color-gray-200);
341
- width: 16px;
342
- height: 16px;
343
- }
344
- [type="radio"].top-el:hover:before,
345
- .top-radio:hover > [type="radio"].top-el:before {
346
- border-color: var(--top-radio-color-hover);
347
- }
348
- [type="radio"].top-el:checked:before {
349
- box-shadow:
350
- var(--top-radio-background-color) 1px 1px 0 inset,
351
- var(--top-radio-background-color) -1px -1px 0 inset,
352
- var(--top-radio-background-color) 1px -1px 0 inset,
353
- var(--top-radio-background-color) -1px 1px 0 inset;
354
- background: var(--top-radio-color);
355
- border-color: var(--top-radio-color);
356
- }
357
- [type="radio"].top-el[title]:after {
358
- margin: 0 0 0 8px;
335
+ .top-radio_input {
336
+ border-radius: 50%;
337
+ background: var(--content-background-color);
338
+ border: 1px solid var(--top-forms-border-color);
339
+ width: calc(var(--top-forms-option-height) - 3px * 2);
340
+ height: calc(var(--top-forms-option-height) - 3px * 2);
341
+ }
342
+ .top-radio_input:hover {
343
+ border-color: var(--top-forms-option-color);
359
344
  }
345
+ .top-radio_input:checked {
346
+ border-color: var(--top-forms-option-color);
347
+ border-width: 5px;
348
+ }
349
+ .top-radio_input:checked:hover {
350
+ border-color: var(--top-forms-option-color-hover);
351
+ }
352
+
353
+ /* isError */
354
+ .top-radio_input.top-error,
355
+ .top-radio_input:checked.top-error {
356
+ border-color: var(--color-negative);
357
+ }
358
+
359
+ .top-checkboxSwitcher {
360
+ cursor: pointer;
361
+ display: inline-flex;
362
+ gap: 4px;
363
+ }
364
+ .top-checkboxSwitcher_input {
365
+ border-radius: 9px;
366
+ border: none;
367
+ background: var(--color-theme-100);
368
+ width: 36px;
369
+ height: 18px;
370
+ position: relative;
371
+ }
372
+ .top-checkboxSwitcher_input:before {
373
+ content: '';
374
+ border-radius: 50%;
375
+ background: var(--color-white);
376
+ width: 12px;
377
+ height: 12px;
378
+ margin: 3px;
379
+ position: absolute;
380
+ top: 0;
381
+ left: 0;
382
+
383
+ transition: left 0.1s;
384
+ }
385
+ .top-checkboxSwitcher_input:hover {
386
+ background: var(--color-theme-150);
387
+ }
388
+
389
+ /* checked */
390
+ .top-checkboxSwitcher_input:checked {
391
+ background: var(--top-forms-option-color);
392
+ }
393
+ .top-checkboxSwitcher_input:checked:hover {
394
+ background: var(--top-forms-option-color-hover);
395
+ }
396
+ .top-checkboxSwitcher_input:checked:before {
397
+ left: 50%;
398
+ }
399
+
400
+ /* disabled */
401
+ .top-checkboxSwitcher_input:disabled {
402
+ background: var(--color-theme-400);
403
+ }
404
+
405
+ /* isError */
406
+ .top-checkboxSwitcher_input.top-error {
407
+ background: var(--color-negative) !important;
408
+ }
@@ -0,0 +1,6 @@
1
+ define(["exports", "../.chunks/forms-512abfa7.amd", "vue"], function(exports, forms, vue) {
2
+ "use strict"; vue = vue ?? Vue;
3
+ exports.SIZE = forms.SIZE;
4
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
5
+ });
6
+ //# sourceMappingURL=helpers.amd.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helpers.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
@@ -0,0 +1,6 @@
1
+ import { S } from "../.chunks/forms-1b3f76e9.es.js";
2
+ import "vue";
3
+ export {
4
+ S as SIZE
5
+ };
6
+ //# sourceMappingURL=helpers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}