@ramong26/xp-components 1.0.9 → 1.0.13

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.
package/dist/index.css CHANGED
@@ -1,3 +1,5 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* src/App.css */
2
4
  #root {
3
5
  max-width: 1280px;
@@ -37,7 +39,7 @@
37
39
  color: #888;
38
40
  }
39
41
 
40
- /* ../../AppData/Local/Temp/tmp-18704-l8bbbxvlvDIx/xp-components/src/components/Button/Button.css */
42
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Button/Button.css */
41
43
  .btn {
42
44
  background: #fffbea;
43
45
  background-size: cover;
@@ -103,3 +105,1164 @@
103
105
  color: #fff;
104
106
  border-color: #000;
105
107
  }
108
+
109
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Carousel/Carousel.css */
110
+ .carousel {
111
+ position: relative;
112
+ overflow: hidden;
113
+ border: 2px solid #000;
114
+ background-repeat: repeat;
115
+ background-size: auto;
116
+ font-family: "Times New Roman", serif;
117
+ }
118
+ .carousel__container {
119
+ width: 100%;
120
+ overflow: hidden;
121
+ }
122
+ .carousel__list {
123
+ display: flex;
124
+ transition: transform 0.4s ease-in-out;
125
+ }
126
+ .carousel__item {
127
+ display: flex;
128
+ flex-direction: row;
129
+ justify-content: space-around;
130
+ align-items: center;
131
+ cursor: pointer;
132
+ flex: 0 0 100%;
133
+ padding: 20px;
134
+ text-align: center;
135
+ background-size: cover;
136
+ }
137
+ .carousel__item:last-child {
138
+ border-right: none;
139
+ }
140
+ .carousel__image {
141
+ max-width: 100%;
142
+ height: auto;
143
+ margin-bottom: 12px;
144
+ }
145
+ .carousel__title {
146
+ font-size: 24px;
147
+ line-height: 1.333;
148
+ font-weight: 800;
149
+ color: #b71c1c;
150
+ margin-bottom: 6px;
151
+ text-transform: uppercase;
152
+ }
153
+ .carousel__text {
154
+ font-size: 16px;
155
+ line-height: 1.625;
156
+ font-weight: 400;
157
+ color: #616161;
158
+ }
159
+ .carousel__button {
160
+ position: absolute;
161
+ top: 50%;
162
+ transform: translateY(-50%);
163
+ padding: 6px 12px;
164
+ font-size: 16px;
165
+ line-height: 1.625;
166
+ font-weight: 400;
167
+ color: #616161;
168
+ background-size: cover;
169
+ border: 2px solid #000;
170
+ cursor: pointer;
171
+ transition: all 0.2s ease-in-out;
172
+ }
173
+ .carousel__button:hover {
174
+ transform: translateY(-50%) scale(1.05);
175
+ }
176
+ .carousel__button--prev {
177
+ left: 10px;
178
+ }
179
+ .carousel__button--next {
180
+ right: 10px;
181
+ }
182
+ .carousel__indicators {
183
+ display: flex;
184
+ flex-direction: row;
185
+ justify-content: center;
186
+ align-items: center;
187
+ gap: 8px;
188
+ margin: 12px;
189
+ }
190
+ .carousel__indicator {
191
+ width: 16px;
192
+ height: 16px;
193
+ border: 2px solid #000;
194
+ background-size: cover;
195
+ cursor: pointer;
196
+ transition: all 0.2s ease-in-out;
197
+ }
198
+ .carousel__indicator.active {
199
+ transform: scale(1.1);
200
+ }
201
+ @media (min-width:640px) {
202
+ .carousel__title {
203
+ font-size: 20px;
204
+ }
205
+ .carousel__text {
206
+ font-size: 14px;
207
+ }
208
+ .carousel__button {
209
+ padding: 4px 10px;
210
+ font-size: 14px;
211
+ }
212
+ .carousel__indicator {
213
+ width: 12px;
214
+ height: 12px;
215
+ }
216
+ }
217
+ @media (min-width:768px) {
218
+ .carousel__title {
219
+ font-size: 22px;
220
+ }
221
+ .carousel__text {
222
+ font-size: 15px;
223
+ }
224
+ .carousel__button {
225
+ padding: 6px 12px;
226
+ font-size: 15px;
227
+ }
228
+ .carousel__indicator {
229
+ width: 14px;
230
+ height: 14px;
231
+ }
232
+ }
233
+ @media (min-width:1024px) {
234
+ .carousel__title {
235
+ font-size: 24px;
236
+ }
237
+ .carousel__text {
238
+ font-size: 16px;
239
+ }
240
+ .carousel__button {
241
+ padding: 8px 14px;
242
+ font-size: 16px;
243
+ }
244
+ .carousel__indicator {
245
+ width: 16px;
246
+ height: 16px;
247
+ }
248
+ }
249
+ @media (min-width:1280px) {
250
+ .carousel__title {
251
+ font-size: 28px;
252
+ }
253
+ .carousel__text {
254
+ font-size: 18px;
255
+ }
256
+ .carousel__button {
257
+ padding: 10px 16px;
258
+ font-size: 18px;
259
+ }
260
+ .carousel__indicator {
261
+ width: 18px;
262
+ height: 18px;
263
+ }
264
+ }
265
+
266
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Checkbox/Checkbox.css */
267
+ .checkbox {
268
+ display: flex;
269
+ flex-direction: row;
270
+ justify-content: center;
271
+ align-items: center;
272
+ gap: 8px;
273
+ font-family: "Times New Roman", serif;
274
+ font-size: 14px;
275
+ line-height: 1.71;
276
+ font-weight: 400;
277
+ color: #212121;
278
+ cursor: pointer;
279
+ }
280
+ .checkbox .checkbox_input {
281
+ appearance: none;
282
+ background: #fffbea;
283
+ background-size: cover;
284
+ width: 14px;
285
+ height: 14px;
286
+ border: 2px solid #000;
287
+ cursor: pointer;
288
+ transition: all 0.15s ease-in-out;
289
+ position: relative;
290
+ }
291
+ .checkbox .checkbox_input:checked::after {
292
+ content: "\2713";
293
+ position: absolute;
294
+ top: 50%;
295
+ left: 50%;
296
+ transform: translate(-50%, -50%);
297
+ font-size: 12px;
298
+ line-height: 1.5;
299
+ font-weight: 400;
300
+ color: #212121;
301
+ }
302
+ .checkbox .checkbox_input:hover,
303
+ .checkbox .checkbox_input:active {
304
+ border-color: #b71c1c;
305
+ }
306
+ .checkbox .checkbox_input:checked {
307
+ background: #fffbea;
308
+ border-color: #b71c1c;
309
+ }
310
+ @media (min-width:640px) {
311
+ .checkbox {
312
+ font-size: 16px;
313
+ line-height: 1.625;
314
+ font-weight: 400;
315
+ color: #212121;
316
+ }
317
+ .checkbox .checkbox_input {
318
+ width: 16px;
319
+ height: 16px;
320
+ }
321
+ .checkbox .checkbox_input:checked::after {
322
+ font-size: 12px;
323
+ line-height: 1.5;
324
+ font-weight: 400;
325
+ color: #212121;
326
+ }
327
+ }
328
+ @media (min-width:768px) {
329
+ .checkbox {
330
+ font-size: 18px;
331
+ line-height: 1.556;
332
+ font-weight: 400;
333
+ color: #212121;
334
+ }
335
+ .checkbox .checkbox_input {
336
+ width: 18px;
337
+ height: 18px;
338
+ }
339
+ .checkbox .checkbox_input:checked::after {
340
+ font-size: 14px;
341
+ line-height: 1.71;
342
+ font-weight: 400;
343
+ color: #212121;
344
+ }
345
+ }
346
+ @media (min-width:1024px) {
347
+ .checkbox {
348
+ font-size: 20px;
349
+ line-height: 1.6;
350
+ font-weight: 400;
351
+ color: #212121;
352
+ }
353
+ .checkbox .checkbox_input {
354
+ width: 20px;
355
+ height: 20px;
356
+ }
357
+ .checkbox .checkbox_input:checked::after {
358
+ font-size: 16px;
359
+ line-height: 1.625;
360
+ font-weight: 400;
361
+ color: #212121;
362
+ }
363
+ }
364
+ @media (min-width:1280px) {
365
+ .checkbox {
366
+ font-size: 24px;
367
+ line-height: 1.333;
368
+ font-weight: 400;
369
+ color: #212121;
370
+ }
371
+ .checkbox .checkbox_input {
372
+ width: 22px;
373
+ height: 22px;
374
+ }
375
+ .checkbox .checkbox_input:checked::after {
376
+ font-size: 18px;
377
+ line-height: 1.556;
378
+ font-weight: 400;
379
+ color: #212121;
380
+ }
381
+ }
382
+
383
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Chips/Chips.css */
384
+ .chip {
385
+ width: fit-content;
386
+ height: fit-content;
387
+ font-family: "Times New Roman", serif;
388
+ padding: 4px 8px;
389
+ border: 2px solid #000;
390
+ border-radius: 0;
391
+ background: #fffbea;
392
+ background-size: cover;
393
+ cursor: pointer;
394
+ transition: all 0.15s ease-in-out;
395
+ display: flex;
396
+ flex-direction: row;
397
+ justify-content: space-between;
398
+ align-items: center;
399
+ font-size: 13px;
400
+ line-height: 1.69;
401
+ font-weight: 800;
402
+ color: #212121;
403
+ }
404
+ .chip:hover {
405
+ background-size: cover;
406
+ border-color: #c00;
407
+ color: #c00;
408
+ text-shadow: 1px 1px #fff;
409
+ }
410
+ .chip.selected {
411
+ background: #ff0;
412
+ border-color: #000;
413
+ font-size: 13px;
414
+ line-height: 1.69;
415
+ font-weight: 900;
416
+ color: #212121;
417
+ text-transform: uppercase;
418
+ }
419
+ @media (min-width:640px) {
420
+ .chip {
421
+ padding: 6px 12px;
422
+ font-size: 14px;
423
+ line-height: 1.71;
424
+ font-weight: 800;
425
+ color: #212121;
426
+ }
427
+ .chip.selected {
428
+ font-size: 14px;
429
+ line-height: 1.71;
430
+ font-weight: 900;
431
+ color: #212121;
432
+ }
433
+ }
434
+ @media (min-width:768px) {
435
+ .chip {
436
+ padding: 8px 16px;
437
+ font-size: 14px;
438
+ line-height: 1.71;
439
+ font-weight: 900;
440
+ color: #212121;
441
+ }
442
+ }
443
+ @media (min-width:1024px) {
444
+ .chip {
445
+ padding: 10px 18px;
446
+ font-size: 16px;
447
+ line-height: 1.625;
448
+ font-weight: 900;
449
+ color: #212121;
450
+ }
451
+ }
452
+ @media (min-width:1280px) {
453
+ .chip {
454
+ padding: 12px 20px;
455
+ font-size: 16px;
456
+ line-height: 1.625;
457
+ font-weight: 900;
458
+ color: #212121;
459
+ }
460
+ }
461
+ .chip-label {
462
+ margin-right: 4px;
463
+ }
464
+ @media (min-width:640px) {
465
+ .chip-label {
466
+ margin-right: 6px;
467
+ }
468
+ }
469
+ @media (min-width:768px) {
470
+ .chip-label {
471
+ margin-right: 8px;
472
+ }
473
+ }
474
+ @media (min-width:1024px) {
475
+ .chip-label {
476
+ margin-right: 10px;
477
+ }
478
+ }
479
+ @media (min-width:1280px) {
480
+ .chip-label {
481
+ margin-right: 12px;
482
+ }
483
+ }
484
+ .chip-remove {
485
+ width: 14px;
486
+ height: 14px;
487
+ border: 2px solid #000;
488
+ background: transparent;
489
+ cursor: pointer;
490
+ padding: 0;
491
+ transition: all 0.15s ease-in-out;
492
+ display: flex;
493
+ flex-direction: row;
494
+ justify-content: center;
495
+ align-items: center;
496
+ font-size: 13px;
497
+ line-height: 1.69;
498
+ font-weight: 900;
499
+ color: #212121;
500
+ }
501
+ .chip-remove:hover {
502
+ color: #c00;
503
+ background: #fff;
504
+ }
505
+ @media (min-width:640px) {
506
+ .chip-remove {
507
+ width: 16px;
508
+ height: 16px;
509
+ font-size: 14px;
510
+ line-height: 1.71;
511
+ font-weight: 900;
512
+ color: #212121;
513
+ }
514
+ }
515
+ @media (min-width:768px) {
516
+ .chip-remove {
517
+ width: 18px;
518
+ height: 18px;
519
+ font-size: 14px;
520
+ line-height: 1.71;
521
+ font-weight: 900;
522
+ color: #212121;
523
+ }
524
+ }
525
+ @media (min-width:1024px) {
526
+ .chip-remove {
527
+ width: 20px;
528
+ height: 20px;
529
+ font-size: 16px;
530
+ line-height: 1.625;
531
+ font-weight: 900;
532
+ color: #212121;
533
+ }
534
+ }
535
+ @media (min-width:1280px) {
536
+ .chip-remove {
537
+ width: 22px;
538
+ height: 22px;
539
+ font-size: 16px;
540
+ line-height: 1.625;
541
+ font-weight: 900;
542
+ color: #212121;
543
+ }
544
+ }
545
+
546
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Input/Input.css */
547
+ .input__wrapper {
548
+ position: relative;
549
+ cursor: text;
550
+ width: fit-content;
551
+ height: fit-content;
552
+ display: flex;
553
+ flex-direction: column;
554
+ justify-content: center;
555
+ align-items: center;
556
+ }
557
+ .input {
558
+ width: 100%;
559
+ padding: 6px 12px;
560
+ font-family: "Times New Roman", serif;
561
+ border: 2px solid #000;
562
+ border-radius: 0;
563
+ background: #fffbea;
564
+ background-size: cover;
565
+ font-size: 13px;
566
+ line-height: 1.69;
567
+ font-weight: 800;
568
+ color: #212121;
569
+ transition: all 0.15s ease-in-out;
570
+ box-sizing: border-box;
571
+ }
572
+ .input:hover {
573
+ text-shadow: 1px 1px #fff;
574
+ }
575
+ .input:focus {
576
+ outline: none;
577
+ text-shadow: 1px 1px #fff;
578
+ }
579
+ .input:active {
580
+ border-color: #000;
581
+ color: #212121;
582
+ text-shadow: none;
583
+ }
584
+ .input--title {
585
+ padding-top: 12px;
586
+ }
587
+ @media (min-width:640px) {
588
+ .input {
589
+ padding: 8px 16px;
590
+ font-size: 14px;
591
+ line-height: 1.71;
592
+ font-weight: 800;
593
+ color: #212121;
594
+ }
595
+ .input--title {
596
+ padding-top: 16px;
597
+ }
598
+ }
599
+ @media (min-width:768px) {
600
+ .input {
601
+ padding: 10px 18px;
602
+ font-size: 14px;
603
+ line-height: 1.71;
604
+ font-weight: 900;
605
+ color: #212121;
606
+ }
607
+ }
608
+ @media (min-width:1024px) {
609
+ .input {
610
+ padding: 12px 20px;
611
+ font-size: 16px;
612
+ line-height: 1.625;
613
+ font-weight: 900;
614
+ color: #212121;
615
+ }
616
+ }
617
+ @media (min-width:1280px) {
618
+ .input {
619
+ padding: 14px 24px;
620
+ font-size: 16px;
621
+ line-height: 1.625;
622
+ font-weight: 900;
623
+ color: #212121;
624
+ }
625
+ }
626
+ .input__placeholder {
627
+ position: absolute;
628
+ left: 6px;
629
+ top: -8px;
630
+ font-family: "Times New Roman", serif;
631
+ border: 2px solid #000;
632
+ font-size: 12px;
633
+ line-height: 1.5;
634
+ font-weight: 400;
635
+ color: #212121;
636
+ background: #fffbea;
637
+ padding: 0 3px;
638
+ pointer-events: none;
639
+ transition: 0.2s;
640
+ }
641
+ @media (min-width:640px) {
642
+ .input__placeholder {
643
+ left: 8px;
644
+ top: -10px;
645
+ padding: 0 4px;
646
+ font-size: 12px;
647
+ line-height: 1.5;
648
+ font-weight: 400;
649
+ color: #212121;
650
+ }
651
+ }
652
+ @media (min-width:768px) {
653
+ .input__placeholder {
654
+ font-size: 13px;
655
+ line-height: 1.69;
656
+ font-weight: 400;
657
+ color: #212121;
658
+ }
659
+ }
660
+ @media (min-width:1024px) {
661
+ .input__placeholder {
662
+ font-size: 13px;
663
+ line-height: 1.69;
664
+ font-weight: 500;
665
+ color: #212121;
666
+ }
667
+ }
668
+ @media (min-width:1280px) {
669
+ .input__placeholder {
670
+ font-size: 14px;
671
+ line-height: 1.71;
672
+ font-weight: 500;
673
+ color: #212121;
674
+ }
675
+ }
676
+ .input:focus + .input__placeholder,
677
+ .input:not(:placeholder-shown) + .input__placeholder {
678
+ background: #fffbea;
679
+ padding: 0 4px;
680
+ }
681
+
682
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Select/Select.css */
683
+ .select {
684
+ position: relative;
685
+ cursor: pointer;
686
+ font-family: "Times New Roman", serif;
687
+ }
688
+ .select__button {
689
+ width: 100%;
690
+ box-sizing: border-box;
691
+ padding: 6px 12px;
692
+ background: #fffbea;
693
+ background-repeat: repeat;
694
+ background-size: auto;
695
+ font-family: "Times New Roman", serif;
696
+ border: 2px solid #000;
697
+ font-size: 13px;
698
+ line-height: 1.69;
699
+ font-weight: 800;
700
+ color: #212121;
701
+ cursor: pointer;
702
+ transition: all 0.15s ease-in-out;
703
+ }
704
+ .select__button:hover,
705
+ .select__button:focus,
706
+ .select__button:active {
707
+ outline: none;
708
+ border-color: #b71c1c;
709
+ color: #b71c1c;
710
+ text-shadow: 1px 1px #fff;
711
+ }
712
+ @media (min-width:640px) {
713
+ .select__button {
714
+ padding: 8px 14px;
715
+ font-size: 14px;
716
+ line-height: 1.71;
717
+ font-weight: 800;
718
+ color: #212121;
719
+ }
720
+ }
721
+ @media (min-width:768px) {
722
+ .select__button {
723
+ padding: 10px 16px;
724
+ font-size: 14px;
725
+ line-height: 1.71;
726
+ font-weight: 900;
727
+ color: #212121;
728
+ }
729
+ }
730
+ @media (min-width:1024px) {
731
+ .select__button {
732
+ padding: 12px 18px;
733
+ font-size: 16px;
734
+ line-height: 1.625;
735
+ font-weight: 900;
736
+ color: #212121;
737
+ }
738
+ }
739
+ @media (min-width:1280px) {
740
+ .select__button {
741
+ padding: 14px 20px;
742
+ font-size: 16px;
743
+ line-height: 1.625;
744
+ font-weight: 900;
745
+ color: #212121;
746
+ }
747
+ }
748
+ .select__list {
749
+ box-sizing: border-box;
750
+ padding: 0;
751
+ position: absolute;
752
+ top: 100%;
753
+ left: 0;
754
+ width: 100%;
755
+ background: #fffbea;
756
+ background-repeat: repeat;
757
+ background-size: auto;
758
+ font-family: "Times New Roman", serif;
759
+ border: 2px solid #000;
760
+ margin: 4px 0 0 0;
761
+ z-index: 10;
762
+ font-size: 13px;
763
+ line-height: 1.69;
764
+ font-weight: 600;
765
+ color: #212121;
766
+ transition: all 0.15s ease-in-out;
767
+ }
768
+ @media (min-width:640px) {
769
+ .select__list {
770
+ font-size: 14px;
771
+ line-height: 1.71;
772
+ font-weight: 600;
773
+ color: #212121;
774
+ }
775
+ }
776
+ @media (min-width:768px) {
777
+ .select__list {
778
+ font-size: 14px;
779
+ line-height: 1.71;
780
+ font-weight: 700;
781
+ color: #212121;
782
+ }
783
+ }
784
+ @media (min-width:1024px) {
785
+ .select__list {
786
+ font-size: 16px;
787
+ line-height: 1.625;
788
+ font-weight: 700;
789
+ color: #212121;
790
+ }
791
+ }
792
+ @media (min-width:1280px) {
793
+ .select__list {
794
+ font-size: 16px;
795
+ line-height: 1.625;
796
+ font-weight: 800;
797
+ color: #212121;
798
+ }
799
+ }
800
+ .select__item {
801
+ padding: 6px 10px;
802
+ list-style: none;
803
+ margin: 0;
804
+ cursor: pointer;
805
+ background: transparent;
806
+ font-family: "Times New Roman", serif;
807
+ font-size: 13px;
808
+ line-height: 1.69;
809
+ font-weight: 400;
810
+ color: #212121;
811
+ transition: all 0.1s ease-in-out;
812
+ }
813
+ .select__item:hover,
814
+ .select__item:focus {
815
+ font-size: 13px;
816
+ line-height: 1.69;
817
+ font-weight: 700;
818
+ color: #b71c1c;
819
+ text-shadow: 1px 1px #fff;
820
+ }
821
+ @media (min-width:640px) {
822
+ .select__item {
823
+ padding: 7px 12px;
824
+ font-size: 14px;
825
+ line-height: 1.71;
826
+ font-weight: 400;
827
+ color: #212121;
828
+ }
829
+ .select__item:hover,
830
+ .select__item:focus {
831
+ font-size: 14px;
832
+ line-height: 1.71;
833
+ font-weight: 700;
834
+ color: #b71c1c;
835
+ }
836
+ }
837
+ @media (min-width:768px) {
838
+ .select__item {
839
+ padding: 8px 14px;
840
+ font-size: 14px;
841
+ line-height: 1.71;
842
+ font-weight: 500;
843
+ color: #212121;
844
+ }
845
+ .select__item:hover,
846
+ .select__item:focus {
847
+ font-size: 14px;
848
+ line-height: 1.71;
849
+ font-weight: 800;
850
+ color: #b71c1c;
851
+ }
852
+ }
853
+ @media (min-width:1024px) {
854
+ .select__item {
855
+ padding: 10px 16px;
856
+ font-size: 16px;
857
+ line-height: 1.625;
858
+ font-weight: 500;
859
+ color: #212121;
860
+ }
861
+ }
862
+ @media (min-width:1280px) {
863
+ .select__item {
864
+ padding: 12px 18px;
865
+ font-size: 16px;
866
+ line-height: 1.625;
867
+ font-weight: 600;
868
+ color: #212121;
869
+ }
870
+ }
871
+
872
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Slider/Slider.css */
873
+ .slider {
874
+ display: flex;
875
+ flex-direction: row;
876
+ justify-content: default;
877
+ align-items: center;
878
+ gap: 12px;
879
+ font-family: "Times New Roman", serif;
880
+ }
881
+ .slider__input {
882
+ -webkit-appearance: none;
883
+ appearance: none;
884
+ width: 200px;
885
+ height: 8px;
886
+ border-radius: 0;
887
+ background-size: cover;
888
+ cursor: pointer;
889
+ }
890
+ .slider__input::-webkit-slider-runnable-track {
891
+ height: 8px;
892
+ border: 2px solid #000;
893
+ background: #fff;
894
+ background-size: cover;
895
+ }
896
+ .slider__input::-moz-range-track {
897
+ height: 8px;
898
+ border: 2px solid #000;
899
+ background: #fff;
900
+ background-size: cover;
901
+ }
902
+ .slider__input::-webkit-slider-thumb {
903
+ -webkit-appearance: none;
904
+ margin-top: -8px;
905
+ width: 20px;
906
+ height: 20px;
907
+ border: 2px solid #000;
908
+ background: #fff;
909
+ background-size: cover;
910
+ cursor: pointer;
911
+ transition: all 0.15s ease-in-out;
912
+ border-radius: 0;
913
+ }
914
+ .slider__input::-webkit-slider-thumb:hover {
915
+ background: #fdd835;
916
+ transform: scale(1.1);
917
+ }
918
+ .slider__input::-moz-range-thumb {
919
+ width: 20px;
920
+ height: 20px;
921
+ border: 2px solid #000;
922
+ background: #fff;
923
+ background-size: cover;
924
+ cursor: pointer;
925
+ border-radius: 0;
926
+ transition: all 0.15s ease-in-out;
927
+ }
928
+ .slider__input::-moz-range-thumb:hover {
929
+ background: #fdd835;
930
+ transform: scale(1.1);
931
+ }
932
+ .slider__value {
933
+ display: inline-block;
934
+ min-width: 30px;
935
+ padding: 3px 6px;
936
+ border: 2px solid #000;
937
+ background-size: cover;
938
+ font-size: 13px;
939
+ line-height: 1.69;
940
+ font-weight: 800;
941
+ color: #212121;
942
+ text-align: center;
943
+ }
944
+ @media (min-width:640px) {
945
+ .slider__input {
946
+ width: 220px;
947
+ height: 6px;
948
+ }
949
+ .slider__input::-webkit-slider-thumb,
950
+ .slider__input::-moz-range-thumb {
951
+ width: 16px;
952
+ height: 16px;
953
+ }
954
+ .slider__value {
955
+ min-width: 28px;
956
+ padding: 2px 4px;
957
+ }
958
+ }
959
+ @media (min-width:768px) {
960
+ .slider__input {
961
+ width: 260px;
962
+ }
963
+ .slider__input::-webkit-slider-thumb,
964
+ .slider__input::-moz-range-thumb {
965
+ width: 18px;
966
+ height: 18px;
967
+ }
968
+ }
969
+ @media (min-width:1024px) {
970
+ .slider__input {
971
+ width: 300px;
972
+ }
973
+ .slider__input::-webkit-slider-thumb,
974
+ .slider__input::-moz-range-thumb {
975
+ width: 20px;
976
+ height: 20px;
977
+ }
978
+ }
979
+ @media (min-width:1280px) {
980
+ .slider__input {
981
+ width: 340px;
982
+ }
983
+ .slider__input::-webkit-slider-thumb,
984
+ .slider__input::-moz-range-thumb {
985
+ width: 22px;
986
+ height: 22px;
987
+ }
988
+ }
989
+
990
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Switch/Switch.css */
991
+ .switch {
992
+ display: inline-flex;
993
+ align-items: center;
994
+ cursor: pointer;
995
+ position: relative;
996
+ }
997
+ .switch .switch__input {
998
+ opacity: 0;
999
+ width: 0;
1000
+ height: 0;
1001
+ position: absolute;
1002
+ }
1003
+ .switch .switch__slider {
1004
+ position: relative;
1005
+ width: 40px;
1006
+ height: 20px;
1007
+ background: #fff;
1008
+ border: 1px solid #757575;
1009
+ transition: background-color 0.3s;
1010
+ }
1011
+ .switch .switch__slider::before {
1012
+ content: "";
1013
+ position: absolute;
1014
+ left: 2px;
1015
+ top: 2px;
1016
+ width: 16px;
1017
+ height: 16px;
1018
+ background: #9e9e9e;
1019
+ transition: left 0.3s ease, background-color 0.3s ease;
1020
+ box-shadow: 0 1px 4px #bdbdbd;
1021
+ }
1022
+ .switch .switch__input:checked + .switch__slider::before {
1023
+ left: 22px;
1024
+ background: #e57373;
1025
+ }
1026
+ .switch .switch__label {
1027
+ margin-left: 6px;
1028
+ user-select: none;
1029
+ font-size: 13px;
1030
+ line-height: 1.69;
1031
+ font-weight: 500;
1032
+ color: #212121;
1033
+ }
1034
+ .switch.switch--disabled {
1035
+ cursor: not-allowed;
1036
+ opacity: 0.5;
1037
+ }
1038
+ @media (min-width:640px) {
1039
+ .switch .switch__slider {
1040
+ width: 50px;
1041
+ height: 25px;
1042
+ }
1043
+ .switch .switch__slider::before {
1044
+ width: 21px;
1045
+ height: 21px;
1046
+ }
1047
+ .switch .switch__input:checked + .switch__slider::before {
1048
+ left: 27px;
1049
+ }
1050
+ .switch .switch__label {
1051
+ margin-left: 8px;
1052
+ font-size: 14px;
1053
+ line-height: 1.71;
1054
+ font-weight: 500;
1055
+ color: #212121;
1056
+ }
1057
+ }
1058
+ @media (min-width:768px) {
1059
+ .switch .switch__slider {
1060
+ width: 60px;
1061
+ height: 30px;
1062
+ }
1063
+ .switch .switch__slider::before {
1064
+ width: 26px;
1065
+ height: 26px;
1066
+ }
1067
+ .switch .switch__input:checked + .switch__slider::before {
1068
+ left: 32px;
1069
+ }
1070
+ .switch .switch__label {
1071
+ margin-left: 10px;
1072
+ font-size: 16px;
1073
+ line-height: 1.625;
1074
+ font-weight: 500;
1075
+ color: #212121;
1076
+ }
1077
+ }
1078
+ @media (min-width:1024px) {
1079
+ .switch .switch__slider {
1080
+ width: 70px;
1081
+ height: 35px;
1082
+ }
1083
+ .switch .switch__slider::before {
1084
+ width: 31px;
1085
+ height: 31px;
1086
+ }
1087
+ .switch .switch__input:checked + .switch__slider::before {
1088
+ left: 37px;
1089
+ }
1090
+ .switch .switch__label {
1091
+ margin-left: 12px;
1092
+ font-size: 16px;
1093
+ line-height: 1.625;
1094
+ font-weight: 600;
1095
+ color: #212121;
1096
+ }
1097
+ }
1098
+ @media (min-width:1280px) {
1099
+ .switch .switch__slider {
1100
+ width: 80px;
1101
+ height: 40px;
1102
+ }
1103
+ .switch .switch__slider::before {
1104
+ width: 36px;
1105
+ height: 36px;
1106
+ }
1107
+ .switch .switch__input:checked + .switch__slider::before {
1108
+ left: 42px;
1109
+ }
1110
+ .switch .switch__label {
1111
+ margin-left: 14px;
1112
+ font-size: 16px;
1113
+ line-height: 1.625;
1114
+ font-weight: 700;
1115
+ color: #212121;
1116
+ }
1117
+ }
1118
+
1119
+ /* ../../../../../tmp/tmp-2289-XdAxeBL3O2Xp/xp-components/src/components/Tag/Tag.css */
1120
+ .tag {
1121
+ display: inline-flex;
1122
+ align-items: center;
1123
+ gap: 4px;
1124
+ font-family: "Times New Roman", serif;
1125
+ font-size: 13px;
1126
+ line-height: 1.69;
1127
+ font-weight: 800;
1128
+ color: #212121;
1129
+ }
1130
+ .tag--sm {
1131
+ padding: 4px 8px;
1132
+ font-size: 12px;
1133
+ border-radius: 4px;
1134
+ }
1135
+ .tag--md {
1136
+ padding: 6px 12px;
1137
+ font-size: 14px;
1138
+ border-radius: 6px;
1139
+ }
1140
+ .tag--lg {
1141
+ padding: 8px 16px;
1142
+ font-size: 16px;
1143
+ border-radius: 8px;
1144
+ }
1145
+ .tag--default {
1146
+ background: #eeeeee;
1147
+ color: #212121;
1148
+ }
1149
+ .tag--default .tag__close {
1150
+ color: #212121;
1151
+ }
1152
+ .tag--success {
1153
+ background: #d4edda;
1154
+ color: #155724;
1155
+ }
1156
+ .tag--success .tag__close {
1157
+ color: #155724;
1158
+ }
1159
+ .tag--warning {
1160
+ background: #ffe0b2;
1161
+ color: #e65100;
1162
+ }
1163
+ .tag--warning .tag__close {
1164
+ color: #e65100;
1165
+ }
1166
+ .tag--error {
1167
+ background: #ffcdd2;
1168
+ color: #b71c1c;
1169
+ }
1170
+ .tag--error .tag__close {
1171
+ color: #b71c1c;
1172
+ }
1173
+ .tag--outline {
1174
+ border: 1px solid #bdbdbd;
1175
+ color: #212121;
1176
+ background: transparent;
1177
+ }
1178
+ .tag--outline .tag__close {
1179
+ color: #212121;
1180
+ }
1181
+ .tag__icon {
1182
+ margin-right: 4px;
1183
+ }
1184
+ .tag__close {
1185
+ background: none;
1186
+ border: none;
1187
+ cursor: pointer;
1188
+ font-size: 13px;
1189
+ line-height: 1.69;
1190
+ font-weight: 600;
1191
+ padding: 0;
1192
+ }
1193
+ @media (min-width:640px) {
1194
+ .tag--sm {
1195
+ padding: 5px 10px;
1196
+ font-size: 13px;
1197
+ }
1198
+ .tag--md {
1199
+ padding: 7px 14px;
1200
+ font-size: 15px;
1201
+ }
1202
+ .tag--lg {
1203
+ padding: 9px 18px;
1204
+ font-size: 17px;
1205
+ }
1206
+ .tag__close {
1207
+ font-size: 14px;
1208
+ line-height: 1.71;
1209
+ font-weight: 600;
1210
+ }
1211
+ }
1212
+ @media (min-width:768px) {
1213
+ .tag--sm {
1214
+ padding: 6px 12px;
1215
+ font-size: 14px;
1216
+ }
1217
+ .tag--md {
1218
+ padding: 8px 16px;
1219
+ font-size: 16px;
1220
+ }
1221
+ .tag--lg {
1222
+ padding: 10px 20px;
1223
+ font-size: 18px;
1224
+ }
1225
+ .tag__close {
1226
+ font-size: 14px;
1227
+ line-height: 1.71;
1228
+ font-weight: 700;
1229
+ }
1230
+ }
1231
+ @media (min-width:1024px) {
1232
+ .tag--sm {
1233
+ padding: 7px 14px;
1234
+ font-size: 15px;
1235
+ }
1236
+ .tag--md {
1237
+ padding: 9px 18px;
1238
+ font-size: 17px;
1239
+ }
1240
+ .tag--lg {
1241
+ padding: 11px 22px;
1242
+ font-size: 19px;
1243
+ }
1244
+ .tag__close {
1245
+ font-size: 16px;
1246
+ line-height: 1.625;
1247
+ font-weight: 700;
1248
+ }
1249
+ }
1250
+ @media (min-width:1280px) {
1251
+ .tag--sm {
1252
+ padding: 8px 16px;
1253
+ font-size: 16px;
1254
+ }
1255
+ .tag--md {
1256
+ padding: 10px 20px;
1257
+ font-size: 18px;
1258
+ }
1259
+ .tag--lg {
1260
+ padding: 12px 24px;
1261
+ font-size: 20px;
1262
+ }
1263
+ .tag__close {
1264
+ font-size: 16px;
1265
+ line-height: 1.625;
1266
+ font-weight: 800;
1267
+ }
1268
+ }