@ramong26/xp-components 1.0.16 → 1.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.
package/dist/index.css CHANGED
@@ -1,5 +1,3 @@
1
- @charset "UTF-8";
2
-
3
1
  /* src/App.css */
4
2
  #root {
5
3
  max-width: 1280px;
@@ -39,81 +37,125 @@
39
37
  color: #888;
40
38
  }
41
39
 
42
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Button/Button.css */
40
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Button/Button.css */
43
41
  .btn {
44
- background: #fffbea;
45
- background-size: cover;
42
+ background-color: #fffbea;
43
+ background-image: url("./paper-DM7JLBKK.png");
44
+ background-repeat: repeat;
45
+ background-size: auto;
46
+ color: #212121;
47
+ border: 2px solid #000;
48
+ box-shadow: 3px 3px 0 #000;
49
+ transition:
50
+ background-color 0.15s ease-in-out,
51
+ color 0.15s ease-in-out,
52
+ border-color 0.15s ease-in-out,
53
+ box-shadow 0.15s ease-in-out,
54
+ transform 0.15s ease-in-out;
46
55
  font-family: "Times New Roman", serif;
47
- padding: 6px 18px;
56
+ display: inline-flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ gap: 0.5rem;
60
+ text-decoration: none;
48
61
  cursor: pointer;
49
- transition: all 0.15s ease-in-out;
50
- border: 2px solid;
62
+ }
63
+ .btn:hover,
64
+ .btn:focus-visible,
65
+ .btn:active {
66
+ transform: translate(1px, 1px);
67
+ box-shadow: 2px 2px 0 #000;
68
+ }
69
+ .btn:focus-visible {
70
+ outline: 2px solid #000;
71
+ outline-offset: 2px;
72
+ }
73
+ .btn--sm {
51
74
  font-size: 13px;
52
75
  line-height: 1.69;
53
76
  font-weight: 800;
54
77
  color: #212121;
55
- padding: 5px 12px;
56
- }
57
- @media (min-width:640px) {
58
- .btn {
59
- font-size: 13px;
60
- line-height: 1.69;
61
- font-weight: 800;
62
- color: #212121;
63
- padding: 6px 14px;
64
- }
78
+ padding: 0.35rem 0.75rem;
65
79
  }
66
- @media (min-width:768px) {
67
- .btn {
68
- font-size: 14px;
69
- line-height: 1.71;
70
- font-weight: 800;
71
- color: #212121;
72
- padding: 8px 16px;
73
- }
74
- }
75
- @media (min-width:1024px) {
76
- .btn {
77
- padding: 10px 20px;
78
- }
80
+ .btn--md {
81
+ font-size: 14px;
82
+ line-height: 1.71;
83
+ font-weight: 800;
84
+ color: #212121;
85
+ padding: 0.5rem 0.95rem;
79
86
  }
80
- @media (min-width:1280px) {
81
- .btn {
82
- padding: 12px 24px;
83
- }
87
+ .btn--lg {
88
+ font-size: 16px;
89
+ line-height: 1.625;
90
+ font-weight: 900;
91
+ color: #212121;
92
+ padding: 0.7rem 1.25rem;
84
93
  }
85
- .btn--default {
86
- border-color: #000;
94
+ .btn:disabled {
95
+ cursor: not-allowed;
96
+ opacity: 0.6;
97
+ box-shadow: none;
98
+ transform: none;
87
99
  }
88
- .btn--default:hover,
89
- .btn--default:focus,
90
- .btn--default:active {
91
- background: #eeeeee;
92
- border-color: #212121;
93
- color: #212121;
94
- text-shadow: 1px 1px #fff;
100
+ .btn--primary {
101
+ background-color: #fffbea;
95
102
  }
96
103
  .btn--secondary {
97
- background: #ffcdd2;
104
+ background-color: #ffcdd2;
98
105
  border-color: #b71c1c;
99
106
  color: #b71c1c;
107
+ box-shadow: 3px 3px 0 #b71c1c;
100
108
  }
101
109
  .btn--secondary:hover,
102
- .btn--secondary:focus,
110
+ .btn--secondary:focus-visible,
103
111
  .btn--secondary:active {
104
- background: #b71c1c;
112
+ background-color: #b71c1c;
113
+ color: #fff;
114
+ border-color: #000;
115
+ box-shadow: 2px 2px 0 #000;
116
+ }
117
+ .btn--ghost {
118
+ background-image: none;
119
+ background-color: transparent;
120
+ color: #212121;
121
+ border-color: #212121;
122
+ box-shadow: 3px 3px 0 #bdbdbd;
123
+ }
124
+ .btn--ghost:hover,
125
+ .btn--ghost:focus-visible,
126
+ .btn--ghost:active {
127
+ background-color: #f5f5f5;
128
+ color: #000;
129
+ border-color: #000;
130
+ box-shadow: 2px 2px 0 #9e9e9e;
131
+ }
132
+ .btn--danger {
133
+ background-color: #d32f2f;
134
+ background-image: none;
105
135
  color: #fff;
106
136
  border-color: #000;
137
+ box-shadow: 3px 3px 0 #b71c1c;
138
+ }
139
+ .btn--danger:hover,
140
+ .btn--danger:focus-visible,
141
+ .btn--danger:active {
142
+ background-color: #b71c1c;
143
+ border-color: #000;
144
+ box-shadow: 2px 2px 0 #000;
107
145
  }
108
146
 
109
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Carousel/Carousel.css */
147
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Carousel/Carousel.css */
110
148
  .carousel {
111
- position: relative;
112
- overflow: hidden;
113
- border: 2px solid #000;
149
+ background-color: #fffbea;
150
+ background-image: url("./paper-DM7JLBKK.png");
114
151
  background-repeat: repeat;
115
152
  background-size: auto;
153
+ color: #212121;
154
+ border: 2px solid #000;
155
+ position: relative;
156
+ overflow: hidden;
116
157
  font-family: "Times New Roman", serif;
158
+ box-shadow: 6px 6px 0 #000;
117
159
  }
118
160
  .carousel__container {
119
161
  width: 100%;
@@ -122,1147 +164,617 @@
122
164
  .carousel__list {
123
165
  display: flex;
124
166
  transition: transform 0.4s ease-in-out;
167
+ margin: 0;
168
+ padding: 0;
125
169
  }
126
170
  .carousel__item {
127
- display: flex;
128
- flex-direction: row;
129
- justify-content: space-around;
171
+ display: grid;
172
+ grid-template-columns: minmax(180px, 280px) 1fr;
173
+ gap: 1rem;
130
174
  align-items: center;
131
- cursor: pointer;
132
175
  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;
176
+ padding: 1.2rem;
177
+ list-style: none;
178
+ cursor: pointer;
139
179
  }
140
180
  .carousel__image {
141
- max-width: 100%;
142
- height: auto;
143
- margin-bottom: 12px;
181
+ width: 100%;
182
+ max-width: 260px;
183
+ border: 2px solid #000;
184
+ box-shadow: 4px 4px 0 #b71c1c;
185
+ justify-self: center;
144
186
  }
145
187
  .carousel__title {
188
+ margin: 0 0 0.45rem;
189
+ text-transform: uppercase;
146
190
  font-size: 24px;
147
191
  line-height: 1.333;
148
- font-weight: 800;
192
+ font-weight: 900;
149
193
  color: #b71c1c;
150
- margin-bottom: 6px;
151
- text-transform: uppercase;
152
194
  }
153
195
  .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;
196
+ margin: 0;
197
+ font-size: 14px;
198
+ line-height: 1.71;
199
+ font-weight: 600;
200
+ color: #424242;
181
201
  }
182
202
  .carousel__indicators {
183
203
  display: flex;
184
- flex-direction: row;
185
204
  justify-content: center;
186
- align-items: center;
187
- gap: 8px;
188
- margin: 12px;
205
+ gap: 0.45rem;
206
+ padding: 0 0 1rem;
189
207
  }
190
208
  .carousel__indicator {
191
- width: 16px;
192
- height: 16px;
209
+ background-color: #fffbea;
210
+ background-image: url("./paper-DM7JLBKK.png");
211
+ background-repeat: repeat;
212
+ background-size: auto;
213
+ color: #212121;
193
214
  border: 2px solid #000;
194
- background-size: cover;
215
+ width: 18px;
216
+ height: 18px;
195
217
  cursor: pointer;
196
- transition: all 0.2s ease-in-out;
218
+ box-shadow: 2px 2px 0 #000;
197
219
  }
198
220
  .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
- }
221
+ background-color: #fff59d;
222
+ border-color: #b71c1c;
223
+ box-shadow: 2px 2px 0 #b71c1c;
216
224
  }
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
- }
225
+ .carousel--headline {
226
+ border-color: #b71c1c;
227
+ box-shadow: 6px 6px 0 #b71c1c;
232
228
  }
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
- }
229
+ .carousel--headline .carousel__title {
230
+ font-size: 32px;
231
+ line-height: 1.313;
232
+ font-weight: 900;
233
+ color: #000;
248
234
  }
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
- }
235
+ .carousel--headline .carousel__text {
236
+ font-size: 16px;
237
+ line-height: 1.625;
238
+ font-weight: 700;
239
+ color: #212121;
264
240
  }
265
241
 
266
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Checkbox/Checkbox.css */
242
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Checkbox/Checkbox.css */
267
243
  .checkbox {
268
- display: flex;
269
- flex-direction: row;
270
- justify-content: center;
244
+ display: inline-flex;
271
245
  align-items: center;
272
- gap: 8px;
246
+ gap: 0.55rem;
273
247
  font-family: "Times New Roman", serif;
248
+ cursor: pointer;
274
249
  font-size: 14px;
275
250
  line-height: 1.71;
276
- font-weight: 400;
251
+ font-weight: 700;
277
252
  color: #212121;
278
- cursor: pointer;
279
253
  }
280
- .checkbox .checkbox_input {
281
- appearance: none;
282
- background: #fffbea;
283
- background-size: cover;
284
- width: 14px;
285
- height: 14px;
254
+ .checkbox__input {
255
+ position: absolute;
256
+ opacity: 0;
257
+ pointer-events: none;
258
+ }
259
+ .checkbox__box {
260
+ background-color: #fffbea;
261
+ background-image: url("./paper-DM7JLBKK.png");
262
+ background-repeat: repeat;
263
+ background-size: auto;
264
+ color: #212121;
286
265
  border: 2px solid #000;
287
- cursor: pointer;
288
- transition: all 0.15s ease-in-out;
266
+ box-shadow: 3px 3px 0 #000;
267
+ transition:
268
+ background-color 0.15s ease-in-out,
269
+ color 0.15s ease-in-out,
270
+ border-color 0.15s ease-in-out,
271
+ box-shadow 0.15s ease-in-out,
272
+ transform 0.15s ease-in-out;
289
273
  position: relative;
274
+ width: 18px;
275
+ height: 18px;
276
+ flex-shrink: 0;
277
+ display: inline-block;
290
278
  }
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;
279
+ .checkbox__box:hover,
280
+ .checkbox__box:focus-visible,
281
+ .checkbox__box:active {
282
+ transform: translate(1px, 1px);
283
+ box-shadow: 2px 2px 0 #000;
301
284
  }
302
- .checkbox .checkbox_input:hover,
303
- .checkbox .checkbox_input:active {
304
- border-color: #b71c1c;
285
+ .checkbox__box:focus-visible {
286
+ outline: 2px solid #000;
287
+ outline-offset: 2px;
305
288
  }
306
- .checkbox .checkbox_input:checked {
307
- background: #fffbea;
308
- border-color: #b71c1c;
289
+ .checkbox__label {
290
+ user-select: none;
309
291
  }
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
- }
292
+ .checkbox__input:focus-visible + .checkbox__box {
293
+ outline: 2px solid #000;
294
+ outline-offset: 2px;
327
295
  }
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
- }
296
+ .checkbox__input:checked + .checkbox__box::after {
297
+ content: "X";
298
+ position: absolute;
299
+ inset: 0;
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+ font-size: 13px;
304
+ line-height: 1.69;
305
+ font-weight: 900;
306
+ color: #212121;
345
307
  }
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
- }
308
+ .checkbox__input:disabled + .checkbox__box,
309
+ .checkbox__input:disabled ~ .checkbox__label {
310
+ opacity: 0.55;
311
+ cursor: not-allowed;
363
312
  }
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
- }
313
+ .checkbox--accent .checkbox__box {
314
+ border-color: #b71c1c;
315
+ box-shadow: 3px 3px 0 #b71c1c;
316
+ }
317
+ .checkbox--accent .checkbox__input:checked + .checkbox__box {
318
+ background-color: #ffcdd2;
381
319
  }
382
320
 
383
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Chips/Chips.css */
321
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Chips/Chips.css */
384
322
  .chip {
323
+ background-color: #fffbea;
324
+ background-image: url("./paper-DM7JLBKK.png");
325
+ background-repeat: repeat;
326
+ background-size: auto;
327
+ color: #212121;
328
+ border: 2px solid #000;
329
+ box-shadow: 3px 3px 0 #000;
330
+ transition:
331
+ background-color 0.15s ease-in-out,
332
+ color 0.15s ease-in-out,
333
+ border-color 0.15s ease-in-out,
334
+ box-shadow 0.15s ease-in-out,
335
+ transform 0.15s ease-in-out;
336
+ display: inline-flex;
337
+ align-items: center;
338
+ gap: 0.5rem;
385
339
  width: fit-content;
386
- height: fit-content;
387
340
  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;
341
+ padding: 0.35rem 0.75rem;
393
342
  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
343
  font-size: 13px;
400
344
  line-height: 1.69;
401
345
  font-weight: 800;
402
346
  color: #212121;
403
347
  }
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
- }
348
+ .chip:hover,
349
+ .chip:focus-visible,
350
+ .chip:active {
351
+ transform: translate(1px, 1px);
352
+ box-shadow: 2px 2px 0 #000;
460
353
  }
461
- .chip-label {
462
- margin-right: 4px;
354
+ .chip:focus-visible {
355
+ outline: 2px solid #000;
356
+ outline-offset: 2px;
463
357
  }
464
- @media (min-width:640px) {
465
- .chip-label {
466
- margin-right: 6px;
467
- }
358
+ .chip--accent {
359
+ background-color: #fff9c4;
360
+ border-color: #b71c1c;
361
+ color: #b71c1c;
362
+ box-shadow: 3px 3px 0 #b71c1c;
468
363
  }
469
- @media (min-width:768px) {
470
- .chip-label {
471
- margin-right: 8px;
472
- }
364
+ .chip--muted {
365
+ background-color: #f5f5f5;
366
+ color: #616161;
367
+ border-color: #9e9e9e;
368
+ box-shadow: 3px 3px 0 #9e9e9e;
473
369
  }
474
- @media (min-width:1024px) {
475
- .chip-label {
476
- margin-right: 10px;
477
- }
370
+ .chip.is-selected {
371
+ background-color: #fff59d;
372
+ text-transform: uppercase;
478
373
  }
479
- @media (min-width:1280px) {
480
- .chip-label {
481
- margin-right: 12px;
482
- }
374
+ .chip__label {
375
+ white-space: nowrap;
483
376
  }
484
- .chip-remove {
485
- width: 14px;
486
- height: 14px;
377
+ .chip__remove {
378
+ background-color: #fffbea;
379
+ background-image: url("./paper-DM7JLBKK.png");
380
+ background-repeat: repeat;
381
+ background-size: auto;
382
+ color: #212121;
487
383
  border: 2px solid #000;
488
- background: transparent;
489
- cursor: pointer;
384
+ width: 18px;
385
+ height: 18px;
490
386
  padding: 0;
491
- transition: all 0.15s ease-in-out;
492
- display: flex;
493
- flex-direction: row;
494
- justify-content: center;
387
+ cursor: pointer;
388
+ display: inline-flex;
495
389
  align-items: center;
496
- font-size: 13px;
497
- line-height: 1.69;
390
+ justify-content: center;
391
+ font-size: 12px;
392
+ line-height: 1.5;
498
393
  font-weight: 900;
499
394
  color: #212121;
500
395
  }
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
396
 
546
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Input/Input.css */
397
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Input/Input.css */
547
398
  .input__wrapper {
548
399
  position: relative;
549
- cursor: text;
550
400
  width: fit-content;
551
- height: fit-content;
552
- display: flex;
553
- flex-direction: column;
554
- justify-content: center;
555
- align-items: center;
401
+ min-width: 220px;
556
402
  }
557
403
  .input {
404
+ background-color: #fffbea;
405
+ background-image: url("./paper-DM7JLBKK.png");
406
+ background-repeat: repeat;
407
+ background-size: auto;
408
+ color: #212121;
409
+ border: 2px solid #000;
410
+ box-shadow: 3px 3px 0 #000;
411
+ transition:
412
+ background-color 0.15s ease-in-out,
413
+ color 0.15s ease-in-out,
414
+ border-color 0.15s ease-in-out,
415
+ box-shadow 0.15s ease-in-out,
416
+ transform 0.15s ease-in-out;
558
417
  width: 100%;
559
- padding: 6px 12px;
418
+ box-sizing: border-box;
560
419
  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;
420
+ font-size: 14px;
421
+ line-height: 1.71;
567
422
  font-weight: 800;
568
423
  color: #212121;
569
- transition: all 0.15s ease-in-out;
570
- box-sizing: border-box;
424
+ padding: 0.6rem 0.85rem;
571
425
  }
572
- .input:hover {
573
- text-shadow: 1px 1px #fff;
426
+ .input:hover,
427
+ .input:focus-visible,
428
+ .input:active {
429
+ transform: translate(1px, 1px);
430
+ box-shadow: 2px 2px 0 #000;
574
431
  }
575
- .input:focus {
576
- outline: none;
577
- text-shadow: 1px 1px #fff;
432
+ .input::placeholder {
433
+ color: #757575;
578
434
  }
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
- }
435
+ .input:focus,
436
+ .input:focus-visible {
437
+ outline: none;
598
438
  }
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
- }
439
+ .input--title,
440
+ .input--search {
441
+ padding-top: 1rem;
607
442
  }
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
- }
443
+ .input--search {
444
+ padding-left: 2.1rem;
616
445
  }
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
- }
446
+ .input--search::placeholder {
447
+ color: #b71c1c;
625
448
  }
626
- .input__placeholder {
627
- position: absolute;
628
- left: 6px;
629
- top: -8px;
630
- font-family: "Times New Roman", serif;
449
+ .input__label {
450
+ background-color: #fffbea;
451
+ background-image: url("./paper-DM7JLBKK.png");
452
+ background-repeat: repeat;
453
+ background-size: auto;
454
+ color: #212121;
631
455
  border: 2px solid #000;
456
+ position: absolute;
457
+ left: 0.55rem;
458
+ top: -0.7rem;
459
+ padding: 0 0.35rem;
460
+ pointer-events: none;
632
461
  font-size: 12px;
633
462
  line-height: 1.5;
634
- font-weight: 400;
463
+ font-weight: 700;
635
464
  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
465
  }
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;
466
+ .input--search + .input__label::before {
467
+ content: "?";
468
+ margin-right: 0.25rem;
680
469
  }
681
470
 
682
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Select/Select.css */
471
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Select/Select.css */
683
472
  .select {
684
473
  position: relative;
685
- cursor: pointer;
474
+ width: 240px;
686
475
  font-family: "Times New Roman", serif;
687
476
  }
688
477
  .select__button {
689
- width: 100%;
690
- box-sizing: border-box;
691
- padding: 6px 12px;
692
- background: #fffbea;
478
+ background-color: #fffbea;
479
+ background-image: url("./paper-DM7JLBKK.png");
693
480
  background-repeat: repeat;
694
481
  background-size: auto;
695
- font-family: "Times New Roman", serif;
482
+ color: #212121;
696
483
  border: 2px solid #000;
697
- font-size: 13px;
698
- line-height: 1.69;
484
+ box-shadow: 3px 3px 0 #000;
485
+ transition:
486
+ background-color 0.15s ease-in-out,
487
+ color 0.15s ease-in-out,
488
+ border-color 0.15s ease-in-out,
489
+ box-shadow 0.15s ease-in-out,
490
+ transform 0.15s ease-in-out;
491
+ width: 100%;
492
+ box-sizing: border-box;
493
+ padding: 0.6rem 0.85rem;
494
+ display: inline-flex;
495
+ align-items: center;
496
+ justify-content: space-between;
497
+ font-size: 14px;
498
+ line-height: 1.71;
699
499
  font-weight: 800;
700
500
  color: #212121;
701
501
  cursor: pointer;
702
- transition: all 0.15s ease-in-out;
703
502
  }
704
503
  .select__button:hover,
705
- .select__button:focus,
504
+ .select__button:focus-visible,
706
505
  .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
- }
506
+ transform: translate(1px, 1px);
507
+ box-shadow: 2px 2px 0 #000;
720
508
  }
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
- }
509
+ .select__button:focus-visible {
510
+ outline: 2px solid #000;
511
+ outline-offset: 2px;
738
512
  }
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
- }
513
+ .select__caret {
514
+ margin-left: 0.75rem;
515
+ font-size: 14px;
516
+ line-height: 1.71;
517
+ font-weight: 900;
518
+ color: #b71c1c;
747
519
  }
748
520
  .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;
521
+ background-color: #fffbea;
522
+ background-image: url("./paper-DM7JLBKK.png");
756
523
  background-repeat: repeat;
757
524
  background-size: auto;
758
- font-family: "Times New Roman", serif;
525
+ color: #212121;
759
526
  border: 2px solid #000;
760
- margin: 4px 0 0 0;
527
+ width: 100%;
528
+ box-sizing: border-box;
529
+ list-style: none;
530
+ padding: 0.3rem;
531
+ position: absolute;
532
+ top: calc(100% + 6px);
533
+ left: 0;
534
+ margin: 0;
761
535
  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
- }
536
+ box-shadow: 4px 4px 0 #000;
799
537
  }
800
538
  .select__item {
801
- padding: 6px 10px;
802
- list-style: none;
803
- margin: 0;
539
+ padding: 0.45rem 0.55rem;
804
540
  cursor: pointer;
805
- background: transparent;
806
- font-family: "Times New Roman", serif;
807
541
  font-size: 13px;
808
542
  line-height: 1.69;
809
- font-weight: 400;
543
+ font-weight: 700;
810
544
  color: #212121;
811
- transition: all 0.1s ease-in-out;
812
545
  }
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
- }
546
+ .select__item.is-focused,
547
+ .select__item:hover {
548
+ background-color: #fff9c4;
836
549
  }
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
- }
550
+ .select__item.is-selected {
551
+ color: #b71c1c;
552
+ text-transform: uppercase;
852
553
  }
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
- }
554
+ .select--accent .select__button {
555
+ border-color: #b71c1c;
556
+ box-shadow: 3px 3px 0 #b71c1c;
861
557
  }
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
- }
558
+ .select--accent .select__list {
559
+ border-color: #b71c1c;
560
+ box-shadow: 4px 4px 0 #b71c1c;
870
561
  }
871
562
 
872
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Slider/Slider.css */
563
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Slider/Slider.css */
873
564
  .slider {
874
- display: flex;
875
- flex-direction: row;
876
- justify-content: default;
565
+ display: inline-flex;
877
566
  align-items: center;
878
- gap: 12px;
567
+ gap: 0.75rem;
879
568
  font-family: "Times New Roman", serif;
880
569
  }
881
570
  .slider__input {
882
571
  -webkit-appearance: none;
883
572
  appearance: none;
884
- width: 200px;
885
- height: 8px;
886
- border-radius: 0;
887
- background-size: cover;
573
+ width: 220px;
574
+ height: 10px;
575
+ background-color: #fffbea;
576
+ background-image: url("./paper-DM7JLBKK.png");
577
+ background-repeat: repeat;
578
+ background-size: auto;
579
+ color: #212121;
580
+ border: 2px solid #000;
888
581
  cursor: pointer;
889
582
  }
890
583
  .slider__input::-webkit-slider-runnable-track {
891
- height: 8px;
584
+ height: 10px;
585
+ background-color: #fffbea;
586
+ background-image: url("./paper-DM7JLBKK.png");
587
+ background-repeat: repeat;
588
+ background-size: auto;
589
+ color: #212121;
892
590
  border: 2px solid #000;
893
- background: #fff;
894
- background-size: cover;
895
591
  }
896
592
  .slider__input::-moz-range-track {
897
- height: 8px;
593
+ height: 10px;
594
+ background-color: #fffbea;
595
+ background-image: url("./paper-DM7JLBKK.png");
596
+ background-repeat: repeat;
597
+ background-size: auto;
598
+ color: #212121;
898
599
  border: 2px solid #000;
899
- background: #fff;
900
- background-size: cover;
901
600
  }
902
601
  .slider__input::-webkit-slider-thumb {
903
602
  -webkit-appearance: none;
904
- margin-top: -8px;
905
603
  width: 20px;
906
604
  height: 20px;
605
+ margin-top: -7px;
606
+ background-color: #fffbea;
607
+ background-image: url("./paper-DM7JLBKK.png");
608
+ background-repeat: repeat;
609
+ background-size: auto;
610
+ color: #212121;
907
611
  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);
612
+ box-shadow: 2px 2px 0 #000;
917
613
  }
918
614
  .slider__input::-moz-range-thumb {
919
615
  width: 20px;
920
616
  height: 20px;
617
+ background-color: #fffbea;
618
+ background-image: url("./paper-DM7JLBKK.png");
619
+ background-repeat: repeat;
620
+ background-size: auto;
621
+ color: #212121;
921
622
  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);
623
+ box-shadow: 2px 2px 0 #000;
931
624
  }
932
625
  .slider__value {
933
- display: inline-block;
934
- min-width: 30px;
935
- padding: 3px 6px;
626
+ background-color: #fffbea;
627
+ background-image: url("./paper-DM7JLBKK.png");
628
+ background-repeat: repeat;
629
+ background-size: auto;
630
+ color: #212121;
936
631
  border: 2px solid #000;
937
- background-size: cover;
632
+ min-width: 34px;
633
+ padding: 0.2rem 0.45rem;
634
+ text-align: center;
938
635
  font-size: 13px;
939
636
  line-height: 1.69;
940
637
  font-weight: 800;
941
638
  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
639
  }
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
- }
640
+ .slider--accent .slider__input::-webkit-slider-thumb,
641
+ .slider--accent .slider__input::-moz-range-thumb,
642
+ .slider--accent .slider__value {
643
+ border-color: #b71c1c;
644
+ color: #b71c1c;
645
+ box-shadow: 2px 2px 0 #b71c1c;
988
646
  }
989
647
 
990
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Switch/Switch.css */
648
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Switch/Switch.css */
991
649
  .switch {
992
650
  display: inline-flex;
993
651
  align-items: center;
652
+ gap: 0.55rem;
994
653
  cursor: pointer;
995
654
  position: relative;
655
+ font-family: "Times New Roman", serif;
996
656
  }
997
- .switch .switch__input {
657
+ .switch__input {
998
658
  opacity: 0;
999
659
  width: 0;
1000
660
  height: 0;
1001
661
  position: absolute;
1002
662
  }
1003
- .switch .switch__slider {
663
+ .switch__slider {
664
+ background-color: #fffbea;
665
+ background-image: url("./paper-DM7JLBKK.png");
666
+ background-repeat: repeat;
667
+ background-size: auto;
668
+ color: #212121;
669
+ border: 2px solid #000;
1004
670
  position: relative;
1005
- width: 40px;
1006
- height: 20px;
1007
- background: #fff;
1008
- border: 1px solid #757575;
1009
- transition: background-color 0.3s;
671
+ width: 54px;
672
+ height: 26px;
673
+ transition: background-color 0.2s ease;
674
+ box-shadow: 3px 3px 0 #000;
1010
675
  }
1011
- .switch .switch__slider::before {
676
+ .switch__slider::before {
1012
677
  content: "";
1013
678
  position: absolute;
1014
- left: 2px;
679
+ left: 3px;
1015
680
  top: 2px;
1016
- width: 16px;
1017
- height: 16px;
681
+ width: 18px;
682
+ height: 18px;
1018
683
  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;
684
+ border: 2px solid #000;
685
+ transition: left 0.2s ease, background-color 0.2s ease;
1025
686
  }
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;
687
+ .switch__input:checked + .switch__slider::before {
688
+ left: calc(100% - 18px - 5px);
689
+ background: #fff59d;
1033
690
  }
1034
- .switch.switch--disabled {
1035
- cursor: not-allowed;
1036
- opacity: 0.5;
691
+ .switch__input:focus-visible + .switch__slider {
692
+ outline: 2px solid #000;
693
+ outline-offset: 2px;
1037
694
  }
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
- }
695
+ .switch__label {
696
+ font-size: 14px;
697
+ line-height: 1.71;
698
+ font-weight: 700;
699
+ color: #212121;
1057
700
  }
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
- }
701
+ .switch--accent .switch__slider {
702
+ border-color: #b71c1c;
703
+ box-shadow: 3px 3px 0 #b71c1c;
1077
704
  }
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
- }
705
+ .switch--accent .switch__input:checked + .switch__slider::before {
706
+ background: #e57373;
1097
707
  }
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
- }
708
+ .switch--disabled {
709
+ cursor: not-allowed;
710
+ opacity: 0.55;
1117
711
  }
1118
712
 
1119
- /* ../../../Users/rlatn/AppData/Local/Temp/tmp-27680-HqwFKdXN98aU/xp-components/src/components/Tag/Tag.css */
713
+ /* ../../../Users/rlatn/AppData/Local/Temp/tmp-30884-6iFPwOhthzeW/xp-components/src/components/Tag/Tag.css */
1120
714
  .tag {
715
+ background-color: #fffbea;
716
+ background-image: url("./paper-DM7JLBKK.png");
717
+ background-repeat: repeat;
718
+ background-size: auto;
719
+ color: #212121;
720
+ border: 2px solid #000;
1121
721
  display: inline-flex;
1122
722
  align-items: center;
1123
- gap: 4px;
723
+ gap: 0.35rem;
1124
724
  font-family: "Times New Roman", serif;
1125
- font-size: 13px;
1126
- line-height: 1.69;
1127
- font-weight: 800;
1128
- color: #212121;
1129
725
  }
1130
726
  .tag--sm {
1131
- padding: 4px 8px;
727
+ padding: 0.2rem 0.45rem;
1132
728
  font-size: 12px;
1133
- border-radius: 4px;
729
+ line-height: 1.5;
730
+ font-weight: 800;
731
+ color: #212121;
1134
732
  }
1135
733
  .tag--md {
1136
- padding: 6px 12px;
1137
- font-size: 14px;
1138
- border-radius: 6px;
734
+ padding: 0.3rem 0.65rem;
735
+ font-size: 13px;
736
+ line-height: 1.69;
737
+ font-weight: 800;
738
+ color: #212121;
1139
739
  }
1140
740
  .tag--lg {
1141
- padding: 8px 16px;
1142
- font-size: 16px;
1143
- border-radius: 8px;
1144
- }
1145
- .tag--default {
1146
- background: #eeeeee;
741
+ padding: 0.4rem 0.85rem;
742
+ font-size: 14px;
743
+ line-height: 1.71;
744
+ font-weight: 900;
1147
745
  color: #212121;
1148
746
  }
1149
- .tag--default .tag__close {
1150
- color: #212121;
747
+ .tag--feature {
748
+ background-color: #fff9c4;
749
+ border-color: #b71c1c;
750
+ color: #b71c1c;
751
+ box-shadow: 3px 3px 0 #b71c1c;
1151
752
  }
1152
- .tag--success {
1153
- background: #d4edda;
1154
- color: #155724;
753
+ .tag--default {
754
+ background-color: #eeeeee;
1155
755
  }
1156
- .tag--success .tag__close {
756
+ .tag--success {
757
+ background-color: #d4edda;
1157
758
  color: #155724;
1158
759
  }
1159
760
  .tag--warning {
1160
- background: #ffe0b2;
1161
- color: #e65100;
1162
- }
1163
- .tag--warning .tag__close {
761
+ background-color: #ffe0b2;
1164
762
  color: #e65100;
1165
763
  }
1166
764
  .tag--error {
1167
- background: #ffcdd2;
1168
- color: #b71c1c;
1169
- }
1170
- .tag--error .tag__close {
765
+ background-color: #ffcdd2;
1171
766
  color: #b71c1c;
1172
767
  }
1173
768
  .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;
769
+ background-image: none;
770
+ background-color: transparent;
771
+ border-color: #9e9e9e;
1183
772
  }
1184
773
  .tag__close {
1185
- background: none;
1186
774
  border: none;
775
+ background: transparent;
1187
776
  cursor: pointer;
1188
- font-size: 13px;
1189
- line-height: 1.69;
1190
- font-weight: 600;
1191
777
  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
- }
778
+ font: inherit;
779
+ color: inherit;
1268
780
  }