@dialpad/dialtone-css 8.26.1 → 8.27.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.
Files changed (5) hide show
  1. package/CHANGELOG.json +1 -1
  2. package/lib/build/less/components/item-layout.less +68 -12
  3. package/lib/dist/css/dialtone.css +69 -29
  4. package/lib/dist/css/dialtone.min.css +1 -1
  5. package/package.json +2 -2
package/lib/build/less/components/item-layout.less CHANGED
@@ -14,40 +14,96 @@
14
14
  // ----------------------------------------------------------------------------
15
15
  .dt-item-layout {
16
16
  display: flex;
17
- align-items: center;
17
+ align-items: stretch;
18
18
  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
19
19
  padding: var(--dt-space-300) var(--dt-space-400);
20
20
  font-size: var(--dt-font-size-200);
21
21
  line-height: var(--dt-font-line-height-300);
22
22
 
23
- &--content {
23
+ > .dt-item-layout--content {
24
+ display: flex;
25
+ flex-direction: column;
24
26
  flex-grow: 1;
27
+ justify-content: center;
25
28
  min-width: var(--dt-size-0);
26
- }
27
29
 
28
- &--subtitle {
29
- color: var(--dt-color-foreground-tertiary);
30
- font-size: var(--dt-font-size-100);
30
+ > .dt-item-layout--subtitle {
31
+ color: var(--dt-color-foreground-tertiary);
32
+ font-size: var(--dt-font-size-100);
33
+ }
34
+
35
+ > .dt-item-layout--subtitle--with-title {
36
+ margin-top: var(--dt-space-200-negative);
37
+ }
38
+
39
+ > .dt-item-layout--bottom {
40
+ margin-top: var(--dt-space-200);
41
+ }
31
42
  }
32
43
 
33
- &--right,
34
- &--left {
44
+ > .dt-item-layout--right,
45
+ > .dt-item-layout--left {
35
46
  display: flex;
36
47
  align-items: center;
37
48
  min-width: var(--dt-size-600);
38
49
  min-height: inherit;
39
50
  }
40
51
 
41
- &--right {
52
+ > .dt-item-layout--right {
42
53
  padding-left: var(--dt-space-400);
43
54
  }
44
55
 
45
- &--left {
56
+ > .dt-item-layout--left {
46
57
  justify-content: flex-end;
47
58
  padding-right: var(--dt-space-400);
48
59
  }
49
60
 
50
- &--bottom {
51
- margin-top: var(--dt-space-200);
61
+ > .dt-item-layout--selected {
62
+ display: flex;
63
+ align-items: center;
64
+ }
65
+ }
66
+
67
+ .dt-item-layout--custom {
68
+ display: grid;
69
+ grid-template-areas: 'left content right selected';
70
+ grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
71
+
72
+ > .dt-item-layout--left {
73
+ grid-area: left;
74
+ }
75
+
76
+ > .dt-item-layout--right {
77
+ grid-area: right;
78
+ }
79
+
80
+ > .dt-item-layout--content {
81
+ display: grid;
82
+ grid-area: content;
83
+ grid-template-areas:
84
+ 'title'
85
+ 'subtitle'
86
+ 'bottom';
87
+ grid-template-rows: repeat(auto-fit, minmax(0, auto));
88
+
89
+ > .dt-item-layout--title {
90
+ grid-area: title;
91
+ }
92
+
93
+ > .dt-item-layout--subtitle {
94
+ grid-area: subtitle;
95
+ }
96
+
97
+ > .dt-item-layout--subtitle--with-title {
98
+ //
99
+ }
100
+
101
+ > .dt-item-layout--bottom {
102
+ grid-area: bottom;
103
+ }
104
+ }
105
+
106
+ > .dt-item-layout--selected {
107
+ grid-area: selected;
52
108
  }
53
109
  }
package/lib/dist/css/dialtone.css CHANGED
@@ -498,36 +498,76 @@ template {
498
498
  }
499
499
  .dt-item-layout {
500
500
  display: flex;
501
- align-items: center;
501
+ align-items: stretch;
502
502
  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
503
503
  padding: var(--dt-space-300) var(--dt-space-400);
504
504
  font-size: var(--dt-font-size-200);
505
505
  line-height: var(--dt-font-line-height-300);
506
506
  }
507
- .dt-item-layout--content {
507
+ .dt-item-layout > .dt-item-layout--content {
508
+ display: flex;
509
+ flex-direction: column;
508
510
  flex-grow: 1;
511
+ justify-content: center;
509
512
  min-width: var(--dt-size-0);
510
513
  }
511
- .dt-item-layout--subtitle {
514
+ .dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle {
512
515
  color: var(--dt-color-foreground-tertiary);
513
516
  font-size: var(--dt-font-size-100);
514
517
  }
515
- .dt-item-layout--right,
516
- .dt-item-layout--left {
518
+ .dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle--with-title {
519
+ margin-top: var(--dt-space-200-negative);
520
+ }
521
+ .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom {
522
+ margin-top: var(--dt-space-200);
523
+ }
524
+ .dt-item-layout > .dt-item-layout--right,
525
+ .dt-item-layout > .dt-item-layout--left {
517
526
  display: flex;
518
527
  align-items: center;
519
528
  min-width: var(--dt-size-600);
520
529
  min-height: inherit;
521
530
  }
522
- .dt-item-layout--right {
531
+ .dt-item-layout > .dt-item-layout--right {
523
532
  padding-left: var(--dt-space-400);
524
533
  }
525
- .dt-item-layout--left {
534
+ .dt-item-layout > .dt-item-layout--left {
526
535
  justify-content: flex-end;
527
536
  padding-right: var(--dt-space-400);
528
537
  }
529
- .dt-item-layout--bottom {
530
- margin-top: var(--dt-space-200);
538
+ .dt-item-layout > .dt-item-layout--selected {
539
+ display: flex;
540
+ align-items: center;
541
+ }
542
+ .dt-item-layout--custom {
543
+ display: grid;
544
+ grid-template-areas: 'left content right selected';
545
+ grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content) minmax(0, -webkit-max-content);
546
+ grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
547
+ }
548
+ .dt-item-layout--custom > .dt-item-layout--left {
549
+ grid-area: left;
550
+ }
551
+ .dt-item-layout--custom > .dt-item-layout--right {
552
+ grid-area: right;
553
+ }
554
+ .dt-item-layout--custom > .dt-item-layout--content {
555
+ display: grid;
556
+ grid-area: content;
557
+ grid-template-areas: 'title' 'subtitle' 'bottom';
558
+ grid-template-rows: repeat(auto-fit, minmax(0, auto));
559
+ }
560
+ .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--title {
561
+ grid-area: title;
562
+ }
563
+ .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--subtitle {
564
+ grid-area: subtitle;
565
+ }
566
+ .dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--bottom {
567
+ grid-area: bottom;
568
+ }
569
+ .dt-item-layout--custom > .dt-item-layout--selected {
570
+ grid-area: selected;
531
571
  }
532
572
  .d-avatar {
533
573
  --avatar-color-background: var(--dt-avatar-color-background-000);
@@ -7419,7 +7459,7 @@ body {
7419
7459
  }
7420
7460
  /**
7421
7461
  * Do not edit directly
7422
- * Generated on Wed, 21 Feb 2024 23:08:20 GMT
7462
+ * Generated on Tue, 27 Feb 2024 00:35:45 GMT
7423
7463
  */
7424
7464
 
7425
7465
  .dialtone-theme-light {
@@ -7489,6 +7529,14 @@ body {
7489
7529
  --dt-size-1150: 153.6rem;
7490
7530
  --dt-size-1200: 204.8rem;
7491
7531
  --dt-size-base: 0.8rem;
7532
+ --dt-size-border-0: 0rem;
7533
+ --dt-size-border-50: 0.05rem;
7534
+ --dt-size-border-100: 0.1rem;
7535
+ --dt-size-border-150: 0.15rem;
7536
+ --dt-size-border-200: 0.2rem;
7537
+ --dt-size-border-300: 0.4rem;
7538
+ --dt-size-border-400: 0.8rem;
7539
+ --dt-size-border-focus: 0.3rem;
7492
7540
  --dt-size-50-negative: -0.05rem;
7493
7541
  --dt-size-100-negative: -0.1rem;
7494
7542
  --dt-size-200-negative: -0.2rem;
@@ -7547,14 +7595,6 @@ body {
7547
7595
  --dt-size-90-percent: 90%;
7548
7596
  --dt-size-95-percent: 95%;
7549
7597
  --dt-size-100-percent: 100%;
7550
- --dt-size-border-0: 0rem;
7551
- --dt-size-border-50: 0.05rem;
7552
- --dt-size-border-100: 0.1rem;
7553
- --dt-size-border-150: 0.15rem;
7554
- --dt-size-border-200: 0.2rem;
7555
- --dt-size-border-300: 0.4rem;
7556
- --dt-size-border-400: 0.8rem;
7557
- --dt-size-border-focus: 0.3rem;
7558
7598
  --dt-size-radius-0: 0rem;
7559
7599
  --dt-size-radius-100: 0.1rem;
7560
7600
  --dt-size-radius-200: 0.2rem;
@@ -7562,7 +7602,7 @@ body {
7562
7602
  --dt-size-radius-400: 0.8rem;
7563
7603
  --dt-size-radius-500: 1.6rem;
7564
7604
  --dt-size-radius-600: 3.2rem;
7565
- --dt-size-radius-pill: 10rem;
7605
+ --dt-size-radius-pill: 10.2rem;
7566
7606
  --dt-size-radius-circle: 50%;
7567
7607
  --dt-space-0: 0rem;
7568
7608
  --dt-space-50: 0.05rem;
@@ -8216,7 +8256,7 @@ body {
8216
8256
 
8217
8257
  /**
8218
8258
  * Do not edit directly
8219
- * Generated on Wed, 21 Feb 2024 23:08:21 GMT
8259
+ * Generated on Tue, 27 Feb 2024 00:35:45 GMT
8220
8260
  */
8221
8261
 
8222
8262
  .dialtone-theme-dark {
@@ -8286,6 +8326,14 @@ body {
8286
8326
  --dt-size-1150: 153.6rem;
8287
8327
  --dt-size-1200: 204.8rem;
8288
8328
  --dt-size-base: 0.8rem;
8329
+ --dt-size-border-0: 0rem;
8330
+ --dt-size-border-50: 0.05rem;
8331
+ --dt-size-border-100: 0.1rem;
8332
+ --dt-size-border-150: 0.15rem;
8333
+ --dt-size-border-200: 0.2rem;
8334
+ --dt-size-border-300: 0.4rem;
8335
+ --dt-size-border-400: 0.8rem;
8336
+ --dt-size-border-focus: 0.3rem;
8289
8337
  --dt-size-50-negative: -0.05rem;
8290
8338
  --dt-size-100-negative: -0.1rem;
8291
8339
  --dt-size-200-negative: -0.2rem;
@@ -8344,14 +8392,6 @@ body {
8344
8392
  --dt-size-90-percent: 90%;
8345
8393
  --dt-size-95-percent: 95%;
8346
8394
  --dt-size-100-percent: 100%;
8347
- --dt-size-border-0: 0rem;
8348
- --dt-size-border-50: 0.05rem;
8349
- --dt-size-border-100: 0.1rem;
8350
- --dt-size-border-150: 0.15rem;
8351
- --dt-size-border-200: 0.2rem;
8352
- --dt-size-border-300: 0.4rem;
8353
- --dt-size-border-400: 0.8rem;
8354
- --dt-size-border-focus: 0.3rem;
8355
8395
  --dt-size-radius-0: 0rem;
8356
8396
  --dt-size-radius-100: 0.1rem;
8357
8397
  --dt-size-radius-200: 0.2rem;
@@ -8359,7 +8399,7 @@ body {
8359
8399
  --dt-size-radius-400: 0.8rem;
8360
8400
  --dt-size-radius-500: 1.6rem;
8361
8401
  --dt-size-radius-600: 3.2rem;
8362
- --dt-size-radius-pill: 10rem;
8402
+ --dt-size-radius-pill: 10.2rem;
8363
8403
  --dt-size-radius-circle: 50%;
8364
8404
  --dt-space-0: 0rem;
8365
8405
  --dt-space-50: 0.05rem;