@embeddable.com/remarkable-ui 2.0.14 → 2.0.16

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.
@@ -81,4 +81,5 @@
81
81
 
82
82
  .button span {
83
83
  padding: 0 var(--em-button-label-padding, 0.5rem);
84
+ margin: auto;
84
85
  }
@@ -0,0 +1,480 @@
1
+ /* Variables declaration */
2
+
3
+ .rdp-root table {
4
+ margin-top: var(--em-cal-nav-padding-default, 0.5rem);
5
+ }
6
+
7
+ .rdp-root {
8
+ --rdp-accent-color: var(
9
+ --em-daterangepicker-accent-color,
10
+ #212129
11
+ ); /* The accent color used for selected days and UI elements. */
12
+ --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
13
+
14
+ --rdp-day-height: var(--em-daterangepicker-day-size, 2rem); /* The height of the day cells. */
15
+ --rdp-day-width: var(--em-daterangepicker-day-size, 2rem); /* The width of the day cells. */
16
+
17
+ --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
18
+ --rdp-day_button-height: var(
19
+ --em-daterangepicker-day-size,
20
+ 2rem
21
+ ); /* The height of the day cells. */
22
+ --rdp-day_button-width: var(
23
+ --em-daterangepicker-day-size,
24
+ 2rem
25
+ ); /* The width of the day cells. */
26
+
27
+ --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
28
+ --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
29
+ --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
30
+
31
+ --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */
32
+
33
+ --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
34
+
35
+ --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
36
+ --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
37
+ --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
38
+ --rdp-nav-height: var(
39
+ --em-daterangepicker-day-size,
40
+ 2rem
41
+ ); /* The height of the navigation bar. */
42
+
43
+ --rdp-range_middle-background-color: var(
44
+ --em-daterangepicker-day-range-background,
45
+ #ededf1
46
+ ); /* The color of the background for days in the middle of a range. */
47
+ --rdp-range_middle-color: var(
48
+ --em-daterangepicker-day-color,
49
+ #212129
50
+ ); /* The color of the range text. */
51
+
52
+ --rdp-range_start-color: var(
53
+ --em-daterangepicker-day-range-limit-color,
54
+ #fff
55
+ ); /* The color of the range text. */
56
+ --rdp-range_start-date-background-color: var(
57
+ --rdp-accent-color
58
+ ); /* The background color of the date when at the start of the selected range. */
59
+
60
+ --rdp-range_end-color: var(
61
+ --em-daterangepicker-day-range-limit-color,
62
+ #fff
63
+ ); /* The color of the range text. */
64
+
65
+ --rdp-range_end-date-background-color: var(
66
+ --rdp-accent-color
67
+ ); /* The background color of the date when at the end of the selected range. */
68
+
69
+ --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
70
+ --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
71
+
72
+ --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
73
+ --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
74
+ --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
75
+ --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
76
+
77
+ --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
78
+ --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
79
+ --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
80
+
81
+ --rdp-gradient-direction: 90deg;
82
+
83
+ --rdp-animation_duration: 0.3s;
84
+ --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
85
+ }
86
+
87
+ .rdp-root[dir='rtl'] {
88
+ --rdp-gradient-direction: -90deg;
89
+ }
90
+
91
+ /* .rdp-root[data-broadcast-calendar='true'] {
92
+ --rdp-outside-opacity: unset;
93
+ } */
94
+
95
+ /* Root of the component. */
96
+ .rdp-root {
97
+ position: relative; /* Required to position the navigation toolbar. */
98
+ box-sizing: border-box;
99
+ }
100
+
101
+ .rdp-root * {
102
+ box-sizing: border-box;
103
+ }
104
+
105
+ .rdp-day {
106
+ width: var(--rdp-day-width);
107
+ height: var(--rdp-day-height);
108
+ text-align: center;
109
+ padding: 0;
110
+ }
111
+
112
+ .rdp-day_button {
113
+ background: none;
114
+ padding: 0;
115
+ margin: 0;
116
+ cursor: pointer;
117
+ font: inherit;
118
+ color: inherit;
119
+ justify-content: center;
120
+ align-items: center;
121
+ display: flex;
122
+
123
+ border: unset;
124
+ width: var(--rdp-day_button-width);
125
+ height: var(--rdp-day_button-height);
126
+ border-radius: var(--rdp-day_button-border-radius);
127
+
128
+ color: var(--em-daterangepicker-day-color, #212129);
129
+ font-family: var(--em-daterangepicker-day-font-family, sans-serif);
130
+ font-size: var(--em-daterangepicker-day-font-size, 0.875rem);
131
+ font-weight: var(--em-daterangepicker-day-font-weight, 500);
132
+ }
133
+
134
+ .rdp-day_button:disabled {
135
+ cursor: revert;
136
+ }
137
+
138
+ .rdp-caption_label {
139
+ z-index: 1;
140
+
141
+ position: relative;
142
+ display: inline-flex;
143
+ align-items: center;
144
+
145
+ white-space: nowrap;
146
+ border: 0;
147
+
148
+ color: var(--em-daterangepicker-label-color, #212129);
149
+ font-family: var(--em-daterangepicker-label-font-family, sans-serif);
150
+ font-size: var(--em-daterangepicker-label-font-size, 0.875rem);
151
+ font-weight: var(--em-daterangepicker-label-font-weight, 500);
152
+ }
153
+
154
+ .rdp-dropdown:focus-visible ~ .rdp-caption_label {
155
+ outline: 5px auto Highlight;
156
+ /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
157
+ outline: 5px auto -webkit-focus-ring-color;
158
+ }
159
+
160
+ .rdp-button_next,
161
+ .rdp-button_previous {
162
+ border: none;
163
+ background: none;
164
+ padding: 0;
165
+ margin: 0;
166
+ cursor: pointer;
167
+ font: inherit;
168
+ color: inherit;
169
+ -moz-appearance: none;
170
+ -webkit-appearance: none;
171
+ display: inline-flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ position: relative;
175
+ appearance: none;
176
+
177
+ width: var(--rdp-nav_button-width);
178
+ height: var(--rdp-nav_button-height);
179
+ }
180
+
181
+ .rdp-button_next:disabled,
182
+ .rdp-button_next[aria-disabled='true'],
183
+ .rdp-button_previous:disabled,
184
+ .rdp-button_previous[aria-disabled='true'] {
185
+ cursor: revert;
186
+
187
+ opacity: var(--rdp-nav_button-disabled-opacity);
188
+ }
189
+
190
+ .rdp-chevron {
191
+ display: inline-block;
192
+ fill: var(--rdp-accent-color);
193
+ }
194
+
195
+ .rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
196
+ transform: rotate(180deg);
197
+ transform-origin: 50%;
198
+ }
199
+
200
+ .rdp-dropdowns {
201
+ position: relative;
202
+ display: inline-flex;
203
+ align-items: center;
204
+ gap: var(--rdp-dropdown-gap);
205
+ }
206
+ .rdp-dropdown {
207
+ z-index: 2;
208
+
209
+ /* Reset */
210
+ opacity: 0;
211
+ appearance: none;
212
+ position: absolute;
213
+ inset-block-start: 0;
214
+ inset-block-end: 0;
215
+ inset-inline-start: 0;
216
+ width: 100%;
217
+ margin: 0;
218
+ padding: 0;
219
+ cursor: inherit;
220
+ border: none;
221
+ line-height: inherit;
222
+ }
223
+
224
+ .rdp-dropdown_root {
225
+ position: relative;
226
+ display: inline-flex;
227
+ align-items: center;
228
+ }
229
+
230
+ .rdp-dropdown_root[data-disabled='true'] .rdp-chevron {
231
+ opacity: var(--rdp-disabled-opacity);
232
+ }
233
+
234
+ .rdp-month_caption {
235
+ display: flex;
236
+ align-content: center;
237
+ height: var(--rdp-nav-height);
238
+ font-weight: bold;
239
+ font-size: large;
240
+ }
241
+
242
+ .rdp-root[data-nav-layout='around'] .rdp-month,
243
+ .rdp-root[data-nav-layout='after'] .rdp-month {
244
+ position: relative;
245
+ }
246
+
247
+ .rdp-root[data-nav-layout='around'] .rdp-month_caption {
248
+ justify-content: center;
249
+ margin-inline-start: var(--rdp-nav_button-width);
250
+ margin-inline-end: var(--rdp-nav_button-width);
251
+ position: relative;
252
+ }
253
+
254
+ .rdp-root[data-nav-layout='around'] .rdp-button_previous {
255
+ position: absolute;
256
+ inset-inline-start: 0;
257
+ top: 0;
258
+ height: var(--rdp-nav-height);
259
+ display: inline-flex;
260
+ }
261
+
262
+ .rdp-root[data-nav-layout='around'] .rdp-button_next {
263
+ position: absolute;
264
+ inset-inline-end: 0;
265
+ top: 0;
266
+ height: var(--rdp-nav-height);
267
+ display: inline-flex;
268
+ justify-content: center;
269
+ }
270
+
271
+ .rdp-months {
272
+ position: relative;
273
+ display: flex;
274
+ flex-wrap: wrap;
275
+ gap: var(--rdp-months-gap);
276
+ max-width: fit-content;
277
+ }
278
+
279
+ .rdp-month_grid {
280
+ border-collapse: collapse;
281
+ }
282
+
283
+ .rdp-nav {
284
+ position: absolute;
285
+ inset-block-start: 0;
286
+ inset-inline-end: 0;
287
+
288
+ display: flex;
289
+ align-items: center;
290
+
291
+ height: var(--rdp-nav-height);
292
+ }
293
+
294
+ .rdp-weekday {
295
+ opacity: var(--rdp-weekday-opacity);
296
+ padding: var(--rdp-weekday-padding);
297
+ font-weight: 500;
298
+ font-size: smaller;
299
+ text-align: var(--rdp-weekday-text-align);
300
+ text-transform: var(--rdp-weekday-text-transform);
301
+
302
+ color: var(--em-daterangepicker-weekday-color, #5c5c66);
303
+ font-family: var(--em-daterangepicker-weekday-font-family, sans-serif);
304
+ font-size: var(--em-daterangepicker-weekday-font-size, 0.875rem);
305
+ font-weight: var(--em-daterangepicker-weekday-font-weight, 500);
306
+ }
307
+
308
+ .rdp-week_number {
309
+ opacity: var(--rdp-week_number-opacity);
310
+ font-weight: 400;
311
+ font-size: small;
312
+ height: var(--rdp-week_number-height);
313
+ width: var(--rdp-week_number-width);
314
+ border: var(--rdp-week_number-border);
315
+ border-radius: var(--rdp-week_number-border-radius);
316
+ text-align: var(--rdp-weeknumber-text-align);
317
+ }
318
+
319
+ /* DAY MODIFIERS */
320
+ .rdp-today:not(.rdp-outside) {
321
+ color: var(--rdp-today-color);
322
+ }
323
+
324
+ .rdp-outside .rdp-day_button {
325
+ color: var(--em-daterangepicker-day-outside, #b8b8bd);
326
+ }
327
+
328
+ .rdp-disabled:not(.rdp-selected) {
329
+ opacity: var(--rdp-disabled-opacity);
330
+ }
331
+
332
+ .rdp-hidden {
333
+ visibility: hidden;
334
+ color: var(--rdp-range_start-color);
335
+ }
336
+
337
+ .rdp-range_start .rdp-day_button {
338
+ background-color: var(--rdp-range_start-date-background-color);
339
+ color: var(--rdp-range_start-color);
340
+
341
+ border: unset;
342
+ border-radius: var(--em-daterangepicker-day-range-limit-border-radius, 0.5rem) 0 0
343
+ var(--em-daterangepicker-day-range-limit-border-radius, 0.5rem);
344
+ }
345
+
346
+ .rdp-range_middle {
347
+ background-color: var(--rdp-range_middle-background-color);
348
+ }
349
+
350
+ .rdp-range_middle .rdp-day_button {
351
+ border: unset;
352
+ border-radius: unset;
353
+ color: var(--rdp-range_middle-color);
354
+ }
355
+
356
+ .rdp-range_end {
357
+ color: var(--rdp-range_end-color);
358
+ }
359
+
360
+ .rdp-range_end .rdp-day_button {
361
+ color: var(--rdp-range_start-color);
362
+ background-color: var(--rdp-range_end-date-background-color);
363
+
364
+ border: unset;
365
+ border-radius: 0 var(--em-daterangepicker-day-range-limit-border-radius, 0.5rem)
366
+ var(--em-daterangepicker-day-range-limit-border-radius, 0.5rem) 0;
367
+ }
368
+ .rdp-range_start.rdp-range_end .rdp-day_button {
369
+ border-radius: var(--em-daterangepicker-day-range-limit-border-radius, 0.5rem);
370
+ }
371
+
372
+ .rdp-range_start.rdp-range_end {
373
+ background: revert;
374
+ }
375
+
376
+ .rdp-focusable {
377
+ cursor: pointer;
378
+ }
379
+
380
+ @keyframes rdp-slide_in_left {
381
+ 0% {
382
+ transform: translateX(-100%);
383
+ }
384
+ 100% {
385
+ transform: translateX(0);
386
+ }
387
+ }
388
+
389
+ @keyframes rdp-slide_in_right {
390
+ 0% {
391
+ transform: translateX(100%);
392
+ }
393
+ 100% {
394
+ transform: translateX(0);
395
+ }
396
+ }
397
+
398
+ @keyframes rdp-slide_out_left {
399
+ 0% {
400
+ transform: translateX(0);
401
+ }
402
+ 100% {
403
+ transform: translateX(-100%);
404
+ }
405
+ }
406
+
407
+ @keyframes rdp-slide_out_right {
408
+ 0% {
409
+ transform: translateX(0);
410
+ }
411
+ 100% {
412
+ transform: translateX(100%);
413
+ }
414
+ }
415
+
416
+ .rdp-weeks_before_enter {
417
+ animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
418
+ }
419
+
420
+ .rdp-weeks_before_exit {
421
+ animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
422
+ }
423
+
424
+ .rdp-weeks_after_enter {
425
+ animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
426
+ }
427
+
428
+ .rdp-weeks_after_exit {
429
+ animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
430
+ }
431
+
432
+ .rdp-root[dir='rtl'] .rdp-weeks_after_enter {
433
+ animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
434
+ }
435
+
436
+ .rdp-root[dir='rtl'] .rdp-weeks_before_exit {
437
+ animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
438
+ }
439
+
440
+ .rdp-root[dir='rtl'] .rdp-weeks_before_enter {
441
+ animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
442
+ }
443
+
444
+ .rdp-root[dir='rtl'] .rdp-weeks_after_exit {
445
+ animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
446
+ }
447
+
448
+ @keyframes rdp-fade_in {
449
+ from {
450
+ opacity: 0;
451
+ }
452
+ to {
453
+ opacity: 1;
454
+ }
455
+ }
456
+
457
+ @keyframes rdp-fade_out {
458
+ from {
459
+ opacity: 1;
460
+ }
461
+ to {
462
+ opacity: 0;
463
+ }
464
+ }
465
+
466
+ .rdp-caption_after_enter {
467
+ animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
468
+ }
469
+
470
+ .rdp-caption_after_exit {
471
+ animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
472
+ }
473
+
474
+ .rdp-caption_before_enter {
475
+ animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
476
+ }
477
+
478
+ .rdp-caption_before_exit {
479
+ animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
480
+ }
@@ -0,0 +1,26 @@
1
+ .chevron {
2
+ width: var(--em-daterangepicker-chevron-size, 2rem);
3
+ height: var(--em-daterangepicker-chevron-size, 2rem);
4
+ padding: var(--em-daterangepicker-chevron-padding, 0.5rem);
5
+ border-radius: var(--em-daterangepicker-chevron-border-radius, 0.5rem);
6
+ background: var(--em-daterangepicker-chevron-background, #fff);
7
+ color: var(--em-daterangepicker-chevron-color, #fff);
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ border: unset;
12
+ cursor: pointer;
13
+ }
14
+ .chevron svg {
15
+ flex-shrink: 0;
16
+ width: var(--em-daterangepicker-chevron-icon-size, 1rem);
17
+ height: var(--em-daterangepicker-chevron-icon-size, 1rem);
18
+ }
19
+
20
+ .chevron:hover {
21
+ background: var(--em-daterangepicker-chevron--hover, #f7f7f8);
22
+ }
23
+
24
+ .chevron:active {
25
+ background: var(--em-daterangepicker-chevron--active, #ededf1);
26
+ }
@@ -0,0 +1,3 @@
1
+ .submitButton {
2
+ margin-top: 16px;
3
+ }
@@ -19,6 +19,12 @@
19
19
  var(--em-selectfield-content-shadow-color, rgba(33, 33, 41, 0.25));
20
20
  }
21
21
 
22
+ .selectFieldContent.fitContent {
23
+ min-width: unset;
24
+ max-height: unset;
25
+ max-width: unset;
26
+ }
27
+
22
28
  .selectFieldContentList {
23
29
  display: flex;
24
30
  flex-direction: column;
@@ -446,7 +446,33 @@ var stylesTokensComponents = {
446
446
  "--em-textfield-line-height": "var(--em-core-line-height--md)",
447
447
  "--em-textfield-max-width": "400px",
448
448
  "--em-textfield-min-width": "160px",
449
- "--em-textfield-padding": "var(--em-core-spacing--0200)"
449
+ "--em-textfield-padding": "var(--em-core-spacing--0200)",
450
+ "--em-daterangepicker-accent-color": "var(--em-sem-background--inverted)",
451
+ "--em-daterangepicker-day-size": "var(--em-core-size--0800)",
452
+ "--em-daterangepicker-day-range-background": "var(--em-sem-background--light)",
453
+ "--em-daterangepicker-day-range-limit-color": "var(--em-sem-text--inverted)",
454
+ "--em-daterangepicker-day-color": "var(--em-sem-text)",
455
+ "--em-daterangepicker-day-font-family": "var(--em-core-font-family--base)",
456
+ "--em-daterangepicker-day-font-size": "var(--em-core-font-size--sm)",
457
+ "--em-daterangepicker-day-font-weight": "var(--em-core-font-weight--medium)",
458
+ "--em-daterangepicker-label-color": "var(--em-sem-text)",
459
+ "--em-daterangepicker-label-font-family": "var(--em-core-font-family--base)",
460
+ "--em-daterangepicker-label-font-size": "var(--em-core-font-size--sm)",
461
+ "--em-daterangepicker-label-font-weight": "var(--em-core-font-weight--medium)",
462
+ "--em-daterangepicker-weekday-color": "var(--em-sem-text--muted)",
463
+ "--em-daterangepicker-weekday-font-family": "var(--em-core-font-family--base)",
464
+ "--em-daterangepicker-weekday-font-size": "var(--em-core-font-size--sm)",
465
+ "--em-daterangepicker-weekday-font-weight": "var(--em-core-font-weight--medium)",
466
+ "--em-daterangepicker-day-range-limit-border-radius": "var(--em-core-border-radius--200)",
467
+ "--em-daterangepicker-day-outside": "var(--em-sem-text--subtle)",
468
+ "--em-daterangepicker-chevron-color": "var(--em-sem-text)",
469
+ "--em-daterangepicker-chevron-size": "var(--em-core-size--0800)",
470
+ "--em-daterangepicker-chevron-padding": "var(--em-core-spacing--0200)",
471
+ "--em-daterangepicker-chevron-border-radius": "var(--em-core-border-radius--200)",
472
+ "--em-daterangepicker-chevron-background": "var(--em-sem-background--light)",
473
+ "--em-daterangepicker-chevron-icon-size": "var(--em-core-size--0400)",
474
+ "--em-daterangepicker-chevron--hover": "var(--em-sem-background--subtle)",
475
+ "--em-daterangepicker-chevron--active": "var(--em-sem-background--muted)"
450
476
  };
451
477
 
452
478
  // src/styles/styles.constants.ts
@@ -459,4 +485,4 @@ var styles = {
459
485
  export {
460
486
  styles
461
487
  };
462
- //# sourceMappingURL=chunk-7RY47BRM.js.map
488
+ //# sourceMappingURL=chunk-V3ZAXTII.js.map