@rolster/react-components 19.2.0 → 19.4.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.
@@ -1,3556 +0,0 @@
1
- .rls-tabular-text {
2
- --pvt-char-font-size: var(
3
- --rlc-tabular-text-font-size,
4
- var(--rls-body-font-size)
5
- );
6
- --pvt-char-font-weight: var(--rlc-tabular-text-font-weight, inherit);
7
- --pvt-char-height: var(--pvt-char-font-size);
8
- --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
9
- --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
10
- display: flex;
11
- width: auto;
12
- height: var(--pvt-char-height);
13
- line-height: var(--pvt-char-height);
14
- font-size: var(--pvt-char-font-size);
15
- font-weight: var(--pvt-char-font-weight);
16
- justify-content: var(--rlc-tabular-text-align, flex-start);
17
- }
18
- .rls-tabular-text__char {
19
- display: block;
20
- width: var(--pvt-char-width);
21
- text-align: center;
22
- }
23
- .rls-tabular-text__pointer {
24
- display: block;
25
- width: var(--pvt-pointer-width);
26
- text-align: center;
27
- } /*# sourceMappingURL=TabularText.css.map */
28
-
29
- .rls-amount {
30
- --pvt-font-size: var(--rlc-amount-font-size, inherit);
31
- --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
32
- --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
33
- --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
34
- --pvt-width-separator: var(--rlc-amount-separator, 1.25);
35
- --rlc-tabular-text-font-size: var(--pvt-font-size);
36
- --rlc-tabular-text-font-weight: var(--pvt-font-weight);
37
- --rlc-tabular-text-char-width: calc(
38
- var(--pvt-font-size) / var(--pvt-width-separator)
39
- );
40
- display: flex;
41
- width: var(--rlc-amount-width, auto);
42
- height: var(--rlc-amount-height, auto);
43
- justify-content: var(--rlc-amount-text-align, flex-start);
44
- align-items: var(--rlc-amount-align-items, initial);
45
- column-gap: var(--rls-sizing-x2);
46
- font-size: var(--pvt-font-size);
47
- font-weight: var(--pvt-font-weight);
48
- color: var(--rlc-amount-font-color, inherit);
49
- }
50
- .rls-amount[rls-theme] {
51
- color: var(--rls-theme-color-500);
52
- }
53
- .rls-amount__symbol {
54
- display: block;
55
- line-height: calc(var(--pvt-font-size) + 1rem);
56
- height: calc(var(--pvt-font-size) + 1rem);
57
- }
58
- .rls-amount__content {
59
- display: flex;
60
- justify-content: var(--rlc-amount-text-align, flex-start);
61
- align-items: var(--rlc-amount-align-items, center);
62
- }
63
- .rls-amount__decimal {
64
- --rlc-tabular-text-char-width: calc(
65
- var(--pvt-font-size) * var(--pvt-decimal-width)
66
- );
67
- --rlc-tabular-text-font-size: calc(
68
- var(--pvt-font-size) * var(--pvt-decimal-size)
69
- );
70
- align-self: flex-end;
71
- } /*# sourceMappingURL=Amount.css.map */
72
-
73
- .rls-avatar {
74
- --rlc-image-width: var(--rlc-avatar-width);
75
- --rlc-image-height: var(--rlc-avatar-height);
76
- position: relative;
77
- display: flex;
78
- width: var(--rlc-avatar-width, var(--rls-sizing-x24));
79
- height: var(--rlc-avatar-height, var(--rls-sizing-x24));
80
- justify-content: center;
81
- align-items: center;
82
- border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
83
- font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
84
- color: var(--rls-theme-color-050);
85
- background: var(--rls-theme-gradient-500);
86
- overflow: hidden;
87
- }
88
- .rls-avatar--skeleton {
89
- background: var(--rls-theme-color-200);
90
- }
91
- .rls-avatar--skeleton > * {
92
- display: none;
93
- }
94
- .rls-avatar--rounded {
95
- border-radius: 50%;
96
- }
97
- .rls-avatar--contrasted {
98
- color: var(--rls-theme-color-500);
99
- background: var(--rls-theme-color-100);
100
- }
101
- .rls-avatar > span {
102
- font-size: inherit;
103
- }
104
- .rls-avatar > img {
105
- width: 100%;
106
- object-fit: cover;
107
- } /*# sourceMappingURL=Avatar.css.map */
108
-
109
- .rls-badge {
110
- --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
111
- --pvt-font-color: var(--rls-app-color-050);
112
- --pvt-background: var(--rls-app-color-700);
113
- --pvt-contrasted-font-color: var(--rls-app-color-600);
114
- --pvt-contrasted-background: var(--rls-app-color-200);
115
- position: relative;
116
- display: inline-block;
117
- width: auto;
118
- min-width: var(--pvt-dimension);
119
- height: var(--pvt-dimension);
120
- line-height: var(--pvt-dimension);
121
- padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
122
- box-sizing: var(--rlc-badge-box-sizing, border-box);
123
- font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
124
- font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
125
- text-align: center;
126
- letter-spacing: var(
127
- --rlc-badge-letter-spacing,
128
- var(--rls-smalltext-letter-spacing)
129
- );
130
- color: var(--pvt-font-color);
131
- background: var(--pvt-background);
132
- border-radius: var(--rlc-badge-radius, calc(var(--pvt-dimension) / 2));
133
- }
134
- .rls-badge--contrasted {
135
- color: var(--pvt-contrasted-font-color);
136
- background: var(--pvt-contrasted-background);
137
- }
138
- .rls-badge[rls-theme] {
139
- --pvt-font-color: var(--rls-theme-color-050);
140
- --pvt-background: var(--rls-theme-color-500);
141
- --pvt-contrasted-font-color: var(--rls-theme-color-700);
142
- --pvt-contrasted-background: var(--rls-theme-color-100);
143
- }
144
- .rls-badge > span {
145
- font-size: inherit;
146
- letter-spacing: inherit;
147
- line-height: inherit;
148
- } /*# sourceMappingURL=Badge.css.map */
149
-
150
- .rls-breadcrumb {
151
- --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
152
- --pvt-link-font-color: var(--rls-app-color-600);
153
- --pvt-label-font-size: var(
154
- --rlc-breadcrumb-font-size,
155
- var(--rls-body-font-size)
156
- );
157
- --pvt-label-font-weight: var(--rlc-breadcrumb-font-weight, inherit);
158
- --pvt-label-letter-spacing: var(
159
- --rlc-breadcrumb-letter-spacing,
160
- var(--rls-body-letter-spacing)
161
- );
162
- display: -webkit-box;
163
- width: 100%;
164
- height: var(--pvt-height);
165
- line-height: var(--pvt-height);
166
- padding: 0rem var(--rls-sizing-x8);
167
- box-sizing: border-box;
168
- user-select: none;
169
- overflow: auto;
170
- overflow-y: hidden;
171
- color: var(--rls-app-color-600);
172
- font-weight: var(--rls-font-weight-medium);
173
- }
174
- .rls-breadcrumb::-webkit-scrollbar {
175
- width: 0rem;
176
- height: 0rem;
177
- }
178
- .rls-breadcrumb__label {
179
- display: block;
180
- height: inherit;
181
- color: inherit;
182
- line-height: inherit;
183
- font-weight: var(--pvt-label-font-weight);
184
- font-size: var(--pvt-label-font-size);
185
- letter-spacing: var(--pvt-label-letter-spacing);
186
- }
187
- .rls-breadcrumb__label:first-child::before {
188
- display: none;
189
- }
190
- .rls-breadcrumb__label::before {
191
- font-family: -rolster-icons;
192
- display: inline-block;
193
- content: '';
194
- margin: 0rem var(--rls-sizing-x2);
195
- cursor: default;
196
- color: inherit;
197
- font-size: var(--rls-sizing-x12);
198
- font-weight: normal;
199
- font-style: normal;
200
- letter-spacing: normal;
201
- vertical-align: top;
202
- -webkit-font-smoothing: antialiased;
203
- }
204
- .rls-breadcrumb__label__a {
205
- display: inline-block;
206
- }
207
- .rls-breadcrumb__label__a[rls-theme] {
208
- color: var(--rls-theme-color-500);
209
- }
210
- .rls-breadcrumb__label__a--actionable {
211
- cursor: pointer;
212
- }
213
- .rls-breadcrumb__label__a--actionable:hover {
214
- text-decoration: underline;
215
- } /*# sourceMappingURL=Breadcrumb.css.map */
216
-
217
- .rls-icon {
218
- --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
219
- --pvt-icon-display: block;
220
- --pvt-icon-color: var(--rlc-icon-color);
221
- position: relative;
222
- font-size: var(--pvt-icon-dimension);
223
- width: var(--pvt-icon-dimension);
224
- height: var(--pvt-icon-dimension);
225
- line-height: var(--pvt-icon-dimension);
226
- }
227
- .rls-icon--skeleton {
228
- --pvt-icon-display: none;
229
- background: var(--rls-theme-color-300);
230
- border-radius: var(--rls-sizing-x2);
231
- }
232
- .rls-icon[rls-theme] {
233
- --pvt-icon-color: var(--rls-theme-color-500);
234
- }
235
- .rls-icon > i {
236
- display: var(--pvt-icon-display);
237
- color: var(--pvt-icon-color, inherit);
238
- width: 100%;
239
- height: 100%;
240
- line-height: inherit;
241
- font-size: inherit;
242
- } /*# sourceMappingURL=Icon.css.map */
243
-
244
- .rls-spinner {
245
- position: relative;
246
- display: block;
247
- width: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
248
- height: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
249
- fill: var(--rlc-spinner-color, var(--rls-app-color-800));
250
- }
251
- .rls-spinner__svg {
252
- position: absolute;
253
- width: 100%;
254
- height: 100%;
255
- fill: inherit;
256
- transform-origin: center center;
257
- transform: translateZ(0px);
258
- animation: 1s linear 0s infinite normal none running rls-spinner-scale-out;
259
- }
260
- .rls-spinner__svg > circle {
261
- r: 5;
262
- transform: translate(32px, 32px);
263
- }
264
- .rls-spinner__svg--1 {
265
- top: 0px;
266
- left: 9px;
267
- animation-delay: -1000ms;
268
- animation-duration: 1000ms;
269
- }
270
- .rls-spinner__svg--2 {
271
- top: 5.78509px;
272
- left: 6.8944px;
273
- animation-delay: -888.889ms;
274
- animation-duration: 1000ms;
275
- }
276
- .rls-spinner__svg--3 {
277
- top: 8.86327px;
278
- left: 1.56283px;
279
- animation-delay: -777.778ms;
280
- animation-duration: 1000ms;
281
- }
282
- .rls-spinner__svg--4 {
283
- top: 7.79423px;
284
- left: -4.5px;
285
- animation-delay: -666.667ms;
286
- animation-duration: 1000ms;
287
- }
288
- .rls-spinner__svg--5 {
289
- top: 3.07818px;
290
- left: -8.45723px;
291
- animation-delay: -555.556ms;
292
- animation-duration: 1000ms;
293
- }
294
- .rls-spinner__svg--6 {
295
- top: -3.07818px;
296
- left: -8.45723px;
297
- animation-delay: -444.444ms;
298
- animation-duration: 1000ms;
299
- }
300
- .rls-spinner__svg--7 {
301
- top: -7.79423px;
302
- left: -4.5px;
303
- animation-delay: -333.333ms;
304
- animation-duration: 1000ms;
305
- }
306
- .rls-spinner__svg--8 {
307
- top: -8.86327px;
308
- left: 1.56283px;
309
- animation-delay: -222.222ms;
310
- animation-duration: 1000ms;
311
- }
312
- .rls-spinner__svg--9 {
313
- top: -5.78509px;
314
- left: 6.8944px;
315
- animation-delay: -111.111ms;
316
- animation-duration: 1000ms;
317
- }
318
- @keyframes rls-spinner-scale-out {
319
- 0% {
320
- transform: scale(1, 1);
321
- }
322
- 100% {
323
- transform: scale(0, 0);
324
- }
325
- } /*# sourceMappingURL=Spinner.css.map */
326
-
327
- .rls-button {
328
- --pvt-button-content-background: none;
329
- --pvt-button-content-border: none;
330
- --pvt-button-content-box-shadow: var(--rlc-button-content-box-shadow, none);
331
- --pvt-button-content-font-color: var(--rls-theme-color-500);
332
- --pvt-button-content-animation: none;
333
- --pvt-button-content-visibility: hidden;
334
- --pvt-button-ripple-background: var(--rls-theme-color-700);
335
- --pvt-ghost-background: none;
336
- --pvt-ghost-font-color: var(--rls-theme-color-500);
337
- --pvt-ghost-border: none;
338
- --pvt-outline-background: var(--rls-app-color-050);
339
- --pvt-outline-font-color: var(--rls-app-color-500);
340
- --pvt-outline-border: var(--rls-app-border-1-300);
341
- --pvt-flat-background: var(--rls-theme-color-100);
342
- --pvt-flat-font-color: var(--rls-theme-color-500);
343
- --pvt-flat-border: none;
344
- --pvt-stroked-background: var(--rls-app-color-050);
345
- --pvt-stroked-font-color: var(--rls-theme-color-500);
346
- --pvt-stroked-border: var(--rls-theme-border-1-300);
347
- --pvt-classic-background: var(--rls-theme-color-050);
348
- --pvt-classic-font-color: var(--rls-theme-color-500);
349
- --pvt-classic-border: var(--rls-theme-border-1-300);
350
- --pvt-raised-background: var(--rls-theme-color-500);
351
- --pvt-raised-font-color: var(--rls-theme-color-050);
352
- --pvt-raised-border: none;
353
- --pvt-gradient-background: var(--rls-theme-gradient-500);
354
- --pvt-gradient-font-color: var(--rls-theme-color-050);
355
- --pvt-gradient-border: none;
356
- position: relative;
357
- padding: 0rem;
358
- width: var(--rlc-button-width, auto);
359
- outline: none;
360
- background: rgba(0, 0, 0, 0);
361
- }
362
- .rls-button:not(:disabled):not(:active) {
363
- --pvt-button-content-animation: ripple-squarecenter 1000ms
364
- var(--rls-standard-curve);
365
- }
366
- .rls-button:not(:disabled):focus {
367
- --pvt-button-content-visibility: visible;
368
- }
369
- .rls-button:not(:disabled):hover {
370
- --pvt-ghost-background: var(--rls-theme-color-200);
371
- --pvt-ghost-font-color: var(--rls-theme-font-100);
372
- --pvt-ghost-border: none;
373
- --pvt-outline-background: transparent;
374
- --pvt-outline-font-color: var(--rls-theme-color-500);
375
- --pvt-outline-border: var(--rls-theme-border-1-500);
376
- --pvt-stroked-background: var(--rls-theme-color-100);
377
- --pvt-stroked-font-color: var(--rls-theme-color-700);
378
- --pvt-stroked-border: var(--rls-theme-border-1-700);
379
- --pvt-classic-background: var(--rls-theme-color-100);
380
- --pvt-classic-font-color: var(--rls-theme-color-700);
381
- --pvt-classic-border: var(--rls-theme-border-1-700);
382
- --pvt-flat-background: var(--rls-theme-color-200);
383
- --pvt-flat-font-color: var(--rls-theme-color-700);
384
- --pvt-flat-border: none;
385
- --pvt-raised-background: var(--rls-theme-color-700);
386
- --pvt-raised-font-color: var(--rls-theme-font-900);
387
- --pvt-raised-border: none;
388
- --pvt-gradient-background: var(--rls-theme-color-700);
389
- --pvt-gradient-font-color: var(--rls-theme-font-900);
390
- --pvt-gradient-border: none;
391
- }
392
- .rls-button:disabled {
393
- --pvt-button-content-box-shadow: none;
394
- --pvt-ghost-background: transparent;
395
- --pvt-ghost-font-color: var(--rls-app-color-400);
396
- --pvt-ghost-border: none;
397
- --pvt-outline-background: transparent;
398
- --pvt-outline-font-color: var(--rls-app-color-400);
399
- --pvt-outline-border: var(--rls-app-border-1-300);
400
- --pvt-stroked-background: transparent;
401
- --pvt-stroked-font-color: var(--rls-app-color-400);
402
- --pvt-stroked-border: var(--rls-app-border-1-300);
403
- --pvt-classic-background: var(--rls-app-color-100);
404
- --pvt-classic-font-color: var(--rls-app-color-400);
405
- --pvt-classic-border: var(--rls-app-border-1-300);
406
- --pvt-flat-background: var(--rls-app-color-100);
407
- --pvt-flat-font-color: var(--rls-app-color-400);
408
- --pvt-flat-border: none;
409
- --pvt-raised-background: var(--rls-app-color-100);
410
- --pvt-raised-font-color: var(--rls-app-color-400);
411
- --pvt-raised-border: none;
412
- --pvt-gradient-background: var(--rls-app-color-100);
413
- --pvt-gradient-font-color: var(--rls-app-color-400);
414
- --pvt-gradient-border: none;
415
- pointer-events: none;
416
- }
417
- .rls-button__content {
418
- display: flex;
419
- justify-content: center;
420
- align-items: center;
421
- overflow: hidden;
422
- column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
423
- line-height: var(--rls-sizing-x20);
424
- height: var(--rls-sizing-x20);
425
- padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
426
- box-sizing: border-box;
427
- border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x2));
428
- box-shadow: var(--pvt-button-content-box-shadow);
429
- color: var(--pvt-button-content-font-color);
430
- border: var(--pvt-button-content-border);
431
- background: var(--pvt-button-content-background);
432
- pointer-events: none;
433
- }
434
- .rls-button__content::before {
435
- position: absolute;
436
- display: block;
437
- content: '';
438
- top: 50%;
439
- left: 50%;
440
- padding-top: calc(100% - var(--rls-sizing-x8));
441
- padding-left: calc(100% - var(--rls-sizing-x8));
442
- margin-top: calc(-50% + var(--rls-sizing-x4));
443
- margin-left: calc(-50% + var(--rls-sizing-x4));
444
- border-radius: 50%;
445
- opacity: 0.26;
446
- transform: scale(0);
447
- z-index: var(--rls-z-index-2);
448
- background: var(--pvt-button-ripple-background);
449
- animation: var(--pvt-button-content-animation);
450
- visibility: var(--pvt-button-content-visibility);
451
- }
452
- .rls-button__content--ghost {
453
- --rlc-spinner-color: var(--pvt-ghost-font-color);
454
- --pvt-button-content-font-color: var(--pvt-ghost-font-color);
455
- --pvt-button-content-background: var(--pvt-ghost-background);
456
- --pvt-button-content-border: var(--pvt-ghost-border);
457
- }
458
- .rls-button__content--outline {
459
- --rlc-spinner-color: var(--pvt-outline-font-color);
460
- --pvt-button-content-font-color: var(--pvt-outline-font-color);
461
- --pvt-button-content-background: var(--pvt-outline-background);
462
- --pvt-button-content-border: var(--pvt-outline-border);
463
- }
464
- .rls-button__content--stroked {
465
- --rlc-spinner-color: var(--pvt-stroked-font-color);
466
- --pvt-button-content-font-color: var(--pvt-stroked-font-color);
467
- --pvt-button-content-background: var(--pvt-stroked-background);
468
- --pvt-button-content-border: var(--pvt-stroked-border);
469
- }
470
- .rls-button__content--classic {
471
- --rlc-spinner-color: var(--pvt-classic-font-color);
472
- --pvt-button-content-font-color: var(--pvt-classic-font-color);
473
- --pvt-button-content-background: var(--pvt-classic-background);
474
- --pvt-button-content-border: var(--pvt-classic-border);
475
- --pvt-button-ripple-background: var(--rls-theme-font-100);
476
- }
477
- .rls-button__content--flat {
478
- --rlc-spinner-color: var(--pvt-flat-font-color);
479
- --pvt-button-content-font-color: var(--pvt-flat-font-color);
480
- --pvt-button-content-background: var(--pvt-flat-background);
481
- --pvt-button-content-border: var(--pvt-flat-border);
482
- --pvt-button-ripple-background: var(--rls-theme-font-100);
483
- }
484
- .rls-button__content--raised {
485
- --rlc-spinner-color: var(--pvt-raised-font-color);
486
- --pvt-button-content-font-color: var(--pvt-raised-font-color);
487
- --pvt-button-content-background: var(--pvt-raised-background);
488
- --pvt-button-content-border: var(--pvt-raised-border);
489
- --pvt-button-ripple-background: var(--rls-theme-font-900);
490
- }
491
- .rls-button__content--gradient {
492
- --rlc-spinner-color: var(--pvt-gradient-font-color);
493
- --pvt-button-content-font-color: var(--pvt-gradient-font-color);
494
- --pvt-button-content-background: var(--pvt-gradient-background);
495
- --pvt-button-content-border: var(--pvt-gradient-border);
496
- --pvt-button-ripple-background: var(--rls-theme-font-900);
497
- }
498
- .rls-button__description {
499
- display: flex;
500
- width: auto;
501
- align-items: center;
502
- column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
503
- padding: 0rem var(--rls-sizing-x2);
504
- line-height: initial;
505
- font-size: var(--rls-button-font-size);
506
- letter-spacing: var(--rls-button-letter-spacing);
507
- font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
508
- text-transform: var(--rlc-button-label-text-transform, uppercase);
509
- text-overflow: ellipsis;
510
- overflow: hidden;
511
- white-space: nowrap;
512
- }
513
- .rls-button__description a {
514
- text-decoration: none;
515
- color: inherit;
516
- }
517
- @keyframes ripple-squarecenter {
518
- 0% {
519
- transform: scale(0);
520
- }
521
- 20% {
522
- transform: scale(1);
523
- }
524
- 100% {
525
- opacity: 0;
526
- transform: scale(1);
527
- }
528
- } /*# sourceMappingURL=Button.css.map */
529
-
530
- .rls-button-action {
531
- --pvt-ripple-dimension: var(
532
- --rlc-action-ripple-dimension,
533
- var(--rls-sizing-x18)
534
- );
535
- --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
536
- --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
537
- --pvt-tooltip-transition-delay: 0ms;
538
- --pvt-tooltip-opacity: 0;
539
- position: relative;
540
- width: var(--rls-sizing-x16);
541
- height: var(--rls-sizing-x16);
542
- border: none;
543
- outline: none;
544
- padding: var(--rls-sizing-x2);
545
- box-sizing: border-box;
546
- user-select: none;
547
- cursor: default;
548
- border-radius: var(--rlc-action-radius, 50%);
549
- color: var(--rlc-action-color, var(--rls-app-color-600));
550
- background: var(--rlc-action-background, transparent);
551
- }
552
- .rls-button-action::before {
553
- position: absolute;
554
- display: block;
555
- content: '';
556
- top: 50%;
557
- left: 50%;
558
- opacity: 0.32;
559
- visibility: hidden;
560
- border-radius: 50%;
561
- transform: scale(0);
562
- background: var(--pvt-ripple-color);
563
- padding-top: calc(120% - var(--rls-sizing-x4));
564
- padding-left: calc(120% - var(--rls-sizing-x4));
565
- margin-top: calc(-60% + var(--rls-sizing-x2));
566
- margin-left: calc(-60% + var(--rls-sizing-x2));
567
- }
568
- .rls-button-action:not(:active)::before {
569
- animation: ripple-button-action 1000ms var(--rls-standard-curve);
570
- }
571
- .rls-button-action:focus::before {
572
- visibility: visible;
573
- }
574
- .rls-button-action::after {
575
- position: absolute;
576
- content: '';
577
- top: 50%;
578
- left: 50%;
579
- opacity: 0.24;
580
- width: var(--pvt-ripple-dimension);
581
- height: var(--pvt-ripple-dimension);
582
- margin-top: var(--pvt-ripple-position);
583
- margin-left: var(--pvt-ripple-position);
584
- border-radius: 50%;
585
- background: var(--pvt-ripple-color);
586
- transform: scale(0);
587
- transition: transform 160ms 0ms var(--rls-sharp-curve);
588
- }
589
- .rls-button-action:not(:disabled):hover {
590
- --pvt-tooltip-opacity: 1;
591
- --pvt-tooltip-transition-delay: 480ms;
592
- }
593
- .rls-button-action:not(:disabled):hover::after {
594
- transform: scale(1);
595
- }
596
- .rls-button-action:disabled {
597
- opacity: 0.5;
598
- pointer-events: none;
599
- }
600
- .rls-button-action__content {
601
- pointer-events: none;
602
- }
603
- .rls-button-action__tooltip {
604
- position: absolute;
605
- top: calc(100% + var(--rls-sizing-x6));
606
- left: 50%;
607
- width: auto;
608
- float: initial;
609
- padding: var(--rls-sizing-x4);
610
- border-radius: var(--rls-sizing-x2);
611
- white-space: nowrap;
612
- pointer-events: none;
613
- transform: translateX(-50%);
614
- background: var(--rls-app-color-900);
615
- color: var(--rls-app-color-050);
616
- transition: opacity 200ms 0ms var(--rls-deceleration-curve);
617
- opacity: var(--pvt-tooltip-opacity);
618
- transition-delay: var(--pvt-tooltip-transition-delay);
619
- }
620
- @keyframes ripple-button-action {
621
- 0% {
622
- transform: scale(0);
623
- }
624
- 20% {
625
- transform: scale(1);
626
- }
627
- 100% {
628
- opacity: 0;
629
- transform: scale(1);
630
- }
631
- } /*# sourceMappingURL=ButtonAction.css.map */
632
-
633
- .rls-button-option {
634
- --pvt-span-color: var(--rls-app-color-800);
635
- --pvt-background-hover: var(--rls-theme-color-100);
636
- --rlc-icon-color: var(--rls-app-color-600);
637
- display: flex;
638
- width: var(--rlc-button-option, auto);
639
- flex-direction: column;
640
- row-gap: var(--rls-sizing-x3);
641
- align-items: center;
642
- padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
643
- box-sizing: border-box;
644
- outline: none;
645
- background: rgba(0, 0, 0, 0);
646
- border: var(--rls-app-border-1-300);
647
- border-radius: var(--rls-sizing-x4);
648
- overflow: hidden;
649
- }
650
- .rls-button-option:not(:disabled):hover {
651
- background: var(--pvt-background-hover);
652
- }
653
- .rls-button-option:disabled {
654
- opacity: 0.5;
655
- }
656
- .rls-button-option--checked {
657
- --pvt-background-hover: var(--rls-theme-color-800);
658
- --pvt-span-color: var(--rls-theme-color-050);
659
- --rlc-icon-color: var(--rls-theme-color-050);
660
- background: var(--rls-theme-gradient-500);
661
- border: var(--rls-theme-border-1-500);
662
- }
663
- .rls-button-option > span {
664
- font-size: var(--rls-span-font-size);
665
- letter-spacing: var(--rls-span-letter-spacing);
666
- color: var(--pvt-span-color);
667
- font-weight: var(--rls-font-weight-medium);
668
- } /*# sourceMappingURL=ButtonOption.css.map */
669
-
670
- .rls-checkbox {
671
- --rlc-icon-color: transparent;
672
- --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
673
- --rlc-icon-dimension: calc(var(--pvt-dimension) - 2rem);
674
- --pvt-component-background: transparent;
675
- position: relative;
676
- display: flex;
677
- width: var(--pvt-dimension);
678
- height: var(--pvt-dimension);
679
- justify-content: center;
680
- align-items: center;
681
- box-sizing: border-box;
682
- outline: none;
683
- border-radius: var(--rls-sizing-x3);
684
- background: rgba(0, 0, 0, 0);
685
- border: var(--rls-app-border-1-400);
686
- transition: all 160ms 0ms var(--rls-standard-curve);
687
- }
688
- .rls-checkbox:hover {
689
- cursor: var(--rlc-checkbox-cursor, initial);
690
- }
691
- .rls-checkbox--checked {
692
- --rlc-icon-color: var(--rls-app-color-050);
693
- --pvt-component-background: var(--rls-theme-color-200);
694
- background: var(--rls-theme-gradient-500);
695
- border: var(--rls-theme-border-1-500);
696
- }
697
- .rls-checkbox--disabled {
698
- opacity: 0.5;
699
- pointer-events: none;
700
- background: var(--rls-app-color-300);
701
- border: none;
702
- }
703
- .rls-checkbox--disabled.rls-checkbox--checked {
704
- --rlc-icon-color: var(--rls-app-color-500);
705
- } /*# sourceMappingURL=CheckBox.css.map */
706
-
707
- .rls-skeleton {
708
- --pvt-height: var(--rlc-skeleton-height, inherit);
709
- --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
710
- --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
711
- --pvt-color-primary: var(--rls-app-color-100);
712
- --pvt-color-secondary: var(--rls-app-color-200);
713
- position: relative;
714
- width: 100%;
715
- height: var(--pvt-height);
716
- max-height: var(--pvt-max-height);
717
- min-height: var(--pvt-min-height);
718
- line-height: var(--pvt-height);
719
- background: linear-gradient(
720
- 90deg,
721
- var(--pvt-color-primary) 25%,
722
- var(--pvt-color-secondary) 50%,
723
- var(--pvt-color-primary) 75%
724
- );
725
- overflow: hidden;
726
- background-size: 200% 100%;
727
- animation: skeleton-animation 1600ms infinite;
728
- border-radius: var(--rls-sizing-x2);
729
- }
730
- .rls-skeleton[rls-theme] {
731
- --pvt-color-primary: var(--rls-theme-color-100);
732
- --pvt-color-secondary: var(--rls-theme-color-200);
733
- }
734
- @keyframes skeleton-animation {
735
- 0% {
736
- background-position: 200% 0;
737
- }
738
- 100% {
739
- background-position: -200% 0;
740
- }
741
- } /*# sourceMappingURL=Skeleton.css.map */
742
-
743
- .rls-image {
744
- --pvt-background: transparent;
745
- --pvt-width: var(--rlc-image-width, 100%);
746
- --pvt-height: var(--rlc-image-height, 100%);
747
- --pvt-img-display: none;
748
- --rlc-skeleton-width: var(--pvt-width);
749
- --rlc-skeleton-height: var(--pvt-height);
750
- width: var(--pvt-width);
751
- height: var(--pvt-height);
752
- overflow: hidden;
753
- }
754
- .rls-image--complet {
755
- --pvt-img-display: block;
756
- background: var(--pvt-background);
757
- }
758
- .rls-image[rls-theme] {
759
- --pvt-background: var(--rls-theme-color-600);
760
- }
761
- .rls-image > img {
762
- display: var(--pvt-img-display);
763
- width: var(--pvt-width);
764
- height: var(--pvt-height);
765
- content-visibility: auto;
766
- } /*# sourceMappingURL=Image.css.map */
767
-
768
- .rls-input {
769
- --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
770
- --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
771
- --pvt-letter-spacing: var(
772
- --rlc-input-letter-spacing,
773
- var(--rls-input-letter-spacing)
774
- );
775
- --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
776
- --pvt-text-align: var(--rlc-input-text-align, left);
777
- --pvt-value-font-color: var(--pvt-font-color);
778
- --pvt-value-opacity: 1;
779
- --pvt-component-font-color: transparent;
780
- --rlc-amount-height: var(--pvt-height);
781
- --rlc-amount-align-items: center;
782
- position: relative;
783
- width: var(--rlc-input-width, 100%);
784
- }
785
- .rls-input--focused {
786
- --pvt-component-font-color: var(--pvt-font-color);
787
- --pvt-value-font-color: transparent;
788
- }
789
- .rls-input--disabled {
790
- --pvt-value-opacity: 0.5;
791
- }
792
- .rls-input__component {
793
- position: relative;
794
- width: 100%;
795
- height: var(--pvt-height);
796
- line-height: var(--pvt-height);
797
- padding: 0rem;
798
- cursor: text;
799
- border: none;
800
- outline: none;
801
- background: rgba(0, 0, 0, 0);
802
- color: var(--pvt-component-font-color);
803
- font-weight: var(--rls-font-weight-medium);
804
- font-size: var(--pvt-font-size);
805
- text-align: var(--pvt-text-align);
806
- letter-spacing: var(--pvt-letter-spacing);
807
- }
808
- .rls-input__component::-webkit-outer-spin-button,
809
- .rls-input__component::-webkit-inner-spin-button {
810
- margin: 0rem;
811
- -webkit-appearance: none;
812
- }
813
- .rls-input__component::placeholder {
814
- color: var(--rls-app-color-400);
815
- }
816
- .rls-input__component::selection {
817
- background: var(--rls-theme-color-700);
818
- color: var(--rls-app-color-050);
819
- }
820
- .rls-input__component:read-only {
821
- pointer-events: none;
822
- }
823
- .rls-input__component:disabled {
824
- opacity: 0.5;
825
- }
826
- .rls-input__value {
827
- position: absolute;
828
- top: 0rem;
829
- left: 0rem;
830
- width: 100%;
831
- height: var(--pvt-height);
832
- line-height: var(--pvt-height);
833
- background: rgba(0, 0, 0, 0);
834
- pointer-events: none;
835
- overflow: hidden;
836
- white-space: nowrap;
837
- opacity: var(--pvt-value-opacity);
838
- color: var(--pvt-value-font-color);
839
- font-weight: var(--rls-font-weight-medium);
840
- font-size: var(--pvt-font-size);
841
- text-align: var(--pvt-text-align);
842
- letter-spacing: var(--pvt-letter-spacing);
843
- } /*# sourceMappingURL=Input.css.map */
844
-
845
- .rls-input-decimal {
846
- --rlc-tabular-text-font-size: var(--rls-input-font-size);
847
- --rlc-tabular-text-char-width: 5.25rem;
848
- position: relative;
849
- width: 100%;
850
- box-sizing: border-box;
851
- } /*# sourceMappingURL=InputDecimal.css.map */
852
-
853
- .rls-input-money {
854
- --rlc-tabular-text-font-size: var(--rls-input-font-size);
855
- --rlc-tabular-text-char-width: 5.25rem;
856
- position: relative;
857
- width: 100%;
858
- box-sizing: border-box;
859
- } /*# sourceMappingURL=InputMoney.css.map */
860
-
861
- .rls-input-number {
862
- position: relative;
863
- width: 100%;
864
- box-sizing: border-box;
865
- } /*# sourceMappingURL=InputNumber.css.map */
866
-
867
- .rls-input-password {
868
- position: relative;
869
- width: var(--rlc-input-password-width, 100%);
870
- box-sizing: border-box;
871
- }
872
- .rls-input-password__component {
873
- position: relative;
874
- float: left;
875
- width: 100%;
876
- height: var(--rls-sizing-x12);
877
- line-height: var(--rls-sizing-x12);
878
- padding: 0rem;
879
- cursor: text;
880
- border: none;
881
- outline: none;
882
- background: rgba(0, 0, 0, 0);
883
- color: var(--rlc-input-font-color);
884
- font-weight: var(--rls-font-weight-medium);
885
- font-size: var(--rls-input-font-size);
886
- letter-spacing: var(--rls-input-letter-spacing);
887
- }
888
- .rls-input-password__component::-webkit-outer-spin-button,
889
- .rls-input-password__component::-webkit-inner-spin-button {
890
- margin: 0rem;
891
- -webkit-appearance: none;
892
- }
893
- .rls-input-password__component::placeholder {
894
- color: var(--rls-app-color-400);
895
- }
896
- .rls-input-password__component::selection {
897
- background: var(--rls-theme-color-700);
898
- color: var(--rls-app-color-050);
899
- }
900
- .rls-input-password__component:disabled {
901
- opacity: 0.5;
902
- } /*# sourceMappingURL=InputPassword.css.map */
903
-
904
- .rls-input-percentage {
905
- position: relative;
906
- width: 100%;
907
- box-sizing: border-box;
908
- } /*# sourceMappingURL=InputPercentage.css.map */
909
-
910
- .rls-input-search {
911
- --rlc-input-height: var(--rls-sizing-x14);
912
- position: relative;
913
- display: flex;
914
- align-items: center;
915
- padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
916
- box-sizing: border-box;
917
- background: var(--rlc-input-search-background, transparent);
918
- border-radius: var(--rls-sizing-x4);
919
- border: var(--rls-app-border-1-200);
920
- }
921
- .rls-input-search--disabled {
922
- opacity: 0.5;
923
- }
924
- .rls-input-search .rls-input__component:disabled,
925
- .rls-input-search .rls-button-action:disabled {
926
- opacity: 1 !important;
927
- } /*# sourceMappingURL=InputSearch.css.map */
928
-
929
- .rls-input-text {
930
- position: relative;
931
- width: 100%;
932
- box-sizing: border-box;
933
- } /*# sourceMappingURL=InputText.css.map */
934
-
935
- .rls-label {
936
- font-size: var(--rlc-label-font-size, var(--rls-smalltext-font-size));
937
- letter-spacing: var(
938
- --rlc-label-letter-spacing,
939
- var(--rls-smalltext-letter-spacing)
940
- );
941
- line-height: var(--rlc-label-height, var(--rls-smalltext-line-height));
942
- font-weight: inherit;
943
- }
944
- .rls-label[rls-theme] {
945
- color: var(--rls-theme-color-500);
946
- } /*# sourceMappingURL=Label.css.map */
947
-
948
- .rls-message-icon {
949
- --rlc-icon-color: var(--rls-theme-color-500);
950
- --rlc-icon-dimension: var(--rls-sizing-x8);
951
- display: flex;
952
- align-items: center;
953
- column-gap: var(--rls-sizing-x2);
954
- }
955
- .rls-message-icon span {
956
- font-size: var(--rls-caption-font-size);
957
- letter-spacing: var(--rls-caption-letter-spacing);
958
- color: var(--rls-app-color-600);
959
- } /*# sourceMappingURL=MessageIcon.css.map */
960
-
961
- .rls-poster {
962
- --pvt-height: var(--rlc-poster-height, var(--rls-smalltext-line-height));
963
- position: relative;
964
- display: block;
965
- width: var(--rlc-poster-width, auto);
966
- font-weight: inherit;
967
- font-size: var(--rlc-poster-font-size, var(--rls-smalltext-font-size));
968
- letter-spacing: var(
969
- --rlc-poster-letter-spacing,
970
- var(--rls-body-letter-spacing)
971
- );
972
- height: var(--pvt-height);
973
- line-height: var(--pvt-height);
974
- padding: var(--rlc-poster-padding, var(--rls-sizing-x2) var(--rls-sizing-x4));
975
- text-align: var(--rlc-poster-text-align, center);
976
- border-radius: var(--rls-sizing-x4);
977
- color: var(--rls-app-color-050);
978
- background: var(--rls-app-color-600);
979
- }
980
- .rls-poster[rls-theme] {
981
- color: var(--rls-theme-color-050);
982
- background: var(--rls-theme-color-500);
983
- }
984
- .rls-poster--contrasted {
985
- color: var(--rls-app-color-700);
986
- background: var(--rls-app-color-200);
987
- }
988
- .rls-poster--contrasted[rls-theme] {
989
- color: var(--rls-theme-color-700);
990
- background: var(--rls-theme-color-100);
991
- } /*# sourceMappingURL=Poster.css.map */
992
-
993
- .rls-progress-bar {
994
- --pvt-component-display: block;
995
- --pvt-component-height: var(--rlc-progress-bar-height, var(--rls-sizing-x2));
996
- --pvt-component-radius: var(--rlc-progress-bar-radius, 0rem);
997
- position: relative;
998
- width: 100%;
999
- height: var(--pvt-component-height);
1000
- overflow: hidden;
1001
- background: var(--rlc-progress-bar-background, var(--rls-theme-color-100));
1002
- border-radius: var(--pvt-component-radius);
1003
- }
1004
- .rls-progress-bar--indeterminate {
1005
- --pvt-component-display: none;
1006
- }
1007
- .rls-progress-bar--indeterminate::after,
1008
- .rls-progress-bar--indeterminate::before {
1009
- position: absolute;
1010
- content: '';
1011
- top: 0rem;
1012
- width: 0%;
1013
- height: var(--pvt-component-height);
1014
- background: var(--rls-theme-gradient-500);
1015
- border-radius: var(--pvt-component-radius);
1016
- }
1017
- .rls-progress-bar--indeterminate::after {
1018
- animation: progress-bar-indeterminate-after 2000ms infinite;
1019
- }
1020
- .rls-progress-bar--indeterminate::before {
1021
- animation: progress-bar-indeterminate-before 2000ms infinite;
1022
- }
1023
- .rls-progress-bar__component {
1024
- position: absolute;
1025
- display: var(--pvt-component-display);
1026
- top: 0rem;
1027
- width: 0%;
1028
- height: var(--pvt-component-height);
1029
- background: var(--rls-theme-gradient-500);
1030
- transition: width 320ms 0ms var(--rls-standard-curve);
1031
- border-radius: var(--pvt-component-radius);
1032
- }
1033
- @keyframes progress-bar-indeterminate-before {
1034
- 0% {
1035
- width: 100%;
1036
- left: -125%;
1037
- }
1038
- 20% {
1039
- width: 100%;
1040
- left: -125%;
1041
- }
1042
- 100% {
1043
- width: 12.5%;
1044
- left: 100%;
1045
- }
1046
- }
1047
- @keyframes progress-bar-indeterminate-after {
1048
- 0% {
1049
- width: 12.5%;
1050
- left: -12.5%;
1051
- }
1052
- 80% {
1053
- width: 100%;
1054
- left: 125%;
1055
- }
1056
- 100% {
1057
- width: 100%;
1058
- left: 125%;
1059
- }
1060
- } /*# sourceMappingURL=ProgressBar.css.map */
1061
-
1062
- .rls-progress-circular {
1063
- --pvt-dimension: var(
1064
- --rlc-progress-circular-dimension,
1065
- var(--rls-sizing-x28)
1066
- );
1067
- position: relative;
1068
- width: var(--pvt-dimension);
1069
- height: var(--pvt-dimension);
1070
- padding: var(--rls-sizing-x2);
1071
- box-sizing: border-box;
1072
- stroke: var(--rls-theme-color-500);
1073
- }
1074
- .rls-progress-circular__svg {
1075
- height: 100%;
1076
- width: 100%;
1077
- transform: rotate(990deg);
1078
- animation: progress-circular-svg 3500ms linear infinite;
1079
- }
1080
- .rls-progress-circular__circle {
1081
- fill: none;
1082
- stroke-width: 4px;
1083
- stroke: inherit;
1084
- stroke-dasharray: 65;
1085
- stroke-dashoffset: 65;
1086
- opacity: 1;
1087
- animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
1088
- }
1089
- @keyframes progress-circular-svg {
1090
- 0% {
1091
- transform: rotate(0deg);
1092
- }
1093
- 50% {
1094
- transform: rotate(180deg);
1095
- }
1096
- 100% {
1097
- transform: rotate(360deg);
1098
- }
1099
- }
1100
- @keyframes progress-circular-circle {
1101
- 50% {
1102
- stroke-dashoffset: 0;
1103
- }
1104
- 100% {
1105
- stroke-dashoffset: -65;
1106
- }
1107
- } /*# sourceMappingURL=ProgressCircular.css.map */
1108
-
1109
- .rls-radiobutton {
1110
- --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
1111
- --pvt-component-dimension: calc(var(--pvt-dimension) / 2);
1112
- --pvt-component-background: transparent;
1113
- position: relative;
1114
- display: flex;
1115
- width: var(--pvt-dimension);
1116
- height: var(--pvt-dimension);
1117
- justify-content: center;
1118
- align-items: center;
1119
- outline: none;
1120
- border-radius: 50%;
1121
- box-sizing: border-box;
1122
- background: rgba(0, 0, 0, 0);
1123
- border: var(--rls-app-border-1-400);
1124
- transition: all 160ms 0ms var(--rls-standard-curve);
1125
- }
1126
- .rls-radiobutton:hover {
1127
- cursor: var(--rlc-radiobutton-cursor, initial);
1128
- }
1129
- .rls-radiobutton--checked {
1130
- --pvt-component-background: var(--rls-app-color-050);
1131
- background: var(--rls-theme-gradient-500);
1132
- border: var(--rls-theme-border-1-500);
1133
- }
1134
- .rls-radiobutton--disabled {
1135
- opacity: 0.5;
1136
- pointer-events: none;
1137
- background: var(--rls-app-color-300);
1138
- border: none;
1139
- }
1140
- .rls-radiobutton--disabled.rls-radiobutton--checked {
1141
- --pvt-component-background: var(--rls-app-color-500);
1142
- }
1143
- .rls-radiobutton__component {
1144
- width: var(--pvt-component-dimension);
1145
- height: var(--pvt-component-dimension);
1146
- border-radius: 50%;
1147
- background: var(--pvt-component-background);
1148
- transition: all 160ms 0ms var(--rls-standard-curve);
1149
- } /*# sourceMappingURL=RadioButton.css.map */
1150
-
1151
- .rls-skeleton-text {
1152
- --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
1153
- --rlc-skeleton-height: var(--pvt-height);
1154
- position: relative;
1155
- display: block;
1156
- overflow: inherit;
1157
- font-weight: inherit;
1158
- font-size: var(--rlc-skeleton-text-font-size, var(--rls-body-font-size));
1159
- letter-spacing: var(
1160
- --rlc-skeleton-text-letter-spacing,
1161
- var(--rls-body-letter-spacing)
1162
- );
1163
- line-height: var(--pvt-height);
1164
- }
1165
- .rls-skeleton-text__value {
1166
- display: flex;
1167
- column-gap: var(--rlc-skeleton-text-column-gap, var(--rls-sizing-x4));
1168
- align-items: center;
1169
- font-weight: inherit;
1170
- font-size: inherit;
1171
- line-height: inherit;
1172
- letter-spacing: inherit;
1173
- }
1174
- .rls-skeleton-text__value > span {
1175
- display: block;
1176
- overflow: hidden;
1177
- text-overflow: ellipsis;
1178
- white-space: nowrap;
1179
- } /*# sourceMappingURL=SkeletonText.css.map */
1180
-
1181
- .rls-switch {
1182
- --pvt-component-background: var(--rls-app-color-400);
1183
- --pvt-component-height: var(
1184
- --rlc-switch-component-height,
1185
- var(--rls-sizing-x12)
1186
- );
1187
- --pvt-element-left: var(--rls-sizing-x2);
1188
- --pvt-element-width: var(--rlc-switch-element-width, var(--rls-sizing-x8));
1189
- --pvt-element-height: var(--rlc-switch-element-height, var(--rls-sizing-x8));
1190
- --pvt-element-radius: var(--rlc-switch-element-radius, 50%);
1191
- max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
1192
- }
1193
- .rls-switch:hover {
1194
- cursor: var(--rlc-switch-cursor, initial);
1195
- }
1196
- .rls-switch--capsule {
1197
- --pvt-component-height: var(--rls-sizing-x8);
1198
- --pvt-element-height: var(--rls-sizing-x4);
1199
- --pvt-element-radius: var(--rls-sizing-x4);
1200
- }
1201
- .rls-switch--checked {
1202
- --pvt-component-background: var(--rls-theme-gradient-500);
1203
- --pvt-element-left: calc(
1204
- 100% - var(--pvt-element-width) - var(--rls-sizing-x2)
1205
- );
1206
- }
1207
- .rls-switch--disabled {
1208
- --pvt-component-background: var(--rls-app-color-300);
1209
- opacity: 0.5;
1210
- pointer-events: none;
1211
- }
1212
- .rls-switch--disabled.rls-switch--checked {
1213
- --pvt-component-background: var(--rls-theme-color-400);
1214
- }
1215
- .rls-switch__component {
1216
- position: relative;
1217
- width: 100%;
1218
- height: var(--pvt-component-height);
1219
- background: var(--pvt-component-background);
1220
- border-radius: var(--rls-sizing-x6);
1221
- }
1222
- .rls-switch__component__element {
1223
- position: absolute;
1224
- top: var(--rls-sizing-x2);
1225
- left: var(--pvt-element-left);
1226
- width: var(--pvt-element-width);
1227
- height: var(--pvt-element-height);
1228
- border-radius: var(--pvt-element-radius);
1229
- padding: var(--rls-sizing-x2);
1230
- box-sizing: border-box;
1231
- z-index: var(--rls-z-index-2);
1232
- background: var(--rls-app-color-050);
1233
- transition: all 160ms var(--rls-standard-curve);
1234
- } /*# sourceMappingURL=Switch.css.map */
1235
-
1236
- .rls-alert {
1237
- --pvt-icon-background: var(--rls-app-color-600);
1238
- --pvt-icon-color: var(--rls-app-color-050);
1239
- --pvt-content-font-color: var(--rls-app-color-500);
1240
- position: relative;
1241
- display: flex;
1242
- align-items: var(--rlc-alert-align-items, flex-start);
1243
- column-gap: var(--rls-sizing-x6);
1244
- padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
1245
- box-sizing: border-box;
1246
- background: var(--rls-app-color-100);
1247
- border: var(--rls-app-border-1-300);
1248
- border-radius: var(--rls-sizing-x4);
1249
- }
1250
- .rls-alert[rls-theme] {
1251
- --pvt-icon-background: var(--rls-theme-color-500);
1252
- --pvt-icon-color: var(--rls-theme-color-050);
1253
- --pvt-content-font-color: var(--rls-theme-color-700);
1254
- background: var(--rls-theme-color-050);
1255
- border: var(--rls-theme-border-1-200);
1256
- }
1257
- .rls-alert__icon {
1258
- --rlc-icon-color: var(--pvt-icon-color);
1259
- display: flex;
1260
- width: var(--rls-sizing-x16);
1261
- height: var(--rls-sizing-x16);
1262
- align-items: center;
1263
- justify-content: center;
1264
- border-radius: 50%;
1265
- background: var(--pvt-icon-background);
1266
- }
1267
- .rls-alert__icon + .rls-alert__content {
1268
- max-width: calc(100% - 22rem);
1269
- }
1270
- .rls-alert__content {
1271
- width: auto;
1272
- color: var(--pvt-content-font-color);
1273
- } /*# sourceMappingURL=Alert.css.map */
1274
-
1275
- .rls-ballot {
1276
- --rlc-avatar-width: var(--rls-sizing-x20);
1277
- --rlc-avatar-height: var(--rls-sizing-x20);
1278
- --pvt-title-font-size: var(
1279
- --rlc-ballot-title-font-size,
1280
- var(--rls-label-font-size)
1281
- );
1282
- --pvt-title-letter-spacing: var(
1283
- --rlc-ballot-title-letter-spacing,
1284
- var(--rls-label-letter-spacing)
1285
- );
1286
- --pvt-title-line-height: var(
1287
- --rlc-ballot-title-line-height,
1288
- var(--rls-label-line-height)
1289
- );
1290
- --pvt-subtitle-font-size: var(
1291
- --rlc-ballot-subtitle-font-size,
1292
- var(--rls-smalltext-font-size)
1293
- );
1294
- --pvt-subtitle-letter-spacing: var(
1295
- --rlc-ballot-subtitle-letter-spacing,
1296
- var(--rls-smalltext-letter-spacing)
1297
- );
1298
- --pvt-subtitle-line-height: var(
1299
- --rlc-ballot-subtitle-line-height,
1300
- var(--rls-smalltext-line-height)
1301
- );
1302
- position: relative;
1303
- display: flex;
1304
- width: var(--rlc-ballot-width, 100%);
1305
- align-items: center;
1306
- column-gap: var(--rls-sizing-x4);
1307
- padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
1308
- box-sizing: border-box;
1309
- overflow: hidden;
1310
- }
1311
- .rls-ballot--bordered {
1312
- border-radius: var(--rls-sizing-x4);
1313
- border: var(--rls-app-border-2-100);
1314
- }
1315
- .rls-ballot--skeleton {
1316
- --rls-subtitle-width: 60%;
1317
- }
1318
- .rls-ballot__component {
1319
- display: flex;
1320
- overflow: hidden;
1321
- flex-direction: column;
1322
- row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x1));
1323
- }
1324
- .rls-ballot .rls-avatar + .rls-ballot__component {
1325
- width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
1326
- }
1327
- .rls-ballot__title {
1328
- --rlc-skeleton-text-font-size: var(--pvt-title-font-size);
1329
- --rlc-skeleton-text-height: auto;
1330
- --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
1331
- position: relative;
1332
- width: 100%;
1333
- color: var(--rls-app-color-900);
1334
- overflow: hidden;
1335
- white-space: nowrap;
1336
- text-overflow: ellipsis;
1337
- font-weight: var(
1338
- --rlc-ballot-title-font-weight,
1339
- var(--rls-font-weight-medium)
1340
- );
1341
- font-size: var(--pvt-title-font-size);
1342
- letter-spacing: var(--pvt-title-letter-spacing);
1343
- line-height: var(--pvt-title-line-height);
1344
- }
1345
- .rls-ballot__subtitle {
1346
- --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
1347
- --rlc-skeleton-text-height: auto;
1348
- --rlc-skeleton-text-letter-spacing: var(--pvt-subtitle-letter-spacing);
1349
- position: relative;
1350
- width: var(--rlc-ballot-subtitle-width, 100%);
1351
- color: var(--rls-app-color-500);
1352
- font-weight: var(
1353
- --rlc-ballot-subtitle-font-weight,
1354
- var(--rls-font-weight-medium)
1355
- );
1356
- font-size: var(--pvt-subtitle-font-size);
1357
- letter-spacing: var(--pvt-subtitle-letter-spacing);
1358
- line-height: var(--pvt-subtitle-line-height);
1359
- overflow: var(--rlc-ballot-subtitle-overflow, initial);
1360
- text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
1361
- white-space: var(--rlc-ballot-subtitle-white-space, initial);
1362
- } /*# sourceMappingURL=Ballot.css.map */
1363
-
1364
- .rls-button-progress {
1365
- --rlc-progress-circular-dimension: var(--rls-sizing-x16);
1366
- position: relative;
1367
- display: flex;
1368
- justify-content: center;
1369
- align-items: center;
1370
- } /*# sourceMappingURL=ButtonProgress.css.map */
1371
-
1372
- .rls-button-toggle {
1373
- width: auto;
1374
- }
1375
- .rls-button-toggle__content {
1376
- display: flex;
1377
- justify-content: center;
1378
- }
1379
- .rls-button-toggle__action {
1380
- --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
1381
- var(--rls-sizing-x2);
1382
- width: auto;
1383
- }
1384
- .rls-button-toggle__icon {
1385
- --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
1386
- 0rem;
1387
- --rlc-button-content-padding: var(--rls-sizing-x2);
1388
- width: auto;
1389
- }
1390
- .rls-button-toggle__list {
1391
- --rlc-button-toggle-ul-height: 0rem;
1392
- --rlc-button-toggle-ul-opacity: 0;
1393
- --rlc-button-toggle-ul-transform: none;
1394
- position: absolute;
1395
- top: 22.5rem;
1396
- left: 0rem;
1397
- width: 100%;
1398
- height: 0rem;
1399
- overflow: hidden;
1400
- z-index: var(--rls-z-index-4);
1401
- }
1402
- .rls-button-toggle__list--hide {
1403
- --rlc-button-toggle-ul-opacity: 0;
1404
- --rlc-button-toggle-ul-transform: scale(0, 0);
1405
- }
1406
- .rls-button-toggle__list--visible {
1407
- --rlc-button-toggle-ul-height: auto;
1408
- --rlc-button-toggle-ul-opacity: 1;
1409
- --rlc-button-toggle-ul-transform: scale(1, 1);
1410
- overflow: initial;
1411
- opacity: 1;
1412
- height: auto;
1413
- }
1414
- .rls-button-toggle__list ul {
1415
- position: relative;
1416
- display: flex;
1417
- flex-direction: column;
1418
- float: left;
1419
- width: 100%;
1420
- height: var(--rlc-button-toggle-ul-height);
1421
- opacity: var(--rlc-button-toggle-ul-opacity);
1422
- padding: var(--rls-sizing-x4) 0rem;
1423
- border-radius: var(--rls-sizing-x4);
1424
- box-sizing: border-box;
1425
- overflow-y: auto;
1426
- overflow-x: hidden;
1427
- z-index: var(--rls-z-index-2);
1428
- background: var(--rls-app-color-050);
1429
- border: var(--rls-theme-border-1-500);
1430
- transform: var(--rlc-button-toggle-ul-transform);
1431
- transform-origin: 0% 0%;
1432
- box-shadow: var(--rls-theme-shadow-500);
1433
- transition:
1434
- transform 240ms 0ms var(--rls-standard-curve),
1435
- opacity 240ms 0ms var(--rls-standard-curve);
1436
- }
1437
- .rls-button-toggle__list ul li {
1438
- padding: 0rem var(--rls-sizing-x6);
1439
- box-sizing: border-box;
1440
- height: var(--rls-sizing-x20);
1441
- line-height: var(--rls-sizing-x20);
1442
- cursor: default;
1443
- font-weight: var(--rls-font-weight-semibold);
1444
- font-size: var(--rls-smalltext-font-size);
1445
- letter-spacing: var(--rls-smalltext-letter-spacing);
1446
- text-transform: uppercase;
1447
- color: var(--rls-app-color-600);
1448
- }
1449
- .rls-button-toggle__list ul li:hover {
1450
- background: var(--rls-app-color-100);
1451
- color: var(--rls-app-color-900);
1452
- } /*# sourceMappingURL=ButtonToggle.css.map */
1453
-
1454
- .rls-field-decimal {
1455
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1456
- position: relative;
1457
- width: 100%;
1458
- box-sizing: border-box;
1459
- } /*# sourceMappingURL=FieldDecimal.css.map */
1460
-
1461
- .rls-field-money {
1462
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1463
- position: relative;
1464
- width: 100%;
1465
- box-sizing: border-box;
1466
- } /*# sourceMappingURL=FieldMoney.css.map */
1467
-
1468
- .rls-field-number {
1469
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1470
- position: relative;
1471
- width: 100%;
1472
- box-sizing: border-box;
1473
- } /*# sourceMappingURL=FieldNumber.css.map */
1474
-
1475
- .rls-field-password {
1476
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1477
- --rlc-action-ripple-dimension: var(--rls-sizing-x12);
1478
- --rlc-action-ripple-position: -6rem;
1479
- position: relative;
1480
- width: 100%;
1481
- box-sizing: border-box;
1482
- }
1483
- .rls-field-password .rls-button-action {
1484
- padding: 0rem;
1485
- width: var(--rls-sizing-x12);
1486
- height: var(--rls-sizing-x12);
1487
- z-index: 2;
1488
- } /*# sourceMappingURL=FieldPassword.css.map */
1489
-
1490
- .rls-field-percentage {
1491
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1492
- position: relative;
1493
- width: 100%;
1494
- box-sizing: border-box;
1495
- } /*# sourceMappingURL=FieldPercentage.css.map */
1496
-
1497
- .rls-field-readonly {
1498
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1499
- --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-600));
1500
- --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
1501
- --pvt-letter-spacing: var(
1502
- --rlc-input-letter-spacing,
1503
- var(--rls-input-letter-spacing)
1504
- );
1505
- --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
1506
- --pvt-text-align: var(--rlc-input-text-align, left);
1507
- --pvt-component-font-color: var(--pvt-font-color);
1508
- position: relative;
1509
- width: 100%;
1510
- box-sizing: border-box;
1511
- } /*# sourceMappingURL=FieldReadonly.css.map */
1512
-
1513
- .rls-field-text {
1514
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1515
- position: relative;
1516
- width: 100%;
1517
- box-sizing: border-box;
1518
- } /*# sourceMappingURL=FieldText.css.map */
1519
-
1520
- .rls-label-checkbox {
1521
- --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
1522
- --pvt-label-font-size: var(
1523
- --rlc-label-checkbox-font-size,
1524
- var(--rls-label-font-size)
1525
- );
1526
- --pvt-label-letter-spacing: var(
1527
- --rlc-label-checkbox-letter-spacing,
1528
- var(--rls-label-letter-spacing)
1529
- );
1530
- --rlc-checkbox-dimension: var(--pvt-dimension);
1531
- --rlc-checkbox-cursor: pointer;
1532
- --rlc-ballot-padding: 0rem;
1533
- --pvt-text-opacity: 1;
1534
- --pvt-text-overflow: hidden;
1535
- --pvt-text-white-space: nowrap;
1536
- --pvt-text-text-overflow: ellipsis;
1537
- display: flex;
1538
- column-gap: var(--rls-sizing-x4);
1539
- align-items: center;
1540
- }
1541
- .rls-label-checkbox--disabled {
1542
- --pvt-text-opacity: 0.5;
1543
- pointer-events: none;
1544
- }
1545
- .rls-label-checkbox--reverse {
1546
- flex-direction: row-reverse;
1547
- }
1548
- .rls-label-checkbox--extended {
1549
- --pvt-text-text-overflow: initial;
1550
- --pvt-text-overflow: initial;
1551
- --pvt-text-white-space: initial;
1552
- }
1553
- .rls-label-checkbox__component {
1554
- width: var(--pvt-dimension);
1555
- flex: 0 0 auto;
1556
- }
1557
- .rls-label-checkbox__text {
1558
- flex: 1 1 auto;
1559
- font-size: var(--pvt-label-font-size);
1560
- font-weight: var(--rls-font-weight-medium);
1561
- letter-spacing: var(--pvt-label-letter-spacing);
1562
- line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
1563
- color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
1564
- user-select: none;
1565
- opacity: var(--pvt-text-opacity);
1566
- overflow: hidden;
1567
- }
1568
- .rls-label-checkbox__text > p {
1569
- height: initial;
1570
- overflow: initial;
1571
- text-overflow: initial;
1572
- white-space: initial;
1573
- } /*# sourceMappingURL=LabelCheckBox.css.map */
1574
-
1575
- .rls-label-radiobutton {
1576
- --pvt-dimension: var(
1577
- --rlc-label-radiobutton-dimension,
1578
- var(--rls-sizing-x12)
1579
- );
1580
- --pvt-label-font-size: var(
1581
- --rlc-label-radiobutton-font-size,
1582
- var(--rls-label-font-size)
1583
- );
1584
- --pvt-label-letter-spacing: var(
1585
- --rlc-label-radiobutton-letter-spacing,
1586
- var(--rls-label-letter-spacing)
1587
- );
1588
- --rlc-radiobutton-dimension: var(--pvt-dimension);
1589
- --rlc-radiobutton-cursor: pointer;
1590
- --rlc-ballot-padding: 0rem;
1591
- --pvt-text-opacity: 1;
1592
- --pvt-text-overflow: hidden;
1593
- --pvt-text-white-space: nowrap;
1594
- --pvt-text-text-overflow: ellipsis;
1595
- display: flex;
1596
- column-gap: var(--rls-sizing-x4);
1597
- align-items: center;
1598
- }
1599
- .rls-label-radiobutton--disabled {
1600
- --pvt-text-opacity: 0.5;
1601
- pointer-events: none;
1602
- }
1603
- .rls-label-radiobutton--reverse {
1604
- flex-direction: row-reverse;
1605
- }
1606
- .rls-label-radiobutton--extended {
1607
- --pvt-text-text-overflow: initial;
1608
- --pvt-text-overflow: initial;
1609
- --pvt-text-white-space: initial;
1610
- }
1611
- .rls-label-radiobutton__component {
1612
- width: var(--pvt-dimension);
1613
- flex: 0 0 auto;
1614
- }
1615
- .rls-label-radiobutton__text {
1616
- flex: 1 1 auto;
1617
- font-size: var(--pvt-label-font-size);
1618
- font-weight: var(--rls-font-weight-medium);
1619
- letter-spacing: var(--pvt-label-letter-spacing);
1620
- line-height: var(--rlc-label-radiobutton-line-height, var(--rls-sizing-x12));
1621
- color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
1622
- user-select: none;
1623
- opacity: var(--pvt-text-opacity);
1624
- overflow: hidden;
1625
- }
1626
- .rls-label-radiobutton__text > p {
1627
- height: initial;
1628
- overflow: initial;
1629
- text-overflow: initial;
1630
- white-space: initial;
1631
- } /*# sourceMappingURL=LabelRadioButton.css.map */
1632
-
1633
- .rls-label-switch {
1634
- --rlc-switch-cursor: pointer;
1635
- --rlc-ballot-padding: 0rem;
1636
- --pvt-label-font-size: var(
1637
- --rlc-label-switch-font-size,
1638
- var(--rls-label-font-size)
1639
- );
1640
- --pvt-label-letter-spacing: var(
1641
- --rlc-label-switch-letter-spacing,
1642
- var(--rls-label-letter-spacing)
1643
- );
1644
- --pvt-text-opacity: 1;
1645
- --pvt-text-overflow: hidden;
1646
- --pvt-text-white-space: nowrap;
1647
- --pvt-text-text-overflow: ellipsis;
1648
- display: flex;
1649
- column-gap: var(--rls-sizing-x4);
1650
- align-items: center;
1651
- }
1652
- .rls-label-switch--disabled {
1653
- --pvt-text-opacity: 0.5;
1654
- pointer-events: none;
1655
- }
1656
- .rls-label-switch--reverse {
1657
- flex-direction: row-reverse;
1658
- }
1659
- .rls-label-switch--extended {
1660
- --pvt-text-text-overflow: initial;
1661
- --pvt-text-overflow: initial;
1662
- --pvt-text-white-space: initial;
1663
- --pvt-text-height: auto;
1664
- }
1665
- .rls-label-switch__component {
1666
- width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
1667
- flex: 0 0 auto;
1668
- }
1669
- .rls-label-switch__text {
1670
- flex: 1 1 auto;
1671
- font-size: var(--pvt-label-font-size);
1672
- font-weight: var(--rls-font-weight-medium);
1673
- letter-spacing: var(--pvt-label-letter-spacing);
1674
- line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
1675
- color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
1676
- user-select: none;
1677
- opacity: var(--pvt-text-opacity);
1678
- overflow: hidden;
1679
- }
1680
- .rls-label-switch__text > p {
1681
- height: initial;
1682
- overflow: initial;
1683
- text-overflow: initial;
1684
- white-space: initial;
1685
- } /*# sourceMappingURL=LabelSwitch.css.map */
1686
-
1687
- .rls-pagination {
1688
- --pvt-dimension: var(--rlc-pagination-dimension, var(--rls-sizing-x16));
1689
- --pvt-description-display: block;
1690
- --pvt-count-display: none;
1691
- position: relative;
1692
- display: flex;
1693
- width: 100%;
1694
- column-gap: var(--rlc-pagination-column-gap, var(--rls-sizing-x4));
1695
- justify-content: center;
1696
- align-items: center;
1697
- overflow: hidden;
1698
- height: var(
1699
- --rlc-pagination-height,
1700
- calc(var(--pvt-dimension) + var(--rls-sizing-x4))
1701
- );
1702
- padding: var(--rlc-pagination-padding, 0rem var(--rls-sizing-x6));
1703
- box-sizing: border-box;
1704
- }
1705
- .rls-pagination__body {
1706
- display: flex;
1707
- width: auto;
1708
- column-gap: var(--rls-sizing-x8);
1709
- align-items: center;
1710
- }
1711
- .rls-pagination__pages {
1712
- display: flex;
1713
- width: auto;
1714
- column-gap: var(--rls-sizing-x4);
1715
- align-items: center;
1716
- }
1717
- .rls-pagination__page {
1718
- background: var(--rls-app-color-200);
1719
- color: var(--rls-app-color-900);
1720
- cursor: default;
1721
- text-align: center;
1722
- width: var(--pvt-dimension);
1723
- height: var(--pvt-dimension);
1724
- line-height: var(--pvt-dimension);
1725
- border-radius: var(--rls-sizing-x2);
1726
- font-size: var(--rls-body-font-size);
1727
- letter-spacing: var(--rls-body-letter-spacing);
1728
- }
1729
- .rls-pagination__page:hover {
1730
- background: var(--rls-theme-color-300);
1731
- color: var(--rls-theme-color-900);
1732
- }
1733
- .rls-pagination__page--active {
1734
- background: var(--rls-theme-gradient-500);
1735
- color: var(--rls-app-color-050);
1736
- }
1737
- .rls-pagination__description {
1738
- display: var(--pvt-description-display);
1739
- width: auto;
1740
- font-size: var(--rls-body-font-size);
1741
- font-weight: var(--rls-font-weight-bold);
1742
- letter-spacing: var(--rls-body-letter-spacing);
1743
- color: var(--rls-app-color-900);
1744
- }
1745
- .rls-pagination__count {
1746
- display: var(--pvt-count-display);
1747
- font-size: var(--rls-body-font-size);
1748
- font-weight: var(--rls-font-weight-bold);
1749
- letter-spacing: var(--rls-body-letter-spacing);
1750
- color: var(--rls-app-color-900);
1751
- }
1752
- .rls-pagination__actions {
1753
- display: flex;
1754
- width: auto;
1755
- column-gap: var(--rls-sizing-x2);
1756
- }
1757
- .rls-pagination__action {
1758
- --rlc-icon-dimension: calc(var(--pvt-dimension) - var(--rls-sizing-x4));
1759
- background: none;
1760
- outline: none;
1761
- color: var(--rls-app-color-600);
1762
- padding: var(--rls-sizing-x2);
1763
- }
1764
- .rls-pagination__action:hover {
1765
- color: var(--rls-theme-color-300);
1766
- cursor: pointer;
1767
- }
1768
- .rls-pagination__action:disabled {
1769
- pointer-events: none;
1770
- opacity: 0.5;
1771
- }
1772
- @media screen and (max-width: 640px) {
1773
- .rls-pagination {
1774
- --pvt-description-display: none;
1775
- --pvt-count-display: block;
1776
- padding: 0rem;
1777
- }
1778
- } /*# sourceMappingURL=Pagination.css.map */
1779
-
1780
- .rls-picker-day {
1781
- --pvt-span-background: transparent;
1782
- --pvt-span-font-color: var(--rls-app-color-900);
1783
- --pvt-span-border: var(--rls-app-border-1-transparent);
1784
- --pvt-span-box-shadow: none;
1785
- position: relative;
1786
- display: var(--rlc-picker-day-display, flex);
1787
- width: 100%;
1788
- max-width: 140rem;
1789
- flex-direction: column;
1790
- row-gap: var(--rls-sizing-x2);
1791
- box-sizing: border-box;
1792
- user-select: none;
1793
- }
1794
- .rls-picker-day__header {
1795
- display: flex;
1796
- }
1797
- .rls-picker-day__label {
1798
- width: 100%;
1799
- height: var(--rls-sizing-x20);
1800
- line-height: var(--rls-sizing-x20);
1801
- text-align: center;
1802
- font-size: var(--rls-caption-font-size);
1803
- color: var(--rls-app-color-600);
1804
- font-weight: var(--rls-font-weight-regular);
1805
- letter-spacing: var(--rls-caption-letter-spacing);
1806
- }
1807
- .rls-picker-day__component {
1808
- display: flex;
1809
- flex-direction: column;
1810
- row-gap: var(--rls-sizing-x3);
1811
- }
1812
- .rls-picker-day__week {
1813
- display: flex;
1814
- }
1815
- .rls-picker-day__element {
1816
- text-align: center;
1817
- padding: var(--rls-sizing-x1);
1818
- box-sizing: border-box;
1819
- }
1820
- .rls-picker-day__element--today {
1821
- --pvt-span-background: transparent;
1822
- --pvt-span-font-color: var(--rls-theme-color-500);
1823
- --pvt-span-border: none;
1824
- --pvt-span-box-shadow: var(--rls-theme-shadow-500);
1825
- }
1826
- .rls-picker-day__element--selected {
1827
- --pvt-span-background: var(--rls-theme-color-200);
1828
- --pvt-span-font-color: var(--rls-theme-color-600);
1829
- --pvt-span-border: none;
1830
- --pvt-span-box-shadow: none;
1831
- }
1832
- .rls-picker-day__element--focused {
1833
- --pvt-span-background: var(--rls-theme-gradient-500);
1834
- --pvt-span-font-color: var(--rls-theme-color-050);
1835
- --pvt-span-border: none;
1836
- --pvt-span-box-shadow: none;
1837
- }
1838
- .rls-picker-day__element--forbidden {
1839
- --pvt-span-background: var(--rls-app-color-100);
1840
- --pvt-span-font-color: var(--rls-app-color-400);
1841
- --pvt-span-border: var(--rls-app-border-1-100);
1842
- --pvt-span-box-shadow: none;
1843
- pointer-events: none;
1844
- }
1845
- .rls-picker-day__element--disabled {
1846
- --pvt-span-background: transparent;
1847
- --pvt-span-font-color: var(--rls-app-color-400);
1848
- --pvt-span-border: var(--rls-app-border-1-transparent);
1849
- --pvt-span-box-shadow: none;
1850
- pointer-events: none;
1851
- }
1852
- .rls-picker-day__element__span {
1853
- position: relative;
1854
- display: block;
1855
- font-size: var(--rls-paragraph-font-size);
1856
- font-weight: var(--rls-font-weight-semibold);
1857
- border-radius: var(--rls-sizing-x4);
1858
- height: var(--rls-sizing-x18);
1859
- line-height: var(--rls-sizing-x18);
1860
- box-sizing: border-box;
1861
- letter-spacing: var(--rls-paragraph-letter-spacing);
1862
- box-shadow: var(--pvt-span-box-shadow);
1863
- }
1864
- .rls-picker-day__element__span:not(:hover) {
1865
- color: var(--pvt-span-font-color);
1866
- border: var(--pvt-span-border);
1867
- background: var(--pvt-span-background);
1868
- }
1869
- .rls-picker-day__element__span:hover {
1870
- background: var(--rls-theme-color-800);
1871
- color: var(--rls-theme-color-050);
1872
- border: var(--rls-theme-border-1-800);
1873
- } /*# sourceMappingURL=PickerDay.css.map */
1874
-
1875
- .rls-picker-day-range {
1876
- --pvt-span-nothover-background: transparent;
1877
- --pvt-span-nothover-font-color: inherit;
1878
- --pvt-span-background: transparent;
1879
- position: relative;
1880
- display: var(--rlc-picker-day-range-display, flex);
1881
- width: 100%;
1882
- max-width: 140rem;
1883
- flex-direction: column;
1884
- row-gap: var(--rls-sizing-x4);
1885
- box-sizing: border-box;
1886
- user-select: none;
1887
- }
1888
- .rls-picker-day-range__title {
1889
- color: var(--rls-app-color-600);
1890
- text-align: center;
1891
- font-size: var(--rls-body-font-size);
1892
- letter-spacing: var(--rls-body-letter-spacing);
1893
- line-height: var(--rls-body-line-height);
1894
- font-weight: var(--rls-font-weight-bold);
1895
- }
1896
- .rls-picker-day-range__header {
1897
- display: flex;
1898
- }
1899
- .rls-picker-day-range__label {
1900
- width: 100%;
1901
- height: var(--rls-sizing-x20);
1902
- line-height: var(--rls-sizing-x20);
1903
- text-align: center;
1904
- font-size: var(--rls-caption-font-size);
1905
- color: var(--rls-app-color-600);
1906
- font-weight: var(--rls-font-weight-regular);
1907
- letter-spacing: var(--rls-caption-letter-spacing);
1908
- }
1909
- .rls-picker-day-range__component {
1910
- display: flex;
1911
- flex-direction: column;
1912
- row-gap: var(--rls-sizing-x3);
1913
- }
1914
- .rls-picker-day-range__week {
1915
- display: flex;
1916
- }
1917
- .rls-picker-day-range__element {
1918
- text-align: center;
1919
- padding: var(--rls-sizing-x1);
1920
- box-sizing: border-box;
1921
- }
1922
- .rls-picker-day-range__element--ranged {
1923
- --pvt-span-nothover-background: var(--rls-theme-color-100);
1924
- }
1925
- .rls-picker-day-range__element--end {
1926
- --pvt-span-nothover-background: var(--rls-app-color-900);
1927
- --pvt-span-nothover-font-color: var(--rls-app-color-050);
1928
- }
1929
- .rls-picker-day-range__element--source {
1930
- --pvt-span-nothover-background: var(--rls-theme-color-500);
1931
- --pvt-span-nothover-font-color: var(--rls-app-color-050);
1932
- }
1933
- .rls-picker-day-range__element--forbidden {
1934
- --pvt-span-background: var(--rls-app-color-200);
1935
- pointer-events: none;
1936
- opacity: 0.5;
1937
- }
1938
- .rls-picker-day-range__element--disabled {
1939
- pointer-events: none;
1940
- opacity: 0.5;
1941
- }
1942
- .rls-picker-day-range__element__span {
1943
- position: relative;
1944
- display: block;
1945
- font-size: var(--rls-paragraph-font-size);
1946
- font-weight: var(--rls-font-weight-semibold);
1947
- border-radius: var(--rls-sizing-x4);
1948
- height: var(--rls-sizing-x18);
1949
- line-height: var(--rls-sizing-x18);
1950
- box-sizing: border-box;
1951
- letter-spacing: var(--rls-paragraph-letter-spacing);
1952
- }
1953
- .rls-picker-day-range__element__span:not(:hover) {
1954
- background: var(--pvt-span-nothover-background);
1955
- color: var(--pvt-span-nothover-font-color);
1956
- }
1957
- .rls-picker-day-range__element__span:hover {
1958
- color: var(--rls-app-color-050);
1959
- background: var(--rls-theme-color-900);
1960
- } /*# sourceMappingURL=PickerDayRange.css.map */
1961
-
1962
- .rls-picker-month {
1963
- --pvt-component-background: transparent;
1964
- --pvt-component-font-color: var(--rls-app-color-900);
1965
- position: relative;
1966
- display: var(--rlc-picker-month-display, grid);
1967
- grid-template-columns: repeat(3, 1fr);
1968
- width: 100%;
1969
- max-width: 140rem;
1970
- column-gap: var(--rls-sizing-x2);
1971
- row-gap: var(--rls-sizing-x4);
1972
- padding: var(--rls-sizing-x1);
1973
- box-sizing: border-box;
1974
- }
1975
- .rls-picker-month__component {
1976
- position: relative;
1977
- display: flex;
1978
- box-sizing: border-box;
1979
- justify-content: center;
1980
- align-items: center;
1981
- height: var(--rls-sizing-x20);
1982
- border-radius: var(--rls-sizing-x4);
1983
- box-sizing: border-box;
1984
- }
1985
- .rls-picker-month__component:not(:hover) {
1986
- color: var(--pvt-component-font-color);
1987
- background: var(--pvt-component-background);
1988
- }
1989
- .rls-picker-month__component:hover {
1990
- background: var(--rls-theme-color-900);
1991
- color: var(--rls-theme-font-900);
1992
- }
1993
- .rls-picker-month__component--selected {
1994
- --pvt-component-background: var(--rls-theme-color-200);
1995
- --pvt-component-font-color: var(--rls-theme-color-600);
1996
- }
1997
- .rls-picker-month__component--focused {
1998
- --pvt-component-background: var(--rls-theme-gradient-500);
1999
- --pvt-component-font-color: var(--rls-theme-color-050);
2000
- }
2001
- .rls-picker-month__component--disabled {
2002
- --pvt-component-background: transparent;
2003
- --pvt-component-font-color: var(--rls-app-color-400);
2004
- pointer-events: none;
2005
- }
2006
- .rls-picker-month__span {
2007
- font-weight: var(--rls-font-weight-semibold);
2008
- font-size: var(--rls-caption-font-size);
2009
- cursor: default;
2010
- pointer-events: none;
2011
- letter-spacing: 0.325rem;
2012
- } /*# sourceMappingURL=PickerMonth.css.map */
2013
-
2014
- .rls-picker-selector-title {
2015
- display: flex;
2016
- justify-content: space-between;
2017
- align-items: center;
2018
- padding: var(--rlc-picker-selector-title-padding, 0rem);
2019
- box-sizing: border-box;
2020
- border-radius: var(--rlc-picker-selector-title-radius, 0rem);
2021
- background: var(--rlc-picker-selector-title-background, transparent);
2022
- }
2023
- .rls-picker-selector-title__label {
2024
- display: flex;
2025
- column-gap: var(--rls-sizing-x3);
2026
- justify-content: center;
2027
- }
2028
- .rls-picker-selector-title__label > span {
2029
- font-size: var(--rls-body-font-size);
2030
- font-weight: var(--rls-font-weight-bold);
2031
- cursor: default;
2032
- height: var(--rls-sizing-x14);
2033
- line-height: var(--rls-sizing-x14);
2034
- }
2035
- .rls-picker-selector-title__label > span:hover {
2036
- color: var(--rls-theme-color-500);
2037
- }
2038
- .rls-picker-selector-title > button {
2039
- --rlc-icon-dimension: var(--rls-sizing-x10);
2040
- background: var(--rls-app-color-050);
2041
- outline: none;
2042
- padding: var(--rls-sizing-x2);
2043
- border-radius: var(--rls-sizing-x4);
2044
- color: var(--rls-app-color-900);
2045
- }
2046
- .rls-picker-selector-title > button:hover {
2047
- background: var(--rls-app-color-300);
2048
- }
2049
- .rls-picker-selector-title > button:disabled {
2050
- opacity: 0.5;
2051
- background: rgba(0, 0, 0, 0);
2052
- color: var(--rls-app-color-600);
2053
- } /*# sourceMappingURL=PickerSelectorTitle.css.map */
2054
-
2055
- .rls-picker-year {
2056
- --pvt-component-background: transparent;
2057
- --pvt-component-font-color: var(--rls-app-color-600);
2058
- position: relative;
2059
- display: var(--rlc-picker-year-display, block);
2060
- width: 100%;
2061
- max-width: 140rem;
2062
- box-sizing: border-box;
2063
- overflow: hidden;
2064
- user-select: none;
2065
- }
2066
- .rls-picker-year__header {
2067
- display: flex;
2068
- justify-content: space-between;
2069
- align-items: center;
2070
- box-sizing: border-box;
2071
- padding: var(--rls-sizing-x4);
2072
- border-radius: var(--rls-sizing-x4);
2073
- }
2074
- .rls-picker-year__header > span {
2075
- font-size: var(--rls-body-font-size);
2076
- font-weight: var(--rls-font-weight-semibold);
2077
- letter-spacing: 0.325rem;
2078
- color: var(--rls-app-color-900);
2079
- }
2080
- .rls-picker-year__action {
2081
- --rlc-icon-dimension: var(--rls-sizing-x10);
2082
- background: var(--rls-theme-color-100);
2083
- color: var(--rls-theme-color-600);
2084
- outline: none;
2085
- padding: var(--rls-sizing-x2);
2086
- border-radius: var(--rls-sizing-x4);
2087
- }
2088
- .rls-picker-year__action:not(:disabled):hover {
2089
- color: var(--rls-theme-color-500);
2090
- }
2091
- .rls-picker-year__action:disabled {
2092
- opacity: 0.5;
2093
- background: rgba(0, 0, 0, 0);
2094
- color: var(--rls-theme-color-300);
2095
- }
2096
- .rls-picker-year__component {
2097
- position: relative;
2098
- display: grid;
2099
- width: 100%;
2100
- grid-template-columns: repeat(3, 1fr);
2101
- padding: var(--rls-sizing-x4);
2102
- box-sizing: border-box;
2103
- row-gap: var(--rls-sizing-x6);
2104
- column-gap: var(--rls-sizing-x8);
2105
- }
2106
- .rls-picker-year__element {
2107
- position: relative;
2108
- display: flex;
2109
- height: var(--rls-sizing-x20);
2110
- align-items: center;
2111
- justify-content: center;
2112
- box-sizing: border-box;
2113
- text-align: center;
2114
- border-radius: var(--rls-sizing-x4);
2115
- box-shadow: none;
2116
- }
2117
- .rls-picker-year__element:not(:hover) {
2118
- color: var(--pvt-component-font-color);
2119
- background: var(--pvt-component-background);
2120
- }
2121
- .rls-picker-year__element:hover {
2122
- background: var(--rls-theme-color-900);
2123
- color: var(--rls-theme-color-050);
2124
- }
2125
- .rls-picker-year__element--selected {
2126
- --pvt-component-background: var(--rls-theme-color-200);
2127
- --pvt-component-font-color: var(--rls-theme-color-600);
2128
- }
2129
- .rls-picker-year__element--focused {
2130
- --pvt-component-background: var(--rls-theme-gradient-500);
2131
- --pvt-component-font-color: var(--rls-theme-color-050);
2132
- }
2133
- .rls-picker-year__element--disabled {
2134
- --pvt-span-background: var(--rls-app-color-100);
2135
- --pvt-component-font-color: var(--rls-app-color-400);
2136
- pointer-events: none;
2137
- }
2138
- .rls-picker-year__span {
2139
- font-size: var(--rls-body-font-size);
2140
- letter-spacing: var(--rls-body-letter-spacing);
2141
- font-weight: var(--rls-font-weight-medium);
2142
- cursor: default;
2143
- pointer-events: none;
2144
- } /*# sourceMappingURL=PickerYear.css.map */
2145
-
2146
- .rls-slider {
2147
- --pvt-track-height: var(--rls-sizing-x3);
2148
- --pvt-thumb-background: var(--rls-theme-color-600);
2149
- --pvt-thumb-color: var(--rls-theme-color-050);
2150
- }
2151
- .rls-slider--empty {
2152
- --pvt-thumb-background: var(--rls-app-color-300);
2153
- --pvt-thumb-color: var(--rls-app-color-900);
2154
- }
2155
- .rls-slider__component {
2156
- position: relative;
2157
- width: calc(100% - var(--rls-sizing-x10));
2158
- margin: 0rem 5rem;
2159
- padding: var(--rls-sizing-x4) 0rem;
2160
- box-sizing: border-box;
2161
- }
2162
- .rls-slider__body {
2163
- display: flex;
2164
- column-gap: var(--rls-sizing-x4);
2165
- align-items: center;
2166
- }
2167
- .rls-slider__body .rls-icon {
2168
- padding: var(--rls-sizing-x4);
2169
- border-radius: 50%;
2170
- background: var(--rls-app-color-300);
2171
- }
2172
- .rls-slider__track {
2173
- position: relative;
2174
- width: 100%;
2175
- height: var(--pvt-track-height);
2176
- cursor: pointer;
2177
- background: var(--rls-app-color-300);
2178
- }
2179
- .rls-slider__track__on {
2180
- position: absolute;
2181
- width: 0%;
2182
- height: var(--pvt-track-height);
2183
- overflow: hidden;
2184
- z-index: var(--rls-z-index-4);
2185
- transition: width 200ms 0ms var(--rls-standard-curve);
2186
- background: var(--rls-theme-color-600);
2187
- }
2188
- .rls-slider__thumb {
2189
- position: absolute;
2190
- top: 0.5rem;
2191
- left: 0rem;
2192
- cursor: pointer;
2193
- width: var(--rls-sizing-x10);
2194
- height: var(--rls-sizing-x10);
2195
- line-height: var(--rls-sizing-x10);
2196
- text-align: center;
2197
- font-size: var(--rls-tiny-font-size);
2198
- font-weight: var(--rls-font-weight-medium);
2199
- color: var(--pvt-thumb-color);
2200
- z-index: var(--rls-z-index-4);
2201
- border-radius: 50%;
2202
- background: var(--pvt-thumb-background);
2203
- transform: translateX(-50%);
2204
- transition: left 200ms 0ms var(--rls-standard-curve);
2205
- } /*# sourceMappingURL=Slider.css.map */
2206
-
2207
- .rls-tabs {
2208
- --pvt-background: var(--rls-app-color-100);
2209
- --pvt-border: var(--rls-app-border-1-200);
2210
- --pvt-children-font-color: var(--rls-app-color-800);
2211
- display: flex;
2212
- background: var(--pvt-background);
2213
- padding: var(--rls-sizing-x2);
2214
- box-sizing: border-box;
2215
- border-radius: var(--rls-sizing-x4);
2216
- border: var(--pvt-border);
2217
- }
2218
- .rls-tabs__children {
2219
- height: var(--rls-sizing-x12);
2220
- line-height: var(--rls-sizing-x12);
2221
- border-radius: var(--rls-sizing-x4);
2222
- color: var(--rls-app-color-500);
2223
- font-size: var(--rls-smalltext-font-size);
2224
- font-weight: var(--rls-font-weight-medium);
2225
- letter-spacing: var(--rls-smalltext-letter-spacing);
2226
- text-align: center;
2227
- cursor: pointer;
2228
- transition: all 240ms var(--rls-standard-curve);
2229
- }
2230
- .rls-tabs__children--active {
2231
- color: var(--pvt-children-font-color);
2232
- font-weight: var(--rls-font-weight-bold);
2233
- background: var(--rls-app-color-050);
2234
- }
2235
- .rls-tabs__children--disabled {
2236
- color: var(--rls-app-color-400);
2237
- font-weight: var(--rls-font-weight-regular);
2238
- background: rgba(0, 0, 0, 0);
2239
- cursor: not-allowed;
2240
- }
2241
- .rls-tabs[rls-theme] {
2242
- --pvt-background: var(--rls-theme-color-050);
2243
- --pvt-border: var(--rls-theme-border-1-200);
2244
- --pvt-children-font-color: var(--rls-theme-color-600);
2245
- } /*# sourceMappingURL=Tabs.css.map */
2246
-
2247
- .rls-toolbar {
2248
- display: flex;
2249
- justify-content: space-between;
2250
- align-items: center;
2251
- column-gap: var(--rls-sizing-x6);
2252
- height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
2253
- }
2254
- .rls-toolbar > * {
2255
- width: auto;
2256
- }
2257
- .rls-toolbar__description {
2258
- display: flex;
2259
- flex-direction: column;
2260
- row-gap: var(--rls-sizing-x2);
2261
- overflow: hidden;
2262
- }
2263
- .rls-toolbar__description > label {
2264
- position: relative;
2265
- width: 100%;
2266
- overflow: hidden;
2267
- text-overflow: ellipsis;
2268
- white-space: nowrap;
2269
- }
2270
- .rls-toolbar__title {
2271
- color: var(--rls-app-color-900);
2272
- height: var(--rls-sizing-x12);
2273
- line-height: var(--rls-sizing-x12);
2274
- font-size: var(--rls-body-font-size);
2275
- letter-spacing: var(--rls-label-letter-spacing);
2276
- font-weight: var(--rls-font-weight-bold);
2277
- }
2278
- .rls-toolbar__subtitle {
2279
- color: var(--rls-app-color-600);
2280
- }
2281
- .rls-toolbar__actions {
2282
- display: flex;
2283
- box-sizing: border-box;
2284
- column-gap: var(--rls-sizing-x8);
2285
- align-items: center;
2286
- } /*# sourceMappingURL=Toolbar.css.map */
2287
-
2288
- .rls-bottom-sheet {
2289
- --pvt-component-transform: translateY(100%);
2290
- --pvt-component-height: 0rem;
2291
- --pvt-component-max-height: 75%;
2292
- --pvt-component-opacity: 0;
2293
- --pvt-component-visibility: hidden;
2294
- --pvt-component-transition: 320ms;
2295
- --pvt-backdrop-opacity: 0;
2296
- --pvt-backdrop-bottom: initial;
2297
- position: fixed;
2298
- display: flex;
2299
- top: 0rem;
2300
- left: 0rem;
2301
- width: 100%;
2302
- height: 100%;
2303
- justify-content: center;
2304
- z-index: var(--rls-z-index-24);
2305
- visibility: hidden;
2306
- }
2307
- .rls-bottom-sheet--visible {
2308
- --pvt-component-visibility: visible;
2309
- --pvt-component-height: auto;
2310
- --pvt-component-opacity: 1;
2311
- --pvt-component-transform: translateY(0);
2312
- --pvt-backdrop-bottom: 0rem;
2313
- --pvt-backdrop-opacity: 1;
2314
- visibility: visible;
2315
- }
2316
- .rls-bottom-sheet__component {
2317
- position: absolute;
2318
- display: flex;
2319
- bottom: 0px;
2320
- width: 100%;
2321
- max-width: 240rem;
2322
- max-height: var(--pvt-component-max-height);
2323
- flex-direction: column;
2324
- opacity: var(--pvt-component-opacity);
2325
- visibility: var(--pvt-component-visibility);
2326
- z-index: var(--rls-z-index-2);
2327
- border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
2328
- background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
2329
- transform: var(--pvt-component-transform);
2330
- transition:
2331
- opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2332
- transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2333
- visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2334
- }
2335
- .rls-bottom-sheet__component::before {
2336
- display: block;
2337
- content: '';
2338
- width: var(--rls-sizing-x24);
2339
- height: var(--rls-sizing-x2);
2340
- border-radius: var(--rls-sizing-x2);
2341
- background: var(--rls-app-color-300);
2342
- margin: var(--rls-sizing-x3) auto;
2343
- }
2344
- .rls-bottom-sheet__backdrop {
2345
- position: absolute;
2346
- display: block;
2347
- top: 0rem;
2348
- left: 0rem;
2349
- right: 0rem;
2350
- bottom: var(--pvt-backdrop-bottom);
2351
- opacity: var(--pvt-backdrop-opacity);
2352
- z-index: 1;
2353
- background: var(--rls-theme-backdrop-900);
2354
- backdrop-filter: blur(2px);
2355
- transition:
2356
- opacity 120ms 0ms var(--rls-deceleration-curve),
2357
- bottom 120ms 0ms var(--rls-deceleration-curve);
2358
- }
2359
- @media screen and (max-height: 960px) {
2360
- .rls-bottom-sheet {
2361
- --pvt-component-max-height: calc(100% - 32rem);
2362
- }
2363
- }
2364
- @media screen and (max-height: 720px) {
2365
- .rls-bottom-sheet {
2366
- --pvt-component-max-height: calc(100% - 24rem);
2367
- }
2368
- }
2369
- @media screen and (max-height: 560px) {
2370
- .rls-bottom-sheet {
2371
- --pvt-component-max-height: calc(100% - 16rem);
2372
- }
2373
- } /*# sourceMappingURL=BottomSheet.css.map */
2374
-
2375
- .rls-card {
2376
- --rlc-divider-background: var(--rls-app-color-300);
2377
- --pvt-background: var(--rls-app-color-050);
2378
- --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
2379
- --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
2380
- background: var(--pvt-background);
2381
- border-radius: var(--rls-sizing-x4);
2382
- box-shadow: var(--pvt-box-shadow);
2383
- }
2384
- .rls-card[rls-theme] {
2385
- --rlc-divider-background: var(--rls-theme-color-200);
2386
- --pvt-background: var(--rls-theme-color-050);
2387
- --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
2388
- }
2389
- .rls-card--outline {
2390
- border: var(--pvt-border);
2391
- box-sizing: border-box;
2392
- }
2393
- .rls-card__content {
2394
- display: flex;
2395
- flex-direction: column;
2396
- row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
2397
- padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
2398
- box-sizing: border-box;
2399
- } /*# sourceMappingURL=Card.css.map */
2400
-
2401
- .rls-confirmation {
2402
- --pvt-component-transform: translateY(150px) scale(0.6);
2403
- --pvt-component-height: 0rem;
2404
- --pvt-component-opacity: 0;
2405
- --pvt-component-visibility: hidden;
2406
- --pvt-title-font-size: var(--rls-heading5-font-size);
2407
- --pvt-title-letter-spacing: var(--rls-heading5-letter-spacing);
2408
- --pvt-title-line-height: var(--rls-heading5-line-height);
2409
- --pvt-title-text-transform: initial;
2410
- --pvt-subtitle-font-size: var(--rls-body-font-size);
2411
- --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
2412
- --pvt-subtitle-line-height: var(--rls-body-line-height);
2413
- --pvt-subtitle-text-transform: initial;
2414
- --pvt-content-font-size: var(--rls-input-font-size);
2415
- --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
2416
- --pvt-content-line-height: var(--rls-input-line-height);
2417
- --pvt-backdrop-opacity: 0;
2418
- --pvt-backdrop-bottom: initial;
2419
- position: fixed;
2420
- display: flex;
2421
- top: 0rem;
2422
- left: 0rem;
2423
- width: var(--rls-html-max-width);
2424
- height: var(--rls-html-max-height);
2425
- justify-content: center;
2426
- align-items: center;
2427
- z-index: var(--rls-z-index-24);
2428
- visibility: hidden;
2429
- }
2430
- .rls-confirmation--visible {
2431
- --pvt-component-visibility: visible;
2432
- --pvt-component-height: auto;
2433
- --pvt-component-opacity: 1;
2434
- --pvt-component-transform: translateY(0) scale(1);
2435
- --pvt-backdrop-bottom: 0rem;
2436
- --pvt-backdrop-opacity: 1;
2437
- visibility: visible;
2438
- }
2439
- .rls-confirmation__component {
2440
- position: absolute;
2441
- display: flex;
2442
- width: calc(100% - var(--rls-sizing-x16));
2443
- max-width: 180rem;
2444
- height: var(--pvt-component-height);
2445
- flex-direction: column;
2446
- row-gap: var(--rls-sizing-x8);
2447
- opacity: var(--pvt-component-opacity);
2448
- visibility: var(--pvt-component-visibility);
2449
- padding: var(--rls-sizing-x8) 0rem;
2450
- box-sizing: border-box;
2451
- z-index: var(--rls-z-index-4);
2452
- border-radius: var(--rls-sizing-x4);
2453
- background: var(--rls-app-color-050);
2454
- box-shadow: var(--rls-app-shadow-4);
2455
- transform: var(--pvt-component-transform);
2456
- transition:
2457
- opacity 125ms 0ms var(--rls-deceleration-curve),
2458
- transform 125ms 0ms var(--rls-deceleration-curve),
2459
- visibility 125ms 0ms var(--rls-deceleration-curve);
2460
- }
2461
- .rls-confirmation__header {
2462
- position: relative;
2463
- display: flex;
2464
- width: 100%;
2465
- flex-direction: column;
2466
- row-gap: var(--rls-sizing-x4);
2467
- padding: 0rem var(--rls-sizing-x8);
2468
- box-sizing: border-box;
2469
- }
2470
- .rls-confirmation__title {
2471
- text-align: center;
2472
- color: var(--rls-app-color-900);
2473
- font-weight: var(--rls-font-weight-bold);
2474
- font-size: var(--pvt-title-font-size);
2475
- line-height: var(--pvt-title-line-height);
2476
- letter-spacing: var(--pvt-title-letter-spacing);
2477
- text-transform: var(--pvt-title-text-transform);
2478
- }
2479
- .rls-confirmation__subtitle {
2480
- text-align: center;
2481
- color: var(--rls-theme-color-400);
2482
- font-weight: var(--rls-font-weight-bold);
2483
- font-size: var(--pvt-subtitle-font-size);
2484
- line-height: var(--pvt-subtitle-line-height);
2485
- letter-spacing: var(--pvt-subtitle-letter-spacing);
2486
- text-transform: var(--pvt-subtitle-text-transform);
2487
- }
2488
- .rls-confirmation__body {
2489
- position: relative;
2490
- width: 100%;
2491
- padding: 0rem var(--rls-sizing-x8);
2492
- box-sizing: border-box;
2493
- }
2494
- .rls-confirmation__content {
2495
- display: flex;
2496
- flex-direction: column;
2497
- row-gap: var(--rls-sizing-x8);
2498
- }
2499
- .rls-confirmation__content > p {
2500
- font-weight: var(--rls-font-weight-medium);
2501
- font-size: var(--pvt-content-font-size);
2502
- line-height: var(--pvt-content-line-height);
2503
- letter-spacing: var(--pvt-content-letter-spacing);
2504
- text-align: center;
2505
- color: var(--rls-app-color-600);
2506
- }
2507
- .rls-confirmation__footer {
2508
- position: relative;
2509
- width: 100%;
2510
- padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem var(--rls-sizing-x12);
2511
- box-sizing: border-box;
2512
- }
2513
- .rls-confirmation__actions {
2514
- --rlc-button-width: 100%;
2515
- position: relative;
2516
- display: flex;
2517
- width: 100%;
2518
- flex-direction: row-reverse;
2519
- justify-content: center;
2520
- column-gap: var(--rls-sizing-x8);
2521
- }
2522
- .rls-confirmation__backdrop {
2523
- position: absolute;
2524
- display: block;
2525
- top: 0px;
2526
- left: 0px;
2527
- right: 0px;
2528
- bottom: var(--pvt-backdrop-bottom);
2529
- opacity: var(--pvt-backdrop-opacity);
2530
- z-index: var(--rls-z-index-2);
2531
- background: var(--rls-theme-backdrop-900);
2532
- backdrop-filter: blur(2px);
2533
- transition:
2534
- opacity 120ms 0ms var(--rls-deceleration-curve),
2535
- bottom 120ms 0ms var(--rls-deceleration-curve);
2536
- }
2537
- @media screen and (max-width: 480px) {
2538
- .rls-confirmation {
2539
- --pvt-title-font-size: var(--rls-title-font-size);
2540
- --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
2541
- --pvt-title-line-height: var(--rls-title-line-height);
2542
- --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
2543
- --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
2544
- --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
2545
- --pvt-content-font-size: var(--rls-paragraph-font-size);
2546
- }
2547
- .rls-confirmation__header {
2548
- row-gap: var(--rls-sizing-x2);
2549
- }
2550
- .rls-confirmation__actions {
2551
- flex-direction: column-reverse;
2552
- column-gap: 0rem;
2553
- row-gap: var(--rls-sizing-x4);
2554
- }
2555
- } /*# sourceMappingURL=Confirmation.css.map */
2556
-
2557
- .rls-dropdown {
2558
- --pvt-content-opacity: 0;
2559
- --pvt-content-transform: scale(0, 0);
2560
- position: var(--rlc-dropdown-position, absolute);
2561
- display: block;
2562
- opacity: 0;
2563
- width: auto;
2564
- z-index: -16;
2565
- transition: opacity 240ms 0ms var(--rls-standard-curve);
2566
- }
2567
- .rls-dropdown--visible {
2568
- --pvt-content-opacity: 1;
2569
- --pvt-content-transform: scale(1, 1);
2570
- opacity: 1;
2571
- z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
2572
- }
2573
- .rls-dropdown__content {
2574
- display: block;
2575
- width: auto;
2576
- max-width: var(--rlc-dropdown-max-width, 150rem);
2577
- border-radius: var(--rlc-dropdown-radius, var(--rls-sizing-x6));
2578
- padding: var(--rlc-dropdown-padding, var(--rls-sizing-x6));
2579
- box-sizing: border-box;
2580
- border: var(--rlc-dropdown-border, var(--rls-app-border-1-200));
2581
- background: var(--rlc-dropdown-background, var(--rls-app-color-050));
2582
- opacity: var(--pvt-content-opacity);
2583
- transform: var(--pvt-content-transform);
2584
- transition:
2585
- transform 240ms 0ms var(--rls-standard-curve),
2586
- opacity 240ms 0ms var(--rls-standard-curve);
2587
- } /*# sourceMappingURL=Dropdown.css.map */
2588
-
2589
- .rls-field-autocomplete {
2590
- --pvt-control-width: 100%;
2591
- --pvt-control-opacity: 1;
2592
- }
2593
- .rls-field-autocomplete.rls-field-box--selected {
2594
- --pvt-control-width: calc(100% - var(--pvt-action-dimension));
2595
- }
2596
- .rls-field-autocomplete.rls-field-box--disabled {
2597
- --pvt-control-opacity: 0.5;
2598
- }
2599
- .rls-field-autocomplete .rls-field-list__ul__search {
2600
- display: flex;
2601
- align-items: center;
2602
- width: 100%;
2603
- margin-top: var(--rls-sizing-x2);
2604
- margin-bottom: var(--rls-sizing-x6);
2605
- background: var(--rls-app-color-100);
2606
- border-radius: var(--rls-sizing-x4);
2607
- padding: var(--rls-sizing-x4);
2608
- box-sizing: border-box;
2609
- }
2610
- .rls-field-autocomplete .rls-field-list__ul__search button {
2611
- color: var(--rls-app-color-600);
2612
- background: rgba(0, 0, 0, 0);
2613
- }
2614
- .rls-field-autocomplete
2615
- .rls-field-list__ul__search
2616
- button:not(:disabled):hover {
2617
- color: var(--rls-theme-color-300);
2618
- }
2619
- .rls-field-autocomplete .rls-field-list__ul__search button:disabled {
2620
- opacity: 0.5;
2621
- }
2622
- .rls-field-autocomplete .rls-field-list__ul__control {
2623
- width: 100%;
2624
- height: var(--rls-sizing-x12);
2625
- line-height: var(--rls-sizing-x12);
2626
- padding: 0rem;
2627
- cursor: text;
2628
- border: none;
2629
- outline: none;
2630
- background: rgba(0, 0, 0, 0);
2631
- color: var(--rls-app-color-900);
2632
- font-size: var(--rls-input-font-size);
2633
- font-weight: var(--rls-font-weight-medium);
2634
- letter-spacing: var(--rls-input-letter-spacing);
2635
- }
2636
- .rls-field-autocomplete .rls-field-list__ul__control::placeholder {
2637
- color: var(--rls-app-color-400);
2638
- }
2639
- .rls-field-autocomplete .rls-field-list__ul__control::selection {
2640
- background: var(--rls-theme-color-700);
2641
- color: var(--rls-app-color-050);
2642
- }
2643
- .rls-field-autocomplete .rls-field-list__ul__control:disabled {
2644
- opacity: 0.5;
2645
- pointer-events: none;
2646
- }
2647
- .rls-field-autocomplete .rls-field-list__ul .rls-progress-bar {
2648
- margin-bottom: var(--rls-sizing-x8);
2649
- } /*# sourceMappingURL=FieldAutocomplete.css.map */
2650
-
2651
- .rls-modal {
2652
- --pvt-component-transform: translateY(150px) scale(0.6);
2653
- --pvt-component-height: 0rem;
2654
- --pvt-component-opacity: 0;
2655
- --pvt-component-visibility: hidden;
2656
- --pvt-component-transition: 160ms;
2657
- --pvt-backdrop-opacity: 0;
2658
- --pvt-backdrop-bottom: initial;
2659
- position: fixed;
2660
- display: flex;
2661
- top: 0rem;
2662
- left: 0rem;
2663
- width: 100%;
2664
- height: 100%;
2665
- z-index: var(--rls-z-index-24);
2666
- visibility: hidden;
2667
- align-items: center;
2668
- justify-content: center;
2669
- }
2670
- .rls-modal--visible {
2671
- --pvt-component-visibility: visible;
2672
- --pvt-component-height: auto;
2673
- --pvt-component-opacity: 1;
2674
- --pvt-component-transform: translateY(0) scale(1);
2675
- --pvt-backdrop-bottom: 0rem;
2676
- --pvt-backdrop-opacity: 1;
2677
- visibility: visible;
2678
- }
2679
- .rls-modal__component {
2680
- position: absolute;
2681
- display: flex;
2682
- max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
2683
- height: var(--pvt-component-height);
2684
- max-height: calc(100% - var(--rls-sizing-x12));
2685
- flex-direction: column;
2686
- opacity: var(--pvt-component-opacity);
2687
- visibility: var(--pvt-component-visibility);
2688
- z-index: var(--rls-z-index-2);
2689
- border-radius: var(--rls-sizing-x4);
2690
- background: var(--rlc-modal-background, var(--rls-app-color-050));
2691
- transform: var(--pvt-component-transform);
2692
- transition:
2693
- opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2694
- transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2695
- visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2696
- }
2697
- .rls-modal__backdrop {
2698
- position: absolute;
2699
- display: block;
2700
- top: 0rem;
2701
- left: 0rem;
2702
- right: 0rem;
2703
- bottom: var(--pvt-backdrop-bottom);
2704
- opacity: var(--pvt-backdrop-opacity);
2705
- z-index: 1;
2706
- background: var(--rls-theme-backdrop-900);
2707
- backdrop-filter: blur(2px);
2708
- transition:
2709
- opacity 120ms 0ms var(--rls-deceleration-curve),
2710
- bottom 120ms 0ms var(--rls-deceleration-curve);
2711
- } /*# sourceMappingURL=Modal.css.map */
2712
-
2713
- .rls-picker-clock {
2714
- position: relative;
2715
- display: flex;
2716
- width: 150rem;
2717
- flex-direction: column;
2718
- row-gap: var(--rls-sizing-x8);
2719
- overflow: hidden;
2720
- user-select: none;
2721
- padding: var(--rlc-picker-clock-padding, 0rem);
2722
- box-sizing: border-box;
2723
- border-radius: var(--rlc-picker-clock-radius, 0rem);
2724
- background: var(--rlc-picker-clock-background, transparent);
2725
- }
2726
- .rls-picker-clock__header {
2727
- display: flex;
2728
- column-gap: var(--rls-sizing-x8);
2729
- padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
2730
- box-sizing: border-box;
2731
- justify-content: center;
2732
- }
2733
- .rls-picker-clock__title {
2734
- display: flex;
2735
- width: auto;
2736
- column-gap: var(--rls-sizing-x2);
2737
- align-items: center;
2738
- }
2739
- .rls-picker-clock__title__value {
2740
- width: 16rem;
2741
- text-align: center;
2742
- font-size: var(--rls-heading4-font-size);
2743
- font-weight: var(--rls-font-weight-semibold);
2744
- color: var(--rls-app-color-600);
2745
- }
2746
- .rls-picker-clock__title__value--active {
2747
- color: var(--rls-theme-color-500);
2748
- }
2749
- .rls-picker-clock__title__value:hover {
2750
- color: var(--rls-app-color-900);
2751
- }
2752
- .rls-picker-clock__title__separator {
2753
- font-size: var(--rls-title-font-size);
2754
- font-weight: var(--rls-font-weight-semibold);
2755
- }
2756
- .rls-picker-clock__zone {
2757
- display: flex;
2758
- width: auto;
2759
- column-gap: var(--rls-sizing-x4);
2760
- align-items: center;
2761
- }
2762
- .rls-picker-clock__zone__value {
2763
- width: 18rem;
2764
- text-align: center;
2765
- padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
2766
- border-radius: var(--rls-sizing-x2);
2767
- font-size: var(--rls-body-font-size);
2768
- font-weight: var(--rls-font-weight-semibold);
2769
- background: var(--rls-app-color-200);
2770
- }
2771
- .rls-picker-clock__zone__value--active {
2772
- background: var(--rls-theme-gradient-500);
2773
- color: var(--rls-theme-color-050);
2774
- }
2775
- .rls-picker-clock__body {
2776
- display: flex;
2777
- justify-content: center;
2778
- }
2779
- .rls-picker-clock__plate {
2780
- width: 120rem;
2781
- height: 120rem;
2782
- border-radius: 50%;
2783
- border: var(--rls-app-border-2-200);
2784
- box-sizing: border-box;
2785
- overflow: hidden;
2786
- }
2787
- .rls-picker-clock__canvas {
2788
- position: absolute;
2789
- }
2790
- .rls-picker-clock__canvas__line {
2791
- stroke: var(--rls-theme-color-500);
2792
- stroke-width: var(--rls-sizing-x1);
2793
- }
2794
- .rls-picker-clock__canvas__center {
2795
- fill: var(--rls-theme-color-500);
2796
- }
2797
- .rls-picker-clock__canvas__indicator {
2798
- fill: var(--rls-theme-color-300);
2799
- }
2800
- .rls-picker-clock__canvas__point {
2801
- fill: var(--rls-theme-color-050);
2802
- }
2803
- .rls-picker-clock__tick {
2804
- position: absolute;
2805
- width: var(--rls-sizing-x14);
2806
- height: var(--rls-sizing-x14);
2807
- line-height: var(--rls-sizing-x14);
2808
- text-align: center;
2809
- cursor: pointer;
2810
- font-size: var(--rls-paragraph-font-size);
2811
- font-weight: var(--rls-font-weight-semibold);
2812
- }
2813
- .rls-picker-clock__footer {
2814
- --rlc-button-width: 100%;
2815
- display: flex;
2816
- column-gap: var(--rls-sizing-x6);
2817
- align-items: center;
2818
- padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
2819
- var(--rls-sizing-x8);
2820
- overflow: hidden;
2821
- box-sizing: border-box;
2822
- }
2823
- .rls-picker-clock__footer--today {
2824
- display: flex;
2825
- width: var(--rls-sizing-x16);
2826
- align-items: center;
2827
- justify-content: center;
2828
- } /*# sourceMappingURL=PickerClock.css.map */
2829
-
2830
- .rls-field-clock {
2831
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2832
- --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
2833
- --pvt-letter-spacing: var(
2834
- --rlc-field-clock-letter-spacing,
2835
- var(--rls-input-letter-spacing)
2836
- );
2837
- --pvt-action-dimension: var(
2838
- --rlc-field-box-action-dimension,
2839
- var(--rls-sizing-x12)
2840
- );
2841
- --pvt-action-background: var(
2842
- --rlc-field-box-action-background,
2843
- var(--rls-app-color-200)
2844
- );
2845
- --pvt-control-width: calc(100% - var(--pvt-action-dimension));
2846
- position: relative;
2847
- width: 100%;
2848
- box-sizing: border-box;
2849
- }
2850
- .rls-field-clock .rls-field-box--readonly {
2851
- --pvt-control-width: 100%;
2852
- }
2853
- .rls-field-clock .rls-field-box__body {
2854
- column-gap: var(--rls-sizing-x2);
2855
- }
2856
- .rls-field-clock__control {
2857
- position: relative;
2858
- width: var(--pvt-control-width);
2859
- height: var(--rls-sizing-x12);
2860
- line-height: var(--rls-sizing-x12);
2861
- padding: 0rem;
2862
- cursor: default;
2863
- border: none;
2864
- outline: none;
2865
- background: rgba(0, 0, 0, 0);
2866
- color: var(--rls-app-color-900);
2867
- font-weight: var(--rls-font-weight-medium);
2868
- font-size: var(--pvt-font-size);
2869
- letter-spacing: var(--pvt-letter-spacing);
2870
- }
2871
- .rls-field-clock__control::placeholder {
2872
- color: var(--rls-app-color-400);
2873
- }
2874
- .rls-field-clock__control:disabled {
2875
- opacity: 0.5;
2876
- cursor: not-allowed;
2877
- }
2878
- .rls-field-clock__action {
2879
- --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
2880
- width: var(--pvt-action-dimension);
2881
- height: var(--pvt-action-dimension);
2882
- color: var(--rls-app-color-600);
2883
- padding: 0rem;
2884
- outline: none;
2885
- border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
2886
- background: var(--pvt-action-background);
2887
- }
2888
- .rls-field-clock__action:disabled {
2889
- opacity: 0.5;
2890
- background: rgba(0, 0, 0, 0);
2891
- }
2892
- .rls-field-clock__action .rls-icon {
2893
- margin: 1rem;
2894
- }
2895
- .rls-field-clock-modal {
2896
- --rlc-modal-background: transparent;
2897
- --rlc-modal-max-width: 150rem;
2898
- --rlc-picker-clock-radius: var(--rls-sizing-x4);
2899
- --rlc-picker-clock-background: var(--rls-app-color-050);
2900
- --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
2901
- } /*# sourceMappingURL=FieldClock.css.map */
2902
-
2903
- .rls-picker-date {
2904
- position: relative;
2905
- display: flex;
2906
- width: 150rem;
2907
- flex-direction: column;
2908
- row-gap: var(--rls-sizing-x4);
2909
- overflow: hidden;
2910
- user-select: none;
2911
- border-radius: var(--rlc-picker-date-radius, 0rem);
2912
- background: var(--rlc-picker-date-background, transparent);
2913
- }
2914
- .rls-picker-date__header {
2915
- --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
2916
- --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
2917
- --rlc-picker-selector-title-background: var(--rls-app-color-200);
2918
- display: flex;
2919
- flex-direction: column;
2920
- row-gap: var(--rls-sizing-x4);
2921
- padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
2922
- box-sizing: border-box;
2923
- }
2924
- .rls-picker-date__title {
2925
- height: var(--rls-sizing-x14);
2926
- line-height: var(--rls-sizing-x14);
2927
- color: var(--rls-app-color-700);
2928
- text-align: center;
2929
- cursor: default;
2930
- font-weight: var(--rls-font-weight-bold);
2931
- font-size: var(--rls-paragraph-font-size);
2932
- }
2933
- .rls-picker-date__title:hover {
2934
- color: var(--rls-theme-color-500);
2935
- }
2936
- .rls-picker-date__component {
2937
- --rlc-picker-day-display: none;
2938
- --rlc-picker-month-display: none;
2939
- --rlc-picker-year-display: none;
2940
- display: flex;
2941
- justify-content: center;
2942
- }
2943
- .rls-picker-date__component--day {
2944
- --rlc-picker-day-display: flex;
2945
- }
2946
- .rls-picker-date__component--month {
2947
- --rlc-picker-month-display: grid;
2948
- }
2949
- .rls-picker-date__component--year {
2950
- --rlc-picker-year-display: block;
2951
- }
2952
- .rls-picker-date__actions {
2953
- --rlc-button-width: 100%;
2954
- display: flex;
2955
- column-gap: var(--rls-sizing-x6);
2956
- align-items: center;
2957
- padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
2958
- var(--rls-sizing-x8);
2959
- overflow: hidden;
2960
- box-sizing: border-box;
2961
- }
2962
- .rls-picker-date__actions--today {
2963
- display: flex;
2964
- width: var(--rls-sizing-x16);
2965
- align-items: center;
2966
- justify-content: center;
2967
- } /*# sourceMappingURL=PickerDate.css.map */
2968
-
2969
- .rls-field-date {
2970
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2971
- --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
2972
- --pvt-letter-spacing: var(
2973
- --rlc-field-date-letter-spacing,
2974
- var(--rls-input-letter-spacing)
2975
- );
2976
- --pvt-action-dimension: var(
2977
- --rlc-field-box-action-dimension,
2978
- var(--rls-sizing-x12)
2979
- );
2980
- --pvt-action-background: var(
2981
- --rlc-field-box-action-background,
2982
- var(--rls-app-color-200)
2983
- );
2984
- --pvt-control-width: calc(100% - var(--pvt-action-dimension));
2985
- position: relative;
2986
- width: 100%;
2987
- box-sizing: border-box;
2988
- }
2989
- .rls-field-date .rls-field-box--readonly {
2990
- --pvt-control-width: 100%;
2991
- }
2992
- .rls-field-date .rls-field-box__body {
2993
- column-gap: var(--rls-sizing-x2);
2994
- }
2995
- .rls-field-date__control {
2996
- position: relative;
2997
- width: var(--pvt-control-width);
2998
- height: var(--rls-sizing-x12);
2999
- line-height: var(--rls-sizing-x12);
3000
- padding: 0rem;
3001
- cursor: default;
3002
- border: none;
3003
- outline: none;
3004
- background: rgba(0, 0, 0, 0);
3005
- color: var(--rls-app-color-900);
3006
- font-weight: var(--rls-font-weight-medium);
3007
- font-size: var(--pvt-font-size);
3008
- letter-spacing: var(--pvt-letter-spacing);
3009
- }
3010
- .rls-field-date__control::placeholder {
3011
- color: var(--rls-app-color-400);
3012
- }
3013
- .rls-field-date__control:disabled {
3014
- opacity: 0.5;
3015
- cursor: not-allowed;
3016
- }
3017
- .rls-field-date__action {
3018
- --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
3019
- width: var(--pvt-action-dimension);
3020
- height: var(--pvt-action-dimension);
3021
- color: var(--rls-app-color-600);
3022
- padding: 0rem;
3023
- outline: none;
3024
- border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
3025
- background: var(--pvt-action-background);
3026
- }
3027
- .rls-field-date__action:disabled {
3028
- opacity: 0.5;
3029
- background: rgba(0, 0, 0, 0);
3030
- }
3031
- .rls-field-date__action .rls-icon {
3032
- margin: 1rem;
3033
- }
3034
- .rls-field-date-modal {
3035
- --rlc-modal-background: transparent;
3036
- --rlc-modal-max-width: 150rem;
3037
- --rlc-picker-date-radius: var(--rls-sizing-x4);
3038
- --rlc-picker-date-background: var(--rls-app-color-050);
3039
- } /*# sourceMappingURL=FieldDate.css.map */
3040
-
3041
- .rls-picker-date-range {
3042
- position: relative;
3043
- display: flex;
3044
- flex-direction: column;
3045
- width: 150rem;
3046
- row-gap: var(--rls-sizing-x4);
3047
- overflow: hidden;
3048
- border-radius: var(--rlc-picker-date-range-radius, 0rem);
3049
- background: var(--rlc-picker-date-range-background, transparent);
3050
- }
3051
- .rls-picker-date-range__header {
3052
- --rlc-picker-selector-title-padding: var(--rls-sizing-x4);
3053
- --rlc-picker-selector-title-radius: var(--rls-sizing-x4);
3054
- --rlc-picker-selector-title-background: var(--rls-app-color-200);
3055
- display: flex;
3056
- flex-direction: column;
3057
- row-gap: var(--rls-sizing-x4);
3058
- padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
3059
- box-sizing: border-box;
3060
- }
3061
- .rls-picker-date-range__title {
3062
- height: var(--rls-sizing-x14);
3063
- line-height: var(--rls-sizing-x14);
3064
- color: var(--rls-app-color-700);
3065
- text-align: center;
3066
- cursor: default;
3067
- font-weight: var(--rls-font-weight-bold);
3068
- font-size: var(--rls-paragraph-font-size);
3069
- }
3070
- .rls-picker-date-range__title:hover {
3071
- color: var(--rls-theme-color-500);
3072
- }
3073
- .rls-picker-date-range__component {
3074
- --rlc-picker-day-range-display: none;
3075
- --rlc-picker-month-display: none;
3076
- --rlc-picker-year-display: none;
3077
- display: flex;
3078
- justify-content: center;
3079
- width: 150rem;
3080
- padding: 0rem var(--rls-sizing-x2);
3081
- box-sizing: border-box;
3082
- }
3083
- .rls-picker-date-range__component--day {
3084
- --rlc-picker-day-range-display: flex;
3085
- }
3086
- .rls-picker-date-range__component--month {
3087
- --rlc-picker-month-display: grid;
3088
- }
3089
- .rls-picker-date-range__component--year {
3090
- --rlc-picker-year-display: block;
3091
- }
3092
- .rls-picker-date-range__footer--hidden {
3093
- display: none;
3094
- }
3095
- .rls-picker-date-range__actions {
3096
- --rlc-button-width: 100%;
3097
- display: flex;
3098
- column-gap: var(--rls-sizing-x4);
3099
- padding: var(--rls-sizing-x6) var(--rls-sizing-x8);
3100
- overflow: hidden;
3101
- box-sizing: border-box;
3102
- } /*# sourceMappingURL=PickerDateRange.css.map */
3103
-
3104
- .rls-field-date-range {
3105
- --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
3106
- --pvt-font-size: var(
3107
- --rlc-field-date-range-font-size,
3108
- var(--rls-input-font-size)
3109
- );
3110
- --pvt-letter-spacing: var(
3111
- --rlc-field-date-range-letter-spacing,
3112
- var(--rls-input-letter-spacing)
3113
- );
3114
- --pvt-action-dimension: var(
3115
- --rlc-field-box-action-dimension,
3116
- var(--rls-sizing-x12)
3117
- );
3118
- --pvt-action-background: var(
3119
- --rlc-field-box-action-background,
3120
- var(--rls-app-color-200)
3121
- );
3122
- --pvt-control-width: calc(100% - var(--pvt-action-dimension));
3123
- position: relative;
3124
- width: 100%;
3125
- box-sizing: border-box;
3126
- }
3127
- .rls-field-date-range .rls-field-box--readonly {
3128
- --pvt-control-width: 100%;
3129
- }
3130
- .rls-field-date-range__control {
3131
- position: relative;
3132
- width: var(--pvt-control-width);
3133
- height: var(--rls-sizing-x12);
3134
- line-height: var(--rls-sizing-x12);
3135
- padding: 0rem;
3136
- cursor: default;
3137
- border: none;
3138
- outline: none;
3139
- background: rgba(0, 0, 0, 0);
3140
- color: var(--rls-app-color-900);
3141
- font-weight: var(--rls-font-weight-medium);
3142
- font-size: var(--pvt-font-size);
3143
- letter-spacing: var(--pvt-letter-spacing);
3144
- }
3145
- .rls-field-date-range__control::placeholder {
3146
- color: var(--rls-app-color-400);
3147
- }
3148
- .rls-field-date-range__control:disabled {
3149
- opacity: 0.5;
3150
- cursor: not-allowed;
3151
- }
3152
- .rls-field-date-range__action {
3153
- --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
3154
- width: var(--pvt-action-dimension);
3155
- height: var(--pvt-action-dimension);
3156
- color: var(--rls-app-color-600);
3157
- padding: 0rem;
3158
- outline: none;
3159
- border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
3160
- background: var(--pvt-action-background);
3161
- }
3162
- .rls-field-date-range__action:disabled {
3163
- opacity: 0.5;
3164
- background: rgba(0, 0, 0, 0);
3165
- }
3166
- .rls-field-date-range__action .rls-icon {
3167
- margin: 1rem;
3168
- }
3169
- .rls-field-date-range-modal {
3170
- --rlc-modal-background: transparent;
3171
- --rlc-modal-max-width: 150rem;
3172
- --rlc-picker-date-range-radius: var(--rls-sizing-x4);
3173
- --rlc-picker-date-range-background: var(--rls-app-color-050);
3174
- } /*# sourceMappingURL=FieldDateRange.css.map */
3175
-
3176
- .rls-field-select {
3177
- --rlc-field-list-control-cursor: pointer;
3178
- }
3179
- .rls-field-select .rls-field-list__action {
3180
- transition: transform 160ms 0ms var(--rls-sharp-curve);
3181
- }
3182
- .rls-field-select .rls-field-list__action--visible {
3183
- transform: rotate(180deg);
3184
- } /*# sourceMappingURL=FieldSelect.css.map */
3185
-
3186
- .rls-form-navigation {
3187
- --rlc-field-box-body-background: var(
3188
- --rlc-form-navigation-field-box-background,
3189
- var(--rls-app-color-050)
3190
- );
3191
- --pvt-component-transition: 160ms;
3192
- position: fixed;
3193
- display: flex;
3194
- top: 0rem;
3195
- right: 0rem;
3196
- width: calc(100% - var(--rls-sizing-x16));
3197
- max-width: var(--rlc-form-navigation-max-width, 160rem);
3198
- height: 100%;
3199
- justify-content: flex-end;
3200
- visibility: hidden;
3201
- transform: translateX(100%);
3202
- transition:
3203
- opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3204
- transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3205
- visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
3206
- z-index: var(--rls-z-index-16);
3207
- }
3208
- .rls-form-navigation--visible {
3209
- visibility: visible;
3210
- transform: translateX(0%);
3211
- }
3212
- .rls-form-navigation__component {
3213
- position: absolute;
3214
- display: flex;
3215
- width: 100%;
3216
- height: 100%;
3217
- flex-direction: column;
3218
- background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
3219
- border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
3220
- } /*# sourceMappingURL=FormNavigation.css.map */
3221
-
3222
- .rls-image-editor {
3223
- --pvt-overlay-background: var(--rls-theme-backdrop-900);
3224
- --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
3225
- --pvt-actions-direction: row;
3226
- --pvt-actions-row-gap: 0rem;
3227
- --pvt-actions-column-gap: var(--rls-sizing-x8);
3228
- position: relative;
3229
- display: flex;
3230
- height: 100%;
3231
- flex-direction: column;
3232
- row-gap: var(--rls-sizing-x12);
3233
- }
3234
- .rls-image-editor__body {
3235
- position: relative;
3236
- display: flex;
3237
- height: 100%;
3238
- justify-content: center;
3239
- background: var(--rls-app-color-900);
3240
- }
3241
- .rls-image-editor__body__image {
3242
- overflow: hidden;
3243
- }
3244
- .rls-image-editor__body__selection {
3245
- position: absolute;
3246
- cursor: move;
3247
- box-sizing: border-box;
3248
- z-index: var(--rls-z-index-4);
3249
- border: var(
3250
- --rlc-image-editor-selection-border,
3251
- 2px dashed var(--rls-app-color-050)
3252
- );
3253
- user-select: none;
3254
- }
3255
- .rls-image-editor__body__overlay--top {
3256
- position: absolute;
3257
- top: 0rem;
3258
- z-index: var(--rls-z-index-2);
3259
- background: var(--pvt-overlay-background);
3260
- }
3261
- .rls-image-editor__body__overlay--right {
3262
- position: absolute;
3263
- right: 0rem;
3264
- height: 100%;
3265
- z-index: var(--rls-z-index-2);
3266
- background: var(--pvt-overlay-background);
3267
- }
3268
- .rls-image-editor__body__overlay--bottom {
3269
- position: absolute;
3270
- bottom: 0rem;
3271
- z-index: var(--rls-z-index-2);
3272
- background: var(--pvt-overlay-background);
3273
- }
3274
- .rls-image-editor__body__overlay--left {
3275
- position: absolute;
3276
- right: 0rem;
3277
- height: 100%;
3278
- z-index: var(--rls-z-index-2);
3279
- background: var(--pvt-overlay-background);
3280
- }
3281
- .rls-image-editor__footer {
3282
- display: flex;
3283
- flex-direction: column;
3284
- row-gap: var(--rls-sizing-x12);
3285
- padding: var(--rlc-image-editor-footer-padding, 0rem);
3286
- box-sizing: border-box;
3287
- }
3288
- .rls-image-editor__sliders {
3289
- display: flex;
3290
- flex-direction: column;
3291
- row-gap: var(--rls-sizing-x6);
3292
- padding: var(--pvt-sliders-padding);
3293
- box-sizing: border-box;
3294
- }
3295
- .rls-image-editor__actions {
3296
- display: flex;
3297
- flex-direction: var(--pvt-actions-direction);
3298
- justify-content: center;
3299
- row-gap: var(--pvt-actions-row-gap);
3300
- column-gap: var(--pvt-actions-column-gap);
3301
- }
3302
- .rls-image-editor > canvas {
3303
- position: absolute;
3304
- top: 0rem;
3305
- left: 0rem;
3306
- z-index: -1;
3307
- visibility: hidden;
3308
- pointer-events: none;
3309
- }
3310
- @media only screen and (max-width: 420px) {
3311
- .rls-image-editor {
3312
- --pvt-sliders-padding: 0rem;
3313
- --pvt-actions-direction: column;
3314
- --pvt-actions-row-gap: var(--rls-sizing-x6);
3315
- --pvt-actions-column-gap: 0rem;
3316
- row-gap: var(--rls-sizing-x8);
3317
- }
3318
- } /*# sourceMappingURL=ImageEditor.css.map */
3319
-
3320
- .rls-image-editor-modal {
3321
- --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
3322
- var(--rls-sizing-x12) var(--rls-sizing-x12);
3323
- --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
3324
- width: 100%;
3325
- }
3326
- @media only screen and (max-width: 480px) {
3327
- .rls-image-editor-modal {
3328
- --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
3329
- var(--rls-sizing-x8) var(--rls-sizing-x8);
3330
- --rlc-modal-max-width: 160rem;
3331
- }
3332
- } /*# sourceMappingURL=ImageEditorModal.css.map */
3333
-
3334
- .rls-image-chooser {
3335
- position: relative;
3336
- width: var(--rlc-image-chooser-width, 48rem);
3337
- height: var(--rlc-image-chooser-height, 48rem);
3338
- border-radius: var(--rlc-image-chooser-radius, 50%);
3339
- overflow: hidden;
3340
- }
3341
- .rls-image-chooser__avatar {
3342
- display: flex;
3343
- width: 100%;
3344
- height: 100%;
3345
- justify-content: center;
3346
- align-items: center;
3347
- background: var(--rls-theme-color-600);
3348
- }
3349
- .rls-image-chooser__avatar img {
3350
- width: 100%;
3351
- }
3352
- .rls-image-chooser > input[type='file'] {
3353
- position: absolute;
3354
- z-index: -1;
3355
- visibility: hidden;
3356
- }
3357
- .rls-image-chooser__modal {
3358
- --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
3359
- var(--rls-sizing-x12) var(--rls-sizing-x12);
3360
- --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
3361
- width: 100%;
3362
- }
3363
- @media only screen and (max-width: 480px) {
3364
- .rls-image-chooser__modal {
3365
- --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
3366
- var(--rls-sizing-x8) var(--rls-sizing-x8);
3367
- --rlc-modal-max-width: 160rem;
3368
- }
3369
- } /*# sourceMappingURL=ImageChooser.css.map */
3370
-
3371
- .rls-modal-sheet {
3372
- --pvt-component-transform: translateY(150px) scale(0.6);
3373
- --pvt-component-bottom: initial;
3374
- --pvt-component-max-width: var(
3375
- --rlc-modal-sheet-max-width,
3376
- calc(100% - var(--rls-sizing-x8))
3377
- );
3378
- --pvt-component-height: 0rem;
3379
- --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
3380
- --pvt-component-border-radius: var(
3381
- --rlc-modal-sheet-border-radius,
3382
- var(--rls-sizing-x4)
3383
- );
3384
- --pvt-component-opacity: 0;
3385
- --pvt-component-visibility: hidden;
3386
- --pvt-component-transition: 160ms;
3387
- --pvt-backdrop-opacity: 0;
3388
- --pvt-backdrop-bottom: initial;
3389
- position: fixed;
3390
- display: flex;
3391
- top: 0rem;
3392
- left: 0rem;
3393
- width: 100%;
3394
- height: 100%;
3395
- z-index: var(--rls-z-index-24);
3396
- visibility: hidden;
3397
- align-items: center;
3398
- justify-content: center;
3399
- }
3400
- .rls-modal-sheet--visible {
3401
- --pvt-component-visibility: visible;
3402
- --pvt-component-height: auto;
3403
- --pvt-component-opacity: 1;
3404
- --pvt-component-transform: translateY(0) scale(1);
3405
- --pvt-backdrop-bottom: 0rem;
3406
- --pvt-backdrop-opacity: 1;
3407
- visibility: visible;
3408
- }
3409
- .rls-modal-sheet__component {
3410
- position: absolute;
3411
- display: flex;
3412
- bottom: var(--pvt-component-bottom);
3413
- max-width: var(--pvt-component-max-width);
3414
- height: var(--pvt-component-height);
3415
- max-height: var(--pvt-component-max-height);
3416
- flex-direction: column;
3417
- opacity: var(--pvt-component-opacity);
3418
- visibility: var(--pvt-component-visibility);
3419
- z-index: var(--rls-z-index-2);
3420
- border-radius: var(--pvt-component-border-radius);
3421
- background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
3422
- transform: var(--pvt-component-transform);
3423
- transition:
3424
- opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3425
- transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3426
- visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
3427
- }
3428
- .rls-modal-sheet__backdrop {
3429
- position: absolute;
3430
- display: block;
3431
- top: 0rem;
3432
- left: 0rem;
3433
- right: 0rem;
3434
- bottom: var(--pvt-backdrop-bottom);
3435
- opacity: var(--pvt-backdrop-opacity);
3436
- z-index: 1;
3437
- background: var(--rls-theme-backdrop-900);
3438
- backdrop-filter: blur(2px);
3439
- transition:
3440
- opacity 120ms 0ms var(--rls-deceleration-curve),
3441
- bottom 120ms 0ms var(--rls-deceleration-curve);
3442
- }
3443
- @media screen and (max-width: 640px) {
3444
- .rls-modal-sheet {
3445
- --pvt-component-transform: translateY(100%);
3446
- --pvt-component-bottom: 0px;
3447
- --pvt-component-max-width: 240rem;
3448
- --pvt-component-max-height: 75%;
3449
- --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
3450
- 0rem 0rem;
3451
- --pvt-component-transition: 320ms;
3452
- align-items: initial;
3453
- }
3454
- .rls-modal-sheet--visible {
3455
- --pvt-component-transform: translateY(0);
3456
- }
3457
- .rls-modal-sheet__component::before {
3458
- display: block;
3459
- content: '';
3460
- width: var(--rls-sizing-x24);
3461
- height: var(--rls-sizing-x2);
3462
- border-radius: var(--rls-sizing-x2);
3463
- background: var(--rls-app-color-300);
3464
- margin: var(--rls-sizing-x3) auto;
3465
- }
3466
- }
3467
- @media screen and (max-width: 640px) and (max-height: 960px) {
3468
- .rls-modal-sheet {
3469
- --pvt-component-max-height: calc(100% - 32rem);
3470
- }
3471
- }
3472
- @media screen and (max-width: 640px) and (max-height: 720px) {
3473
- .rls-modal-sheet {
3474
- --pvt-component-max-height: calc(100% - 24rem);
3475
- }
3476
- }
3477
- @media screen and (max-width: 640px) and (max-height: 560px) {
3478
- .rls-modal-sheet {
3479
- --pvt-component-max-height: calc(100% - 16rem);
3480
- }
3481
- } /*# sourceMappingURL=ModalSheet.css.map */
3482
-
3483
- .rls-snackbar {
3484
- position: fixed;
3485
- display: flex;
3486
- left: var(--rlc-snackbar-left, 50%);
3487
- width: auto;
3488
- max-width: 240rem;
3489
- height: auto;
3490
- bottom: 0rem;
3491
- column-gap: var(--rls-sizing-x6);
3492
- padding: var(--rls-sizing-x6);
3493
- box-sizing: border-box;
3494
- border-radius: var(--rls-sizing-x6);
3495
- background: var(--rls-app-color-050);
3496
- border-left: var(--rls-theme-border-4-400);
3497
- transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
3498
- transition: all 160ms 0ms var(--rls-standard-curve);
3499
- box-shadow: var(--rls-app-shadow-center-8);
3500
- z-index: var(--rls-z-index-32);
3501
- }
3502
- .rls-snackbar--visible {
3503
- transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
3504
- }
3505
- .rls-snackbar__avatar {
3506
- --rlc-icon-color: var(--rls-theme-color-050);
3507
- display: flex;
3508
- justify-content: center;
3509
- align-items: center;
3510
- overflow: hidden;
3511
- background: var(--rls-theme-color-500);
3512
- width: var(--rls-sizing-x18);
3513
- height: var(--rls-sizing-x18);
3514
- border-radius: var(--rls-sizing-x4);
3515
- }
3516
- .rls-snackbar__avatar + .rls-snackbar__component {
3517
- width: calc(100% - var(--rls-sizing-x18));
3518
- }
3519
- .rls-snackbar__component {
3520
- display: flex;
3521
- flex-direction: column;
3522
- row-gap: var(--rls-sizing-x2);
3523
- }
3524
- .rls-snackbar__header {
3525
- display: flex;
3526
- align-items: center;
3527
- justify-content: space-between;
3528
- column-gap: var(--rls-sizing-x4);
3529
- }
3530
- .rls-snackbar__header > button {
3531
- background: rgba(0, 0, 0, 0);
3532
- padding: 0rem;
3533
- cursor: pointer;
3534
- color: var(--rls-theme-color-700);
3535
- }
3536
- .rls-snackbar__title {
3537
- white-space: nowrap;
3538
- overflow: hidden;
3539
- text-overflow: ellipsis;
3540
- color: var(--rls-theme-color-500);
3541
- font-size: var(--rls-body-font-size);
3542
- font-weight: var(--rls-font-weight-bold);
3543
- letter-spacing: var(--rls-body-letter-spacing);
3544
- }
3545
- .rls-snackbar__content p {
3546
- line-height: var(--rls-sizing-x10);
3547
- color: var(--rls-app-color-600);
3548
- font-size: var(--rls-label-font-size);
3549
- font-weight: var(--rls-font-weight-medium);
3550
- letter-spacing: var(--rls-label-letter-spacing);
3551
- }
3552
- @media only screen and (max-width: 375px) {
3553
- .rls-snackbar {
3554
- width: calc(100% - var(--rls-sizing-x12));
3555
- }
3556
- } /*# sourceMappingURL=Snackbar.css.map */