@topvisor/ui 0.0.15 → 0.0.17

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 (69) hide show
  1. package/.chunks/core-0b2c7817.es.js +152 -0
  2. package/.chunks/core-0b2c7817.es.js.map +1 -0
  3. package/.chunks/core-51f7b679.amd.js +151 -0
  4. package/.chunks/core-51f7b679.amd.js.map +1 -0
  5. package/.chunks/{forms-5e17154c.es.js → forms-245e3bc0.es.js} +175 -32
  6. package/.chunks/forms-245e3bc0.es.js.map +1 -0
  7. package/.chunks/forms-f7b7b259.amd.js +568 -0
  8. package/.chunks/forms-f7b7b259.amd.js.map +1 -0
  9. package/.chunks/popup-8f650530.amd.js +728 -0
  10. package/.chunks/popup-8f650530.amd.js.map +1 -0
  11. package/.chunks/popup-d240ed19.es.js +731 -0
  12. package/.chunks/popup-d240ed19.es.js.map +1 -0
  13. package/README.md +62 -62
  14. package/common/common.amd.js +1 -1
  15. package/core/core.amd.js +5 -0
  16. package/core/core.amd.js.map +1 -0
  17. package/core/core.js +7 -0
  18. package/core/core.js.map +1 -0
  19. package/core.css +647 -658
  20. package/dark.css +135 -135
  21. package/editArea/editArea.amd.js +126 -0
  22. package/editArea/editArea.amd.js.map +1 -0
  23. package/editArea/editArea.js +123 -0
  24. package/editArea/editArea.js.map +1 -0
  25. package/editArea.css +61 -0
  26. package/forms/forms.amd.js +5 -3
  27. package/forms/forms.amd.js.map +1 -1
  28. package/forms/forms.js +6 -4
  29. package/{helpers → forms}/helpers.amd.js +2 -2
  30. package/{helpers → forms}/helpers.js +1 -1
  31. package/forms.css +344 -254
  32. package/icomoon/demo-files/demo.css +161 -161
  33. package/icomoon/demo-files/demo.js +30 -30
  34. package/icomoon/demo.html +2945 -2931
  35. package/icomoon/fonts/Topvisor-2.svg +232 -231
  36. package/icomoon/fonts/Topvisor-2.ttf +0 -0
  37. package/icomoon/fonts/Topvisor-2.woff +0 -0
  38. package/icomoon/selection.json +1 -1
  39. package/icomoon/style.css +647 -644
  40. package/light.css +135 -135
  41. package/package.json +19 -19
  42. package/popup/popup.amd.js +198 -0
  43. package/popup/popup.amd.js.map +1 -0
  44. package/popup/popup.js +198 -0
  45. package/popup/popup.js.map +1 -0
  46. package/popup/worker.amd.js +234 -0
  47. package/popup/worker.amd.js.map +1 -0
  48. package/popup/worker.js +237 -0
  49. package/popup/worker.js.map +1 -0
  50. package/popup.css +19 -0
  51. package/tabs/tabs.amd.js +123 -0
  52. package/tabs/tabs.amd.js.map +1 -0
  53. package/tabs/tabs.js +120 -0
  54. package/tabs/tabs.js.map +1 -0
  55. package/tabs.css +60 -0
  56. package/utils/device.amd.js +42 -0
  57. package/utils/device.amd.js.map +1 -0
  58. package/utils/device.js +41 -0
  59. package/utils/device.js.map +1 -0
  60. package/utils/dom.amd.js +95 -0
  61. package/utils/dom.amd.js.map +1 -0
  62. package/utils/dom.js +94 -0
  63. package/utils/dom.js.map +1 -0
  64. package/.chunks/forms-2abb7eaa.amd.js +0 -425
  65. package/.chunks/forms-2abb7eaa.amd.js.map +0 -1
  66. package/.chunks/forms-5e17154c.es.js.map +0 -1
  67. package/icomoon/demo-files/Read Me.txt +0 -7
  68. /package/{helpers → forms}/helpers.amd.js.map +0 -0
  69. /package/{helpers → forms}/helpers.js.map +0 -0
package/forms.css CHANGED
@@ -1,415 +1,505 @@
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
-
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
+
17
17
  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
18
18
  }
19
- .top-button:hover {
20
- box-shadow: var(--top-button-box-shadow-hover);
19
+ .top-button:hover {
20
+ box-shadow: var(--top-button-box-shadow-hover);
21
21
  background-color: var(--top-button-background-color-hover);
22
22
  }
23
- .top-button:active {
24
- box-shadow: var(--top-button-box-shadow-active);
23
+ .top-button:active {
24
+ box-shadow: var(--top-button-box-shadow-active);
25
25
  background-color: var(--top-button-background-color-active);
26
26
  }
27
- .top-button.top-active {
28
- box-shadow: var(--top-button-box-shadow-selected);
27
+ .top-button.top-active {
28
+ box-shadow: var(--top-button-box-shadow-selected);
29
29
  background-color: var(--top-button-background-color-selected);
30
30
  }
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% {
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_1hqxk_1 1s linear infinite;
45
+ }
46
+ @keyframes _progress_1hqxk_1 {
47
+ 0% {
48
48
  background-position-x: 0px;
49
49
  }
50
- 100% {
50
+ 100% {
51
51
  background-position-x: 32px;
52
52
  }
53
53
  }
54
- a.top-button,
55
- button.top-button {
56
- min-width: 135px;
54
+ a.top-button,
55
+ button.top-button {
56
+ min-width: 100px;
57
57
  text-decoration: none;
58
58
  }
59
- a.top-button,
60
- a.top-button:hover {
61
- min-width: var(--top-forms-base-height);
59
+ a.top-button,
60
+ a.top-button:hover {
61
+ min-width: var(--top-forms-base-height);
62
62
  text-decoration: none;
63
63
  }
64
- .top-button[data-top-icon]:not(:empty),
65
- .top-button[data-top-icon2]:not(:empty) {
66
- 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;
67
67
  text-align: left;
68
68
  }
69
- .top-button[data-top-icon] {
69
+ .top-button[data-top-icon] {
70
70
  padding-left: 0;
71
71
  }
72
- .top-button[data-top-icon2] {
72
+ .top-button[data-top-icon2] {
73
73
  padding-right: var(--top-select_arrow-width);
74
74
  }
75
- .top-button[data-top-icon2]:after {
75
+ .top-button[data-top-icon2]:after {
76
76
  margin-left: auto;
77
77
  }
78
- .top-button:empty {
78
+ .top-button:empty {
79
79
  min-width: var(--top-forms-base-height);
80
80
  }
81
- .top-button[data-top-icon]:empty,
82
- .top-button[data-top-icon2]:empty {
81
+ .top-button[data-top-icon]:empty,
82
+ .top-button[data-top-icon2]:empty {
83
83
  padding: 0;
84
84
  }
85
- .top-button.top-color_blue {
85
+ .top-button.top-color_blue {
86
86
  --top-button-background-color: var(--color-blue-500);
87
87
  }
88
- .top-button.top-color_green {
88
+ .top-button.top-color_green {
89
89
  --top-button-background-color: var(--color-green-500);
90
90
  }
91
- .top-button.top-color_orange {
91
+ .top-button.top-color_orange {
92
92
  --top-button-background-color: var(--color-orange-500);
93
93
  }
94
- .top-button.top-color_red {
94
+ .top-button.top-color_red {
95
95
  --top-button-background-color: var(--color-red-500);
96
96
  }
97
- .top-button.top-color_pink {
97
+ .top-button.top-color_pink {
98
98
  --top-button-background-color: var(--color-pink-500);
99
99
  }
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);
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);
112
112
  --top-button-background-color-selected: var(--color-secondary-2-opacity);
113
113
  }
114
- .top-button.top-color_theme.top-active {
114
+ .top-button.top-color_theme.top-active {
115
115
  --top-icon-color: var(--color-text-2);
116
116
  }
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
-
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
+
133
133
  --top-forms-border-width: 1px;
134
134
  }
135
- .top-button.top-style_outline.top-color_theme {
135
+ .top-button.top-style_outline.top-color_theme {
136
136
  --top-button-color: var(--color-text);
137
137
  }
138
- .top-button.top-style_outline.top-color_blue {
138
+ .top-button.top-style_outline.top-color_blue {
139
139
  --top-style_outline-color: var(--color-blue-500);
140
140
  }
141
- .top-button.top-style_outline.top-color_green {
141
+ .top-button.top-style_outline.top-color_green {
142
142
  --top-style_outline-color: var(--color-green-500);
143
143
  }
144
- .top-button.top-style_outline.top-color_orange {
144
+ .top-button.top-style_outline.top-color_orange {
145
145
  --top-style_outline-color: var(--color-orange-500);
146
146
  }
147
- .top-button.top-style_outline.top-color_red {
147
+ .top-button.top-style_outline.top-color_red {
148
148
  --top-style_outline-color: var(--color-red-500);
149
149
  }
150
- .top-button.top-style_outline.top-color_pink {
150
+ .top-button.top-style_outline.top-color_pink {
151
151
  --top-style_outline-color: var(--color-pink-500);
152
152
  }
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);
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);
162
162
  --top-button-background-color-selected: var(--color-secondary-3-opacity);
163
163
  }
164
- .top-button.top-style_soft.top-color_blue {
164
+ .top-button.top-style_soft.top-color_blue {
165
165
  --top-button-color: var(--color-blue-500);
166
166
  }
167
- .top-button.top-style_soft.top-color_orange {
167
+ .top-button.top-style_soft.top-color_orange {
168
168
  --top-button-color: var(--color-orange-500);
169
169
  }
170
- .top-button.top-style_soft.top-color_green {
170
+ .top-button.top-style_soft.top-color_green {
171
171
  --top-button-color: var(--color-green-500);
172
172
  }
173
- .top-button.top-style_soft.top-color_red {
173
+ .top-button.top-style_soft.top-color_red {
174
174
  --top-button-color: var(--color-red-500);
175
175
  }
176
- .top-button.top-style_soft.top-color_pink {
176
+ .top-button.top-style_soft.top-color_pink {
177
177
  --top-button-color: var(--color-pink-500);
178
178
  }
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;
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;
188
188
  --top-button-background-color-selected: var(--color-steel-200);
189
189
  }
190
- .top-button.top-style_transparent:hover {
190
+ .top-button.top-style_transparent:hover {
191
191
  opacity: 0.8;
192
192
  }
193
- .top-button.top-style_transparent.top-color_blue {
193
+ .top-button.top-style_transparent.top-color_blue {
194
194
  --top-button-color: var(--color-blue-450);
195
195
  }
196
- .top-button.top-style_transparent.top-color_green {
196
+ .top-button.top-style_transparent.top-color_green {
197
197
  --top-button-color: var(--color-green-450);
198
198
  }
199
- .top-button.top-style_transparent.top-color_orange {
199
+ .top-button.top-style_transparent.top-color_orange {
200
200
  --top-button-color: var(--color-orange-450);
201
201
  }
202
- .top-button.top-style_transparent.top-color_red {
202
+ .top-button.top-style_transparent.top-color_red {
203
203
  --top-button-color: var(--color-red-450);
204
204
  }
205
- .top-button.top-style_transparent.top-color_pink {
205
+ .top-button.top-style_transparent.top-color_pink {
206
206
  --top-button-color: var(--color-pink-450);
207
207
  }
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));
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));
220
220
  --top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
221
221
  }
222
- .top-button.top-size_l {
223
- --top-forms-padding: var(--top-forms-padding_l);
222
+ .top-button.top-size_l {
223
+ --top-forms-padding: var(--top-forms-padding_l);
224
224
  --top-forms-base-height: var(--top-forms-base-height_l);
225
225
  }
226
- .top-button.top-size_xl {
227
- --top-forms-padding: var(--top-forms-padding_xl);
226
+ .top-button.top-size_xl {
227
+ --top-forms-padding: var(--top-forms-padding_xl);
228
228
  --top-forms-base-height: var(--top-forms-base-height_xl);
229
- }
229
+ }
230
+
231
+ .top-hint {
232
+ --top-icon-size: 16px;
233
+ --top-icon-width: var(--top-icon-size);
234
+
235
+ border-radius: 50%;
236
+ background: var(--content-background-color);
237
+ padding: 1px;
238
+ color: var(--color-text-4);
239
+ line-height: 1;
240
+ z-index: 1;
241
+ pointer-events: all;
242
+ }
243
+ .top-hint:hover {
244
+ color: var(--color-text-3);
245
+ }
246
+
247
+ .top-textarea {
248
+ width: 180px;
249
+ display: inline-flex;
250
+ align-items: center;
251
+ position: relative;
252
+ }
253
+ .top-textarea_textarea {
254
+ background: var(--top-forms-background-color);
255
+ width: 100%;
256
+ padding: var(--top-forms-padding);
257
+ resize: none;
258
+ }
259
+ .top-textarea_textarea:hover {
260
+ background: var(--top-forms-background-color-hover);
261
+ }
262
+ .top-textarea_textarea:focus {
263
+ outline-color: var(--color-theme-75);
264
+ outline-offset: 0px;
265
+ }
266
+ .top-textarea_textarea.top-textarea_textarea-expandable {
267
+ width: 100%;
268
+ height: 100%;
269
+ overflow: hidden;
270
+ position: absolute;
271
+ top: 0;
272
+ left: 0;
273
+ }
274
+ .top-textarea_pseudoContent {
275
+ box-sizing: border-box;
276
+ min-height: var(--bcf6b9ae);
277
+ padding: var(--top-forms-padding);
278
+ font-size: 14px;
279
+ white-space: pre-wrap;
280
+ overflow-wrap: anywhere;
281
+ pointer-events: none;
282
+ opacity: 0;
283
+ z-index: -1;
284
+ }
285
+ .top-textarea_hint {
286
+ position: absolute;
287
+ top: 2px;
288
+ right: 2px;
289
+ }
230
290
 
231
- .top-forms-optionLabel {
291
+ .top-forms-optionLabel {
232
292
  flex-grow: 1;
233
293
  }
234
- .top-forms-optionLabel_title {
235
- min-height: var(--top-forms-option-height);
236
- display: flex;
294
+ .top-forms-optionLabel_title {
295
+ min-height: var(--top-forms-option-height);
296
+ display: flex;
237
297
  align-items: center;
238
298
  }
239
- .top-forms-optionLabel_title-disabled {
299
+ .top-forms-optionLabel_title-disabled {
240
300
  color: var(--color-text-3);
241
301
  }
242
- .top-forms-optionLabel_description {
243
- color: var(--color-text-3);
244
- font-size: 0.85em;
302
+ .top-forms-optionLabel_description {
303
+ color: var(--color-text-3);
304
+ font-size: 0.85em;
245
305
  line-height: var(--top-forms-option-height);
246
- }
306
+ }
247
307
 
248
- .top-checkbox {
249
- cursor: pointer;
308
+ .top-checkbox {
309
+ cursor: pointer;
250
310
  display: inline-flex;
251
311
  }
252
- .top-checkbox_input {
253
- cursor: inherit;
254
- border-radius: 4px;
255
- background: var(--content-background-color);
256
- border: 1px solid var(--top-forms-border-color);
257
- width: calc(var(--top-forms-option-height) - 3px * 2);
312
+ .top-checkbox_input {
313
+ cursor: inherit;
314
+ border-radius: 4px;
315
+ background: var(--content-background-color);
316
+ border: 1px solid var(--top-forms-border-color);
317
+ width: calc(var(--top-forms-option-height) - 3px * 2);
258
318
  height: calc(var(--top-forms-option-height) - 3px * 2);
259
319
  }
260
- .top-checkbox_input:before {
261
- content: ' ';
262
- color: #FFF;
263
- font-family: 'Topvisor-2';
320
+ .top-checkbox_input:before {
321
+ content: ' ';
322
+ color: #FFF;
323
+ font-family: 'Topvisor-2';
264
324
  font-size: 16px;
265
325
  }
266
- .top-checkbox_input:not(:checked):not(:indeterminate):hover {
267
- border-color: var(--top-forms-option-color);
326
+ .top-checkbox_input:hover {
327
+ border-color: var(--top-forms-option-color);
268
328
  background: var(--color-theme-50)
269
- }
270
-
329
+ }
330
+
271
331
  /* checked / indeterminate */
272
- .top-checkbox_input:checked,
273
- .top-checkbox_input:indeterminate {
274
- border-color: var(--top-forms-option-color);
332
+ .top-checkbox_input:checked,
333
+ .top-checkbox_input:indeterminate {
334
+ border-color: var(--top-forms-option-color);
275
335
  background: var(--top-forms-option-color);
276
336
  }
277
- .top-checkbox_input:checked:before {
337
+ .top-checkbox_input:checked:before {
278
338
  content: '';
279
339
  }
280
- .top-checkbox_input:indeterminate:before {
340
+ .top-checkbox_input:indeterminate:before {
281
341
  content: '';
282
342
  }
283
- .top-checkbox_input:checked:hover,
284
- .top-checkbox_input:indeterminate:hover {
285
- border-color: var(--top-forms-option-color-hover);
343
+ .top-checkbox_input:checked:hover,
344
+ .top-checkbox_input:indeterminate:hover {
345
+ border-color: var(--top-forms-option-color-hover);
286
346
  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;
347
+ }
348
+
349
+ /* disabled selected */
350
+ .top-checkbox_input:disabled {
351
+ border-color: var(--color-line-1-opacity);
352
+ background: var(--color-theme-50);
353
+ }
354
+ .top-checkbox_input:checked:disabled,
355
+ .top-checkbox_input:indeterminate:disabled {
356
+ border-color: transparent;
293
357
  background: var(--color-theme-400);
294
- }
295
-
358
+ }
359
+
296
360
  /* isError */
297
- .top-checkbox_input.top-error {
298
- border-color: var(--color-negative) !important;
361
+ .top-checkbox_input.top-error {
362
+ border-color: var(--color-negative);
363
+ }
364
+ .top-checkbox_input.top-error:hover {
365
+ border-color: var(--color-negative-2);
299
366
  }
300
- .top-checkbox_input:checked.top-error,
301
- .top-checkbox_input:indeterminate.top-error {
367
+
368
+ /* isError selected */
369
+ .top-checkbox_input:checked.top-error,
370
+ .top-checkbox_input:indeterminate.top-error {
302
371
  background: var(--color-negative);
303
- }
372
+ }
373
+ .top-checkbox_input:checked.top-error:hover,
374
+ .top-checkbox_input:indeterminate.top-error:hover {
375
+ background: var(--color-negative-2);
376
+ }
304
377
 
305
- .top-input {
306
- width: 180px;
307
- display: inline-flex;
308
- align-items: center;
378
+ .top-input {
379
+ width: 180px;
380
+ display: inline-flex;
381
+ align-items: center;
309
382
  gap: var(--top-gap-1);
310
383
  }
311
- .top-input_input {
384
+ .top-input_input {
312
385
  background: var(--top-forms-background-color);
313
386
  }
314
- .top-input_input:hover {
387
+ .top-input_input:hover {
315
388
  background: var(--top-forms-background-color-hover);
316
389
  }
317
- .top-input_input:focus {
318
- outline-color: var(--color-theme-75);
390
+ .top-input_input:focus {
391
+ outline-color: var(--color-theme-75);
319
392
  outline-offset: 0px;
320
393
  }
321
- .top-input-withCleaner .top-input_input:not(:placeholder-shown) {
394
+ .top-input-withCleaner .top-input_input:not(:placeholder-shown) {
322
395
  --top-forms_clear-width: 24px;
323
- }
324
-
396
+ }
397
+
325
398
  /* TODO: перенести в inputsRange */
326
- .top-input_input {
327
- width: 50%;
399
+ .top-input_input {
400
+ width: 50%;
328
401
  flex-grow: 1;
329
402
  }
330
- .top-input[data-top-icon]:before {
403
+ .top-input[data-top-icon]:before {
331
404
  --top-icon-color: var(--color-text-secondary);
332
- }
405
+ }
333
406
 
334
- :root {
335
- --top-radio-background-color: var(--content-background-color);
336
- --top-radio-background-color-hover: var(--top-radio-background-color);
407
+ :root {
408
+ --top-radio-background-color: var(--content-background-color);
409
+ --top-radio-background-color-hover: var(--top-radio-background-color);
337
410
  --top-radio-background-color-active: var(--top-radio-background-color);
338
411
  }
339
- .top-radio {
412
+ .top-radio {
340
413
  cursor: pointer;
341
414
  }
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);
415
+ .top-radio_input {
416
+ border-radius: 50%;
417
+ background: var(--content-background-color);
418
+ border: 1px solid var(--top-forms-border-color);
419
+ width: calc(var(--top-forms-option-height) - 3px * 2);
347
420
  height: calc(var(--top-forms-option-height) - 3px * 2);
348
421
  }
349
- .top-radio_input:hover {
422
+ .top-radio_input:hover {
350
423
  border-color: var(--top-forms-option-color);
424
+ background: var(--color-theme-50)
351
425
  }
352
- .top-radio_input:checked {
353
- border-color: var(--top-forms-option-color);
426
+ .top-radio_input:checked {
427
+ border-color: var(--top-forms-option-color);
354
428
  border-width: 5px;
355
429
  }
356
- .top-radio_input:checked:hover {
430
+ .top-radio_input:checked:hover {
357
431
  border-color: var(--top-forms-option-color-hover);
358
- }
359
-
432
+ }
433
+
434
+ /* disabled */
435
+ .top-radio_input:disabled {
436
+ border-color: var(--color-line-1-opacity);
437
+ background: var(--color-theme-50);
438
+ }
439
+
440
+ /* disabled selected */
441
+ .top-radio_input:checked:disabled {
442
+ border-color: var(--color-theme-400);
443
+ }
444
+
360
445
  /* isError */
361
- .top-radio_input.top-error,
362
- .top-radio_input:checked.top-error {
446
+ .top-radio_input.top-error {
363
447
  border-color: var(--color-negative);
364
- }
448
+ }
449
+ .top-radio_input.top-error:hover {
450
+ border-color: var(--color-negative-2);
451
+ }
365
452
 
366
- .top-checkboxSwitcher {
367
- cursor: pointer;
368
- display: inline-flex;
453
+ .top-checkboxSwitcher {
454
+ cursor: pointer;
455
+ display: inline-flex;
369
456
  gap: 4px;
370
457
  }
371
- .top-checkboxSwitcher_input {
372
- border-radius: 9px;
373
- border: none;
374
- background: var(--color-theme-100);
375
- width: 36px;
376
- height: 18px;
458
+ .top-checkboxSwitcher_input {
459
+ border-radius: 9px;
460
+ border: none;
461
+ background: var(--color-theme-100);
462
+ width: 36px;
463
+ height: 18px;
377
464
  position: relative;
378
465
  }
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
-
466
+ .top-checkboxSwitcher_input:before {
467
+ content: '';
468
+ border-radius: 50%;
469
+ background: var(--color-white);
470
+ width: 12px;
471
+ height: 12px;
472
+ margin: 3px;
473
+ position: absolute;
474
+ top: 0;
475
+ left: 0;
476
+
390
477
  transition: left 0.1s;
391
478
  }
392
- .top-checkboxSwitcher_input:hover {
479
+ .top-checkboxSwitcher_input:hover {
393
480
  background: var(--color-theme-150);
394
- }
395
-
481
+ }
482
+
396
483
  /* checked */
397
- .top-checkboxSwitcher_input:checked {
484
+ .top-checkboxSwitcher_input:checked {
398
485
  background: var(--top-forms-option-color);
399
486
  }
400
- .top-checkboxSwitcher_input:checked:hover {
487
+ .top-checkboxSwitcher_input:checked:hover {
401
488
  background: var(--top-forms-option-color-hover);
402
489
  }
403
- .top-checkboxSwitcher_input:checked:before {
490
+ .top-checkboxSwitcher_input:checked:before {
404
491
  left: 50%;
405
- }
406
-
492
+ }
493
+
407
494
  /* disabled */
408
- .top-checkboxSwitcher_input:disabled {
495
+ .top-checkboxSwitcher_input:disabled {
409
496
  background: var(--color-theme-400);
410
- }
411
-
497
+ }
498
+
412
499
  /* isError */
413
- .top-checkboxSwitcher_input.top-error {
414
- background: var(--color-negative) !important;
415
- }
500
+ .top-checkboxSwitcher_input.top-error {
501
+ background: var(--color-negative);
502
+ }
503
+ .top-checkboxSwitcher_input.top-error:hover {
504
+ background: var(--color-negative-2);
505
+ }