@topvisor/ui 0.0.13 → 0.0.15

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-2abb7eaa.amd.js +425 -0
  2. package/.chunks/forms-2abb7eaa.amd.js.map +1 -0
  3. package/.chunks/forms-5e17154c.es.js +422 -0
  4. package/.chunks/forms-5e17154c.es.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 +659 -574
  11. package/dark.css +135 -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} +307 -251
  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 +135 -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,415 @@
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);
229
+ }
230
+
231
+ .top-forms-optionLabel {
232
+ flex-grow: 1;
233
+ }
234
+ .top-forms-optionLabel_title {
235
+ min-height: var(--top-forms-option-height);
236
+ display: flex;
237
+ align-items: center;
238
+ }
239
+ .top-forms-optionLabel_title-disabled {
240
+ color: var(--color-text-3);
235
241
  }
236
- .top-button-progress {}
242
+ .top-forms-optionLabel_description {
243
+ color: var(--color-text-3);
244
+ font-size: 0.85em;
245
+ line-height: var(--top-forms-option-height);
246
+ }
237
247
 
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";
248
+ .top-checkbox {
249
+ cursor: pointer;
250
+ display: inline-flex;
245
251
  }
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;
252
+ .top-checkbox_input {
253
+ cursor: inherit;
251
254
  border-radius: 4px;
252
255
  background: var(--content-background-color);
253
- border: 1px solid var(--color-gray-200);
254
- width: 16px;
255
- height: 16px;
256
+ border: 1px solid var(--top-forms-border-color);
257
+ width: calc(var(--top-forms-option-height) - 3px * 2);
258
+ height: calc(var(--top-forms-option-height) - 3px * 2);
259
+ }
260
+ .top-checkbox_input:before {
261
+ content: ' ';
256
262
  color: #FFF;
257
- text-indent: 0px;
258
- font-family: 'Topvisor-2';
263
+ font-family: 'Topvisor-2';
264
+ font-size: 16px;
259
265
  }
260
- [type="checkbox"].top-el:not(.top-checkbox_input-switcher)[title]:after {
261
- margin: 0 0 0 8px;
266
+ .top-checkbox_input:not(:checked):not(:indeterminate):hover {
267
+ border-color: var(--top-forms-option-color);
268
+ background: var(--color-theme-50)
269
+ }
270
+
271
+ /* checked / indeterminate */
272
+ .top-checkbox_input:checked,
273
+ .top-checkbox_input:indeterminate {
274
+ border-color: var(--top-forms-option-color);
275
+ background: var(--top-forms-option-color);
276
+ }
277
+ .top-checkbox_input:checked:before {
278
+ content: '';
279
+ }
280
+ .top-checkbox_input:indeterminate:before {
281
+ content: '';
282
+ }
283
+ .top-checkbox_input:checked:hover,
284
+ .top-checkbox_input:indeterminate:hover {
285
+ border-color: var(--top-forms-option-color-hover);
286
+ background: var(--top-forms-option-color-hover);
287
+ }
288
+
289
+ /* disabled */
290
+ .top-checkbox_input:checked:disabled,
291
+ .top-checkbox_input:indeterminate:disabled {
292
+ border-color: transparent;
293
+ background: var(--color-theme-400);
294
+ }
295
+
296
+ /* isError */
297
+ .top-checkbox_input.top-error {
298
+ border-color: var(--color-negative) !important;
262
299
  }
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)
300
+ .top-checkbox_input:checked.top-error,
301
+ .top-checkbox_input:indeterminate.top-error {
302
+ background: var(--color-negative);
303
+ }
304
+
305
+ .top-input {
306
+ width: 180px;
307
+ display: inline-flex;
308
+ align-items: center;
309
+ gap: var(--top-gap-1);
310
+ }
311
+ .top-input_input {
312
+ background: var(--top-forms-background-color);
266
313
  }
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);
314
+ .top-input_input:hover {
315
+ background: var(--top-forms-background-color-hover);
272
316
  }
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);
317
+ .top-input_input:focus {
318
+ outline-color: var(--color-theme-75);
319
+ outline-offset: 0px;
277
320
  }
278
- [type="checkbox"].top-el:indeterminate:before {
279
- --top-checkbox-symbol: '';
321
+ .top-input-withCleaner .top-input_input:not(:placeholder-shown) {
322
+ --top-forms_clear-width: 24px;
280
323
  }
281
324
 
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);
325
+ /* TODO: перенести в inputsRange */
326
+ .top-input_input {
327
+ width: 50%;
328
+ flex-grow: 1;
329
+ }
330
+ .top-input[data-top-icon]:before {
331
+ --top-icon-color: var(--color-text-secondary);
327
332
  }
328
333
 
329
- :root {
330
- --top-radio-background-color: var(--content-background-color);
331
- --top-radio-background-color-hover: var(--top-radio-background-color);
334
+ :root {
335
+ --top-radio-background-color: var(--content-background-color);
336
+ --top-radio-background-color-hover: var(--top-radio-background-color);
332
337
  --top-radio-background-color-active: var(--top-radio-background-color);
333
338
  }
334
- .top-radio {
339
+ .top-radio {
335
340
  cursor: pointer;
336
341
  }
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;
342
+ .top-radio_input {
343
+ border-radius: 50%;
344
+ background: var(--content-background-color);
345
+ border: 1px solid var(--top-forms-border-color);
346
+ width: calc(var(--top-forms-option-height) - 3px * 2);
347
+ height: calc(var(--top-forms-option-height) - 3px * 2);
348
+ }
349
+ .top-radio_input:hover {
350
+ border-color: var(--top-forms-option-color);
359
351
  }
352
+ .top-radio_input:checked {
353
+ border-color: var(--top-forms-option-color);
354
+ border-width: 5px;
355
+ }
356
+ .top-radio_input:checked:hover {
357
+ border-color: var(--top-forms-option-color-hover);
358
+ }
359
+
360
+ /* isError */
361
+ .top-radio_input.top-error,
362
+ .top-radio_input:checked.top-error {
363
+ border-color: var(--color-negative);
364
+ }
365
+
366
+ .top-checkboxSwitcher {
367
+ cursor: pointer;
368
+ display: inline-flex;
369
+ gap: 4px;
370
+ }
371
+ .top-checkboxSwitcher_input {
372
+ border-radius: 9px;
373
+ border: none;
374
+ background: var(--color-theme-100);
375
+ width: 36px;
376
+ height: 18px;
377
+ position: relative;
378
+ }
379
+ .top-checkboxSwitcher_input:before {
380
+ content: '';
381
+ border-radius: 50%;
382
+ background: var(--color-white);
383
+ width: 12px;
384
+ height: 12px;
385
+ margin: 3px;
386
+ position: absolute;
387
+ top: 0;
388
+ left: 0;
389
+
390
+ transition: left 0.1s;
391
+ }
392
+ .top-checkboxSwitcher_input:hover {
393
+ background: var(--color-theme-150);
394
+ }
395
+
396
+ /* checked */
397
+ .top-checkboxSwitcher_input:checked {
398
+ background: var(--top-forms-option-color);
399
+ }
400
+ .top-checkboxSwitcher_input:checked:hover {
401
+ background: var(--top-forms-option-color-hover);
402
+ }
403
+ .top-checkboxSwitcher_input:checked:before {
404
+ left: 50%;
405
+ }
406
+
407
+ /* disabled */
408
+ .top-checkboxSwitcher_input:disabled {
409
+ background: var(--color-theme-400);
410
+ }
411
+
412
+ /* isError */
413
+ .top-checkboxSwitcher_input.top-error {
414
+ background: var(--color-negative) !important;
415
+ }
@@ -0,0 +1,6 @@
1
+ define(["exports", "../.chunks/forms-2abb7eaa.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-5e17154c.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":";;"}