@dialpad/dialtone-css 8.70.0 → 8.70.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/lib/build/less/components/stack.less +22 -19
  2. package/lib/dist/dialtone-default-theme.css +34 -26
  3. package/lib/dist/dialtone-default-theme.min.css +1 -1
  4. package/lib/dist/dialtone.css +34 -26
  5. package/lib/dist/dialtone.min.css +1 -1
  6. package/lib/dist/tokens-docs.json +1 -1
  7. package/package.json +1 -1
package/lib/build/less/components/stack.less CHANGED
@@ -19,18 +19,22 @@
19
19
  .direction-options() {
20
20
  &-column {
21
21
  --stack-direction: column;
22
+ --stack-align: initial;
22
23
  }
23
24
 
24
25
  &-column-reverse {
25
26
  --stack-direction: column-reverse;
27
+ --stack-align: initial;
26
28
  }
27
29
 
28
30
  &-row {
29
31
  --stack-direction: row;
32
+ --stack-align: center;
30
33
  }
31
34
 
32
35
  &-row-reverse {
33
36
  --stack-direction: row-reverse;
37
+ --stack-align: center;
34
38
  }
35
39
  }
36
40
 
@@ -93,10 +97,6 @@
93
97
  }
94
98
 
95
99
  .align-options() {
96
- &-align-normal {
97
- align-items: normal;
98
- }
99
-
100
100
  &-align-start {
101
101
  align-items: start;
102
102
  }
@@ -147,10 +147,14 @@
147
147
  .d-stack {
148
148
  --stack-gap: 0;
149
149
  --stack-direction: column;
150
+ --stack-align: initial;
151
+ --stack-justify: initial;
150
152
 
151
153
  display: flex;
152
154
  flex-direction: var(--stack-direction);
153
155
  gap: var(--stack-gap);
156
+ align-items: var(--stack-align);
157
+ justify-content: var(--stack-justify);
154
158
  }
155
159
 
156
160
  // ============================================================================
@@ -160,6 +164,7 @@
160
164
  // ----------------------------------------------------------------------------
161
165
  .d-stack--column-reverse {
162
166
  --stack-direction: column-reverse;
167
+ --stack-align: initial;
163
168
  }
164
169
 
165
170
  // ----------------------------------------------------------------------------
@@ -167,6 +172,7 @@
167
172
  // ----------------------------------------------------------------------------
168
173
  .d-stack--row {
169
174
  --stack-direction: row;
175
+ --stack-align: center;
170
176
  }
171
177
 
172
178
  // ----------------------------------------------------------------------------
@@ -174,34 +180,31 @@
174
180
  // ----------------------------------------------------------------------------
175
181
  .d-stack--row-reverse {
176
182
  --stack-direction: row-reverse;
183
+ --stack-align: center;
177
184
  }
178
185
 
179
186
  // ============================================================================
180
187
  // $ ALIGNMENT
181
188
  // ----------------------------------------------------------------------------
182
189
 
183
- .d-stack--align-normal {
184
- align-items: normal;
185
- }
186
-
187
190
  .d-stack--align-start {
188
- align-items: start;
191
+ --stack-align: start;
189
192
  }
190
193
 
191
194
  .d-stack--align-center {
192
- align-items: center;
195
+ --stack-align: center;
193
196
  }
194
197
 
195
198
  .d-stack--align-end {
196
- align-items: end;
199
+ --stack-align: end;
197
200
  }
198
201
 
199
202
  .d-stack--align-stretch {
200
- align-items: stretch;
203
+ --stack-align: stretch;
201
204
  }
202
205
 
203
206
  .d-stack--align-baseline {
204
- align-items: baseline;
207
+ --stack-align: baseline;
205
208
  }
206
209
 
207
210
  // ============================================================================
@@ -209,27 +212,27 @@
209
212
  // ----------------------------------------------------------------------------
210
213
 
211
214
  .d-stack--justify-start {
212
- justify-content: start;
215
+ --stack-justify: start;
213
216
  }
214
217
 
215
218
  .d-stack--justify-center {
216
- justify-content: center;
219
+ --stack-justify: center;
217
220
  }
218
221
 
219
222
  .d-stack--justify-end {
220
- justify-content: end;
223
+ --stack-justify: end;
221
224
  }
222
225
 
223
226
  .d-stack--justify-around {
224
- justify-content: space-around;
227
+ --stack-justify: space-around;
225
228
  }
226
229
 
227
230
  .d-stack--justify-between {
228
- justify-content: space-between;
231
+ --stack-justify: space-between;
229
232
  }
230
233
 
231
234
  .d-stack--justify-evenly {
232
- justify-content: space-evenly;
235
+ --stack-justify: space-evenly;
233
236
  }
234
237
 
235
238
  // ============================================================================
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -650,54 +650,58 @@ template {
650
650
  .d-stack {
651
651
  --stack-gap: 0;
652
652
  --stack-direction: column;
653
+ --stack-align: initial;
654
+ --stack-justify: initial;
653
655
  display: flex;
654
656
  flex-direction: var(--stack-direction);
655
657
  gap: var(--stack-gap);
658
+ align-items: var(--stack-align);
659
+ justify-content: var(--stack-justify);
656
660
  }
657
661
  .d-stack--column-reverse {
658
662
  --stack-direction: column-reverse;
663
+ --stack-align: initial;
659
664
  }
660
665
  .d-stack--row {
661
666
  --stack-direction: row;
667
+ --stack-align: center;
662
668
  }
663
669
  .d-stack--row-reverse {
664
670
  --stack-direction: row-reverse;
665
- }
666
- .d-stack--align-normal {
667
- align-items: normal;
671
+ --stack-align: center;
668
672
  }
669
673
  .d-stack--align-start {
670
- align-items: start;
674
+ --stack-align: start;
671
675
  }
672
676
  .d-stack--align-center {
673
- align-items: center;
677
+ --stack-align: center;
674
678
  }
675
679
  .d-stack--align-end {
676
- align-items: end;
680
+ --stack-align: end;
677
681
  }
678
682
  .d-stack--align-stretch {
679
- align-items: stretch;
683
+ --stack-align: stretch;
680
684
  }
681
685
  .d-stack--align-baseline {
682
- align-items: baseline;
686
+ --stack-align: baseline;
683
687
  }
684
688
  .d-stack--justify-start {
685
- justify-content: start;
689
+ --stack-justify: start;
686
690
  }
687
691
  .d-stack--justify-center {
688
- justify-content: center;
692
+ --stack-justify: center;
689
693
  }
690
694
  .d-stack--justify-end {
691
- justify-content: end;
695
+ --stack-justify: end;
692
696
  }
693
697
  .d-stack--justify-around {
694
- justify-content: space-around;
698
+ --stack-justify: space-around;
695
699
  }
696
700
  .d-stack--justify-between {
697
- justify-content: space-between;
701
+ --stack-justify: space-between;
698
702
  }
699
703
  .d-stack--justify-evenly {
700
- justify-content: space-evenly;
704
+ --stack-justify: space-evenly;
701
705
  }
702
706
  .d-stack--gap-50 {
703
707
  --stack-gap: var(--dt-space-50);
@@ -744,15 +748,19 @@ template {
744
748
  @media screen and (min-width: 480px) {
745
749
  .d-stack--sm-column {
746
750
  --stack-direction: column;
751
+ --stack-align: initial;
747
752
  }
748
753
  .d-stack--sm-column-reverse {
749
754
  --stack-direction: column-reverse;
755
+ --stack-align: initial;
750
756
  }
751
757
  .d-stack--sm-row {
752
758
  --stack-direction: row;
759
+ --stack-align: center;
753
760
  }
754
761
  .d-stack--sm-row-reverse {
755
762
  --stack-direction: row-reverse;
763
+ --stack-align: center;
756
764
  }
757
765
  .d-stack--sm-gap-50 {
758
766
  --stack-gap: var(--dt-space-50);
@@ -796,9 +804,6 @@ template {
796
804
  .d-stack--sm-gap-700 {
797
805
  --stack-gap: var(--dt-space-700);
798
806
  }
799
- .d-stack--sm-align-normal {
800
- align-items: normal;
801
- }
802
807
  .d-stack--sm-align-start {
803
808
  align-items: start;
804
809
  }
@@ -836,15 +841,19 @@ template {
836
841
  @media screen and (min-width: 640px) {
837
842
  .d-stack--md-column {
838
843
  --stack-direction: column;
844
+ --stack-align: initial;
839
845
  }
840
846
  .d-stack--md-column-reverse {
841
847
  --stack-direction: column-reverse;
848
+ --stack-align: initial;
842
849
  }
843
850
  .d-stack--md-row {
844
851
  --stack-direction: row;
852
+ --stack-align: center;
845
853
  }
846
854
  .d-stack--md-row-reverse {
847
855
  --stack-direction: row-reverse;
856
+ --stack-align: center;
848
857
  }
849
858
  .d-stack--md-gap-50 {
850
859
  --stack-gap: var(--dt-space-50);
@@ -888,9 +897,6 @@ template {
888
897
  .d-stack--md-gap-700 {
889
898
  --stack-gap: var(--dt-space-700);
890
899
  }
891
- .d-stack--md-align-normal {
892
- align-items: normal;
893
- }
894
900
  .d-stack--md-align-start {
895
901
  align-items: start;
896
902
  }
@@ -928,15 +934,19 @@ template {
928
934
  @media screen and (min-width: 980px) {
929
935
  .d-stack--lg-column {
930
936
  --stack-direction: column;
937
+ --stack-align: initial;
931
938
  }
932
939
  .d-stack--lg-column-reverse {
933
940
  --stack-direction: column-reverse;
941
+ --stack-align: initial;
934
942
  }
935
943
  .d-stack--lg-row {
936
944
  --stack-direction: row;
945
+ --stack-align: center;
937
946
  }
938
947
  .d-stack--lg-row-reverse {
939
948
  --stack-direction: row-reverse;
949
+ --stack-align: center;
940
950
  }
941
951
  .d-stack--lg-gap-50 {
942
952
  --stack-gap: var(--dt-space-50);
@@ -980,9 +990,6 @@ template {
980
990
  .d-stack--lg-gap-700 {
981
991
  --stack-gap: var(--dt-space-700);
982
992
  }
983
- .d-stack--lg-align-normal {
984
- align-items: normal;
985
- }
986
993
  .d-stack--lg-align-start {
987
994
  align-items: start;
988
995
  }
@@ -1020,15 +1027,19 @@ template {
1020
1027
  @media screen and (min-width: 1264px) {
1021
1028
  .d-stack--xl-column {
1022
1029
  --stack-direction: column;
1030
+ --stack-align: initial;
1023
1031
  }
1024
1032
  .d-stack--xl-column-reverse {
1025
1033
  --stack-direction: column-reverse;
1034
+ --stack-align: initial;
1026
1035
  }
1027
1036
  .d-stack--xl-row {
1028
1037
  --stack-direction: row;
1038
+ --stack-align: center;
1029
1039
  }
1030
1040
  .d-stack--xl-row-reverse {
1031
1041
  --stack-direction: row-reverse;
1042
+ --stack-align: center;
1032
1043
  }
1033
1044
  .d-stack--xl-gap-50 {
1034
1045
  --stack-gap: var(--dt-space-50);
@@ -1072,9 +1083,6 @@ template {
1072
1083
  .d-stack--xl-gap-700 {
1073
1084
  --stack-gap: var(--dt-space-700);
1074
1085
  }
1075
- .d-stack--xl-align-normal {
1076
- align-items: normal;
1077
- }
1078
1086
  .d-stack--xl-align-start {
1079
1087
  align-items: start;
1080
1088
  }