@seed-design/css 2.6.0 → 2.6.1

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.
Files changed (7) hide show
  1. package/all.css +45 -5
  2. package/all.layered.css +45 -5
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/date-picker.css +49 -4
  7. package/recipes/date-picker.layered.css +53 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "2.6.0",
3
+ "version": "2.6.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/date-picker.css CHANGED
@@ -3,6 +3,27 @@
3
3
  width: 100%;
4
4
  min-width: 0;
5
5
  box-sizing: border-box;
6
+ --seed-box-height-base: auto;
7
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
8
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
9
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
10
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
11
+ --seed-box-height: var(--seed-box-height-base, initial);
12
+ --seed-box-min-height-base: auto;
13
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
14
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
15
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
16
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
17
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
18
+ --seed-box-max-height-base: none;
19
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
20
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
21
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
22
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
23
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
24
+ height: var(--seed-box-height);
25
+ min-height: var(--seed-box-min-height);
26
+ max-height: var(--seed-box-max-height);
6
27
  color: var(--seed-color-fg-neutral-muted);
7
28
  background-color: var(--seed-color-bg-layer-floating);
8
29
  }
@@ -390,10 +411,6 @@
390
411
  grid-template-columns: repeat(2, minmax(0, 1fr));
391
412
  column-gap: var(--seed-dimension-x6);
392
413
  }
393
- .seed-date-picker__root--visibleRange_continuous {
394
- height: 100%;
395
- min-height: 0;
396
- }
397
414
  .seed-date-picker__weekdayRow--visibleRange_continuous {
398
415
  position: sticky;
399
416
  top: 0;
@@ -403,4 +420,32 @@
403
420
  }
404
421
  .seed-date-picker__weekday--visibleRange_week {
405
422
  height: 24px;
423
+ }
424
+ @media (min-width: 480px) {
425
+ .seed-date-picker__root {
426
+ --seed-box-height: var(--seed-box-height-sm, initial);
427
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
428
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
429
+ }
430
+ }
431
+ @media (min-width: 768px) {
432
+ .seed-date-picker__root {
433
+ --seed-box-height: var(--seed-box-height-md, initial);
434
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
435
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
436
+ }
437
+ }
438
+ @media (min-width: 1280px) {
439
+ .seed-date-picker__root {
440
+ --seed-box-height: var(--seed-box-height-lg, initial);
441
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
442
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
443
+ }
444
+ }
445
+ @media (min-width: 1440px) {
446
+ .seed-date-picker__root {
447
+ --seed-box-height: var(--seed-box-height-xl, initial);
448
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
449
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
450
+ }
406
451
  }
package/recipes/date-picker.layered.css CHANGED
@@ -1,8 +1,29 @@
1
1
  @layer seed-components {
2
2
  .seed-date-picker__root {
3
3
  box-sizing: border-box;
4
+ --seed-box-height-base: auto;
5
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
6
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
7
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
8
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
9
+ --seed-box-height: var(--seed-box-height-base, initial);
10
+ --seed-box-min-height-base: auto;
11
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
12
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
13
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
14
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
15
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
16
+ --seed-box-max-height-base: none;
17
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
18
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
19
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
20
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
21
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
4
22
  width: 100%;
5
23
  min-width: 0;
24
+ height: var(--seed-box-height);
25
+ min-height: var(--seed-box-min-height);
26
+ max-height: var(--seed-box-max-height);
6
27
  color: var(--seed-color-fg-neutral-muted);
7
28
  background-color: var(--seed-color-bg-layer-floating);
8
29
  position: relative;
@@ -449,11 +470,6 @@
449
470
  grid-template-columns: repeat(2, minmax(0, 1fr));
450
471
  }
451
472
 
452
- .seed-date-picker__root--visibleRange_continuous {
453
- height: 100%;
454
- min-height: 0;
455
- }
456
-
457
473
  .seed-date-picker__weekdayRow--visibleRange_continuous {
458
474
  position: sticky;
459
475
  top: 0;
@@ -466,4 +482,36 @@
466
482
  .seed-date-picker__weekday--visibleRange_week {
467
483
  height: 24px;
468
484
  }
485
+
486
+ @media (min-width: 480px) {
487
+ .seed-date-picker__root {
488
+ --seed-box-height: var(--seed-box-height-sm, initial);
489
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
490
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
491
+ }
492
+ }
493
+
494
+ @media (min-width: 768px) {
495
+ .seed-date-picker__root {
496
+ --seed-box-height: var(--seed-box-height-md, initial);
497
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
498
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
499
+ }
500
+ }
501
+
502
+ @media (min-width: 1280px) {
503
+ .seed-date-picker__root {
504
+ --seed-box-height: var(--seed-box-height-lg, initial);
505
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
506
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
507
+ }
508
+ }
509
+
510
+ @media (min-width: 1440px) {
511
+ .seed-date-picker__root {
512
+ --seed-box-height: var(--seed-box-height-xl, initial);
513
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
514
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
515
+ }
516
+ }
469
517
  }