biggerui 1.0.0

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.
@@ -0,0 +1,541 @@
1
+ ._button_1cxsm_1 {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ gap: 8px;
6
+ width: auto;
7
+ height: 36px;
8
+ padding: 8px 16px;
9
+ box-sizing: border-box;
10
+ border-radius: 8px;
11
+ border: 1px solid transparent;
12
+ font-family: "JetBrains Sans", sans-serif;
13
+ font-size: 14px;
14
+ font-weight: 500;
15
+ line-height: 20px;
16
+ cursor: pointer;
17
+ user-select: none;
18
+ transition: background 0.15s ease-out, opacity 0.15s ease-out;
19
+ }
20
+
21
+ ._fullWidth_1cxsm_21 {
22
+ width: 100%;
23
+ }
24
+
25
+ ._default_1cxsm_25 {
26
+ background: var(--primary-color);
27
+ color: var(--text-color);
28
+ box-shadow: 0px 1px 2px var(--shadow-color);
29
+ }
30
+ ._default_1cxsm_25:hover {
31
+ background: var(--primary-color-hover);
32
+ }
33
+
34
+ ._destructive_1cxsm_34 {
35
+ background: var(--destructive-color);
36
+ color: var(--text-color-error);
37
+ box-shadow: 0px 1px 2px var(--shadow-color);
38
+ }
39
+ ._destructive_1cxsm_34:hover {
40
+ background: var(--destructive-color-hover);
41
+ }
42
+
43
+ ._secondary_1cxsm_43 {
44
+ background: var(--background-color-light);
45
+ border-color: var(--border-color);
46
+ color: var(--text-color);
47
+ box-shadow: 0px 1px 2px var(--shadow-color);
48
+ }
49
+ ._secondary_1cxsm_43:hover {
50
+ background: var(--background-color-light-hover);
51
+ }
52
+
53
+ ._default_1cxsm_25 {
54
+ height: 36px;
55
+ padding: 8px 16px;
56
+ }
57
+
58
+ ._sm_1cxsm_58 {
59
+ height: 32px;
60
+ padding: 6px 12px;
61
+ }
62
+
63
+ ._lg_1cxsm_63 {
64
+ height: 40px;
65
+ padding: 10px 20px;
66
+ }
67
+
68
+ ._iconLeft_1cxsm_68,
69
+ ._iconRight_1cxsm_69 {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ pointer-events: none;
74
+ }
75
+
76
+ ._disabled_1cxsm_76 {
77
+ opacity: 0.5;
78
+ cursor: not-allowed;
79
+ }
80
+
81
+ ._label_1cxsm_81 {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ }
86
+ ._wrapper_1pnc5_1 {
87
+ display: inline-flex;
88
+ align-items: center;
89
+ gap: var(--spacing-sm, 8px);
90
+ cursor: pointer;
91
+ user-select: none;
92
+ }
93
+
94
+ /* скрытый нативный чекбокс, чтобы сохранить доступность */
95
+ ._native_1pnc5_10 {
96
+ position: absolute;
97
+ opacity: 0;
98
+ width: 0;
99
+ height: 0;
100
+ pointer-events: none;
101
+ }
102
+
103
+ /* коробка чекбокса */
104
+ ._box_1pnc5_19 {
105
+ width: 18px;
106
+ height: 18px;
107
+ border-radius: var(--border-radius-sm, 4px);
108
+ border: 1px solid var(--border-color, rgba(250, 250, 250, 0.15));
109
+ background: var(--background-color-light, rgba(250, 250, 250, 0.05));
110
+ display: inline-flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
114
+ position: relative;
115
+ overflow: hidden;
116
+ transition:
117
+ border-color var(--transition-fast, 150ms) ease-out,
118
+ background var(--transition-fast, 150ms) ease-out,
119
+ box-shadow var(--transition-fast, 150ms) ease-out,
120
+ transform 80ms ease-out;
121
+ }
122
+
123
+ /* hover по лейблу */
124
+ ._wrapper_1pnc5_1:hover ._box_1pnc5_19 {
125
+ border-color: var(--border-color-dark, #404040);
126
+ }
127
+
128
+ /* состояние checked */
129
+ ._boxChecked_1pnc5_44 {
130
+ background: var(--primary-color, #4338ca);
131
+ border-color: var(--primary-color, #4338ca);
132
+ box-shadow: 0 0 0 3px var(--primary-color-alpha, rgba(67, 56, 202, 0.4));
133
+ transform: translateY(-0.5px);
134
+ }
135
+
136
+ /* ripple эффект внутри коробки при появлении checked */
137
+ ._boxChecked_1pnc5_44::after {
138
+ content: "";
139
+ position: absolute;
140
+ inset: 0;
141
+ background: radial-gradient(circle at center, rgba(250, 250, 250, 0.35), transparent 55%);
142
+ opacity: 0;
143
+ transform: scale(0.4);
144
+ animation: _checkbox-ripple_1pnc5_1 260ms ease-out forwards;
145
+ }
146
+
147
+ /* иконка галочки */
148
+ ._checkIcon_1pnc5_63 {
149
+ opacity: 0;
150
+ transform: scale(0.4) translateY(2px) rotate(-8deg);
151
+ transform-origin: center;
152
+ transition:
153
+ opacity var(--transition-fast, 150ms) ease-out,
154
+ transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
155
+ }
156
+
157
+ /* pop-анимация при checked */
158
+ ._boxChecked_1pnc5_44 ._checkIcon_1pnc5_63 {
159
+ opacity: 1;
160
+ transform: scale(1) translateY(0) rotate(0deg);
161
+ }
162
+
163
+ /* текст справа */
164
+ ._text_1pnc5_79 {
165
+ font-family: var(--font-family);
166
+ font-size: var(--font-size-sm, 14px);
167
+ line-height: 20px;
168
+ color: var(--text-color, #fafafa);
169
+ }
170
+
171
+ /* ripple анимация */
172
+ @keyframes _checkbox-ripple_1pnc5_1 {
173
+ 0% {
174
+ opacity: 0.7;
175
+ transform: scale(0.3);
176
+ }
177
+ 60% {
178
+ opacity: 0.35;
179
+ transform: scale(1.05);
180
+ }
181
+ 100% {
182
+ opacity: 0;
183
+ transform: scale(1.25);
184
+ }
185
+ }
186
+ ._overlay_oc9ef_1 {
187
+ position: fixed;
188
+ inset: 0;
189
+ background: var(--background-color-overlay);
190
+ z-index: 1000;
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ }
195
+
196
+ ._content_oc9ef_11 {
197
+ position: relative;
198
+ width: min(720px, 100% - 32px);
199
+ max-height: calc(100vh - 64px);
200
+ padding: 24px;
201
+ box-sizing: border-box;
202
+
203
+ background: var(--background-color);
204
+ border-radius: 16px;
205
+ border: 1px solid var(--border-color-dark);
206
+ box-shadow: 0px 4px 6px -4px var(--shadow-color-dark);
207
+ overflow-y: auto;
208
+
209
+ display: flex;
210
+ flex-direction: column;
211
+ gap: 24px;
212
+ }
213
+
214
+ ._header_oc9ef_29 {
215
+ align-self: stretch;
216
+ border-bottom: 0.5px solid var(--border-color-dark);
217
+ display: flex;
218
+ justify-content: center;
219
+ align-items: flex-start;
220
+ padding-bottom: 12px;
221
+ }
222
+
223
+ ._title_oc9ef_38 {
224
+ flex: 1;
225
+ max-width: 1280px;
226
+ font-family: "JetBrains Sans", sans-serif;
227
+ font-size: 20px;
228
+ font-weight: 600;
229
+ line-height: 28px;
230
+ color: var(--text-color);
231
+ }
232
+
233
+ ._body_oc9ef_48 {
234
+ align-self: stretch;
235
+ display: flex;
236
+ flex-direction: column;
237
+ gap: 24px;
238
+ font-family: "JetBrains Sans", sans-serif;
239
+ font-size: var(--font-size-sm);
240
+ color: var(--text-color);
241
+ }
242
+
243
+ ._footer_oc9ef_58 {
244
+ align-self: stretch;
245
+ padding-top: 32px;
246
+ display: flex;
247
+ justify-content: space-between;
248
+ align-items: flex-start;
249
+ }
250
+
251
+ ._closeButton_oc9ef_66 {
252
+ position: absolute;
253
+ top: 12px;
254
+ right: 12px;
255
+ padding: 8px 16px;
256
+ box-sizing: border-box;
257
+ border-radius: 8px;
258
+ background: transparent;
259
+ border: none;
260
+ display: inline-flex;
261
+ justify-content: center;
262
+ align-items: center;
263
+ cursor: pointer;
264
+ }
265
+
266
+ ._closeIcon_oc9ef_81 {
267
+ position: relative;
268
+ width: 16px;
269
+ height: 16px;
270
+ }
271
+
272
+ ._closeIcon_oc9ef_81::before,
273
+ ._closeIcon_oc9ef_81::after {
274
+ content: "";
275
+ position: absolute;
276
+ left: 7px;
277
+ top: 3px;
278
+ width: 2px;
279
+ height: 10px;
280
+ background: var(--text-color);
281
+ border-radius: 2px;
282
+ }
283
+
284
+ ._closeIcon_oc9ef_81::before {
285
+ transform: rotate(45deg);
286
+ }
287
+
288
+ ._closeIcon_oc9ef_81::after {
289
+ transform: rotate(-45deg);
290
+ }
291
+ ._wrapper_x822s_1 {
292
+ width: 100%;
293
+ display: flex;
294
+ flex-direction: column;
295
+ gap: 4px;
296
+ }
297
+
298
+ ._label_x822s_8 {
299
+ width: 100%;
300
+ color: var(--text-color);
301
+ font-size: 14px;
302
+ font-family: "JetBrains Sans", sans-serif;
303
+ font-weight: 500;
304
+ line-height: 14px;
305
+ margin-bottom: 8px;
306
+ }
307
+
308
+ ._container_x822s_18 {
309
+ width: 100%;
310
+ height: 36px;
311
+ background: var(--background-color-light);
312
+ box-shadow: 0px 1px 2px var(--shadow-color);
313
+ border-radius: 10px;
314
+ outline: 1px var(--border-color) solid;
315
+ outline-offset: -1px;
316
+ display: flex;
317
+ align-items: center;
318
+ box-sizing: border-box;
319
+ transition: outline-color 0.12s ease-out, box-shadow 0.12s ease-out,
320
+ background 0.12s ease-out;
321
+ }
322
+
323
+ ._container_x822s_18:focus-within {
324
+ outline-color: var(--primary-color);
325
+ box-shadow:
326
+ 0px 1px 2px var(--shadow-color),
327
+ 0 0 0 3px var(--primary-color-alpha);
328
+ }
329
+
330
+ ._containerError_x822s_40 {
331
+ outline-color: var(--destructive-color);
332
+ box-shadow:
333
+ 0px 1px 2px var(--shadow-color),
334
+ 0 0 0 3px var(--destructive-color-alpha);
335
+ }
336
+
337
+ ._input_x822s_47 {
338
+ width: 100%;
339
+ height: 100%;
340
+ padding-left: 12px;
341
+ padding-right: 12px;
342
+ padding-top: 4px;
343
+ padding-bottom: 4px;
344
+ background: transparent;
345
+ border: none;
346
+ outline: none;
347
+ color: var(--text-color);
348
+ font-size: 14px;
349
+ font-family: "JetBrains Sans", sans-serif;
350
+ font-weight: 400;
351
+ line-height: 20px;
352
+ box-sizing: border-box;
353
+ }
354
+
355
+ ._input_x822s_47::placeholder {
356
+ color: var(--text-color-placeholder);
357
+ }
358
+
359
+ ._input_x822s_47::selection {
360
+ background: var(--primary-color);
361
+ color: var(--text-color-secondary);
362
+ }
363
+
364
+ ._input_x822s_47:disabled {
365
+ cursor: not-allowed;
366
+ opacity: 0.5;
367
+ }
368
+
369
+ ._errorText_x822s_79 {
370
+ font-family: "JetBrains Sans", sans-serif;
371
+ font-size: 12px;
372
+ line-height: 16px;
373
+ color: var(--text-color-error);
374
+ }
375
+ ._wrapper_f03cq_1 {
376
+ width: 100%;
377
+ display: flex;
378
+ flex-direction: column;
379
+ gap: 4px;
380
+ position: relative;
381
+ }
382
+
383
+ ._label_f03cq_9 {
384
+ width: 100%;
385
+ color: var(--text-color);
386
+ font-size: 14px;
387
+ font-family: "JetBrains Sans", sans-serif;
388
+ font-weight: 500;
389
+ line-height: 14px;
390
+ margin-bottom: 8px;
391
+ }
392
+
393
+ ._trigger_f03cq_19 {
394
+ width: 100%;
395
+ height: 36px;
396
+ padding: 4px 12px;
397
+ box-sizing: border-box;
398
+ background: var(--background-color-light);
399
+ box-shadow: 0px 1px 2px var(--shadow-color);
400
+ border-radius: 10px;
401
+ border: 1px solid var(--border-color);
402
+ display: inline-flex;
403
+ align-items: center;
404
+ justify-content: space-between;
405
+ gap: 4px;
406
+ cursor: pointer;
407
+ outline: none;
408
+ }
409
+
410
+ ._triggerOpen_f03cq_36 {
411
+ border-color: var(--primary-color);
412
+ }
413
+
414
+ ._value_f03cq_40 {
415
+ flex: 1 1 0;
416
+ display: inline-flex;
417
+ align-items: center;
418
+ gap: 8px;
419
+ font-family: "JetBrains Sans", sans-serif;
420
+ font-size: 14px;
421
+ line-height: 20px;
422
+ color: var(--text-color);
423
+ text-align: left;
424
+ }
425
+
426
+ ._placeholder_f03cq_52 {
427
+ flex: 1 1 0;
428
+ font-family: "JetBrains Sans", sans-serif;
429
+ font-size: 14px;
430
+ line-height: 20px;
431
+ color: var(--text-color-placeholder);
432
+ text-align: left;
433
+ }
434
+
435
+ ._hint_f03cq_61 {
436
+ opacity: 0.6;
437
+ font-size: 12px;
438
+ line-height: 16px;
439
+ }
440
+
441
+ ._icon_f03cq_67 {
442
+ display: inline-flex;
443
+ align-items: center;
444
+ justify-content: center;
445
+ }
446
+
447
+ ._dropdown_f03cq_73 {
448
+ position: absolute;
449
+ top: calc(100% + 4px);
450
+ left: 0;
451
+ right: 0;
452
+ z-index: 50;
453
+ }
454
+
455
+ ._dropdownInner_f03cq_81 {
456
+ background: var(--background-color);
457
+ border-radius: 8px;
458
+ border: 1px solid var(--border-color-dark);
459
+ box-shadow: 0px 2px 4px -2px var(--shadow-color-dark);
460
+ padding: 4px;
461
+ max-height: 260px;
462
+ overflow-y: auto;
463
+ }
464
+
465
+ ._option_f03cq_91 {
466
+ width: 100%;
467
+ padding: 6px 8px;
468
+ border-radius: 6px;
469
+ display: inline-flex;
470
+ align-items: center;
471
+ justify-content: space-between;
472
+ gap: 8px;
473
+ background: transparent;
474
+ border: none;
475
+ text-align: left;
476
+ cursor: pointer;
477
+ }
478
+
479
+ ._option_f03cq_91:hover {
480
+ background: var(--background-color-light);
481
+ }
482
+
483
+ ._optionActive_f03cq_109 {
484
+ background: var(--primary-color);
485
+ }
486
+
487
+ ._optionLabel_f03cq_113 {
488
+ font-family: "JetBrains Sans", sans-serif;
489
+ font-size: 14px;
490
+ line-height: 20px;
491
+ color: var(--text-color);
492
+ }
493
+
494
+ ._optionHint_f03cq_120 {
495
+ opacity: 0.6;
496
+ font-family: "JetBrains Sans", sans-serif;
497
+ font-size: 12px;
498
+ line-height: 16px;
499
+ color: var(--text-color);
500
+ }
501
+ ._wrapper_siuqb_1 {
502
+ width: 100%;
503
+ display: flex;
504
+ flex-direction: column;
505
+ gap: 4px;
506
+ }
507
+
508
+ ._label_siuqb_8 {
509
+ width: 100%;
510
+ color: var(--text-color);
511
+ font-size: 14px;
512
+ font-family: "JetBrains Sans", sans-serif;
513
+ font-weight: 500;
514
+ line-height: 14px;
515
+ margin-bottom: 8px;
516
+ }
517
+
518
+ ._textarea_siuqb_18 {
519
+ width: 100%;
520
+ min-height: 64px;
521
+ box-sizing: border-box;
522
+ padding: 4px 12px;
523
+ background: var(--background-color-light);
524
+ box-shadow: 0px 1px 2px var(--shadow-color);
525
+ border-radius: 10px;
526
+ border: 1px solid var(--border-color);
527
+ font-family: "JetBrains Sans", sans-serif;
528
+ font-size: 14px;
529
+ line-height: 20px;
530
+ color: var(--text-color);
531
+ outline: none;
532
+ resize: vertical;
533
+ }
534
+
535
+ ._textarea_siuqb_18::placeholder {
536
+ color: var(--text-color-placeholder);
537
+ }
538
+
539
+ ._textarea_siuqb_18:focus-visible {
540
+ border-color: var(--primary-color);
541
+ }