@dialpad/dialtone 8.19.1 → 8.20.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 (4) hide show
  1. package/lib/build/less/components/root-layout.less +39 -47
  2. package/lib/dist/css/dialtone.css +29 -35
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +2 -1
package/lib/build/less/components/root-layout.less CHANGED
@@ -15,13 +15,22 @@
15
15
  .d-root-layout {
16
16
  position: relative;
17
17
  display: grid;
18
- grid-template:
19
- 'header' auto
20
- 'body' 1fr
21
- 'footer' auto / 1fr;
22
- width: 100%;
18
+ grid-template-areas:
19
+ 'header header'
20
+ 'sidebar body'
21
+ 'footer footer';
22
+ grid-template-rows: min-content 1fr min-content;
23
+ grid-template-columns: min-content 1fr;
23
24
  min-height: 100vh;
24
25
 
26
+ &--inverted {
27
+ grid-template-areas:
28
+ 'header header'
29
+ 'body sidebar'
30
+ 'footer footer';
31
+ grid-template-columns: 1fr min-content;
32
+ }
33
+
25
34
  &--fixed {
26
35
  height: 100vh;
27
36
  }
@@ -32,36 +41,19 @@
32
41
  &--sticky {
33
42
  position: sticky;
34
43
  top: 0;
35
- z-index: var(--zi-base1);
36
- }
37
- }
38
-
39
- &__body {
40
- display: flex;
41
- grid-area: body;
42
- height: 100%;
43
- overflow: auto;
44
- box-shadow: none;
45
-
46
- &--invert {
47
- flex-direction: row-reverse;
44
+ z-index: var(--zi-navigation);
48
45
  }
49
46
  }
50
47
 
51
48
  &__sidebar {
52
- flex-shrink: 0;
49
+ grid-area: sidebar;
53
50
  height: 100%;
54
51
  box-shadow: none;
55
-
56
- &--sticky {
57
- position: sticky;
58
- top: 0;
59
- overflow: auto;
60
- }
61
52
  }
62
53
 
63
54
  &__content {
64
- flex: 1;
55
+ grid-area: body;
56
+ overflow-y: auto;
65
57
  box-shadow: none;
66
58
 
67
59
  &:focus-visible {
@@ -76,36 +68,36 @@
76
68
 
77
69
  @media (max-width: 480px) {
78
70
  .d-root-layout__responsive--sm {
79
- .d-root-layout__body {
80
- flex-direction: column;
81
-
82
- &--invert {
83
- flex-direction: column-reverse;
84
- }
85
- }
71
+ grid-template-areas:
72
+ 'header'
73
+ 'sidebar'
74
+ 'body'
75
+ 'footer';
76
+ grid-template-rows: min-content min-content 1fr min-content;
77
+ grid-template-columns: 1fr;
86
78
  }
87
79
  }
88
80
 
89
81
  @media (max-width: 640px) {
90
82
  .d-root-layout__responsive--md {
91
- .d-root-layout__body {
92
- flex-direction: column;
93
-
94
- &--invert {
95
- flex-direction: column-reverse;
96
- }
97
- }
83
+ grid-template-areas:
84
+ 'header'
85
+ 'sidebar'
86
+ 'body'
87
+ 'footer';
88
+ grid-template-rows: min-content min-content 1fr min-content;
89
+ grid-template-columns: 1fr;
98
90
  }
99
91
  }
100
92
 
101
93
  @media (max-width: 980px) {
102
94
  .d-root-layout__responsive--lg {
103
- .d-root-layout__body {
104
- flex-direction: column;
105
-
106
- &--invert {
107
- flex-direction: column-reverse;
108
- }
109
- }
95
+ grid-template-areas:
96
+ 'header'
97
+ 'sidebar'
98
+ 'body'
99
+ 'footer';
100
+ grid-template-rows: min-content min-content 1fr min-content;
101
+ grid-template-columns: 1fr;
110
102
  }
111
103
  }
package/lib/dist/css/dialtone.css CHANGED
@@ -3774,10 +3774,18 @@ legend .d-label {
3774
3774
  .d-root-layout {
3775
3775
  position: relative;
3776
3776
  display: grid;
3777
- grid-template: 'header' auto 'body' 1fr 'footer' auto / 1fr;
3778
- width: 100%;
3777
+ grid-template-areas: 'header header' 'sidebar body' 'footer footer';
3778
+ grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
3779
+ grid-template-rows: min-content 1fr min-content;
3780
+ grid-template-columns: -webkit-min-content 1fr;
3781
+ grid-template-columns: min-content 1fr;
3779
3782
  min-height: 100vh;
3780
3783
  }
3784
+ .d-root-layout--inverted {
3785
+ grid-template-areas: 'header header' 'body sidebar' 'footer footer';
3786
+ grid-template-columns: 1fr -webkit-min-content;
3787
+ grid-template-columns: 1fr min-content;
3788
+ }
3781
3789
  .d-root-layout--fixed {
3782
3790
  height: 100vh;
3783
3791
  }
@@ -3787,30 +3795,16 @@ legend .d-label {
3787
3795
  .d-root-layout__header--sticky {
3788
3796
  position: sticky;
3789
3797
  top: 0;
3790
- z-index: var(--zi-base1);
3791
- }
3792
- .d-root-layout__body {
3793
- display: flex;
3794
- grid-area: body;
3795
- height: 100%;
3796
- overflow: auto;
3797
- box-shadow: none;
3798
- }
3799
- .d-root-layout__body--invert {
3800
- flex-direction: row-reverse;
3798
+ z-index: var(--zi-navigation);
3801
3799
  }
3802
3800
  .d-root-layout__sidebar {
3803
- flex-shrink: 0;
3801
+ grid-area: sidebar;
3804
3802
  height: 100%;
3805
3803
  box-shadow: none;
3806
3804
  }
3807
- .d-root-layout__sidebar--sticky {
3808
- position: sticky;
3809
- top: 0;
3810
- overflow: auto;
3811
- }
3812
3805
  .d-root-layout__content {
3813
- flex: 1;
3806
+ grid-area: body;
3807
+ overflow-y: auto;
3814
3808
  box-shadow: none;
3815
3809
  }
3816
3810
  .d-root-layout__content:focus-visible {
@@ -15604,11 +15598,11 @@ body {
15604
15598
  }
15605
15599
 
15606
15600
  @media (max-width: 480px) {
15607
- .d-root-layout__responsive--sm .d-root-layout__body {
15608
- flex-direction: column;
15609
- }
15610
- .d-root-layout__responsive--sm .d-root-layout__body--invert {
15611
- flex-direction: column-reverse;
15601
+ .d-root-layout__responsive--sm {
15602
+ grid-template-areas: 'header' 'sidebar' 'body' 'footer';
15603
+ grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
15604
+ grid-template-rows: min-content min-content 1fr min-content;
15605
+ grid-template-columns: 1fr;
15612
15606
  }
15613
15607
  .sm\:d-stack {
15614
15608
  --stack-gap: 0;
@@ -16338,11 +16332,11 @@ body {
16338
16332
  }
16339
16333
 
16340
16334
  @media (max-width: 640px) {
16341
- .d-root-layout__responsive--md .d-root-layout__body {
16342
- flex-direction: column;
16343
- }
16344
- .d-root-layout__responsive--md .d-root-layout__body--invert {
16345
- flex-direction: column-reverse;
16335
+ .d-root-layout__responsive--md {
16336
+ grid-template-areas: 'header' 'sidebar' 'body' 'footer';
16337
+ grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
16338
+ grid-template-rows: min-content min-content 1fr min-content;
16339
+ grid-template-columns: 1fr;
16346
16340
  }
16347
16341
  .md\:d-stack {
16348
16342
  --stack-gap: 0;
@@ -17072,11 +17066,11 @@ body {
17072
17066
  }
17073
17067
 
17074
17068
  @media (max-width: 980px) {
17075
- .d-root-layout__responsive--lg .d-root-layout__body {
17076
- flex-direction: column;
17077
- }
17078
- .d-root-layout__responsive--lg .d-root-layout__body--invert {
17079
- flex-direction: column-reverse;
17069
+ .d-root-layout__responsive--lg {
17070
+ grid-template-areas: 'header' 'sidebar' 'body' 'footer';
17071
+ grid-template-rows: -webkit-min-content -webkit-min-content 1fr -webkit-min-content;
17072
+ grid-template-rows: min-content min-content 1fr min-content;
17073
+ grid-template-columns: 1fr;
17080
17074
  }
17081
17075
  .lg\:d-stack {
17082
17076
  --stack-gap: 0;