@dialpad/dialtone-css 8.69.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.
- package/lib/build/less/components/stack.less +120 -18
- package/lib/dist/dialtone-default-theme.css +188 -30
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +188 -30
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/tokens-docs.json +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
// TABLE OF CONTENTS
|
|
9
9
|
// • BASE STYLE
|
|
10
10
|
// • VISUAL STYLES
|
|
11
|
+
// • ALIGNMENT
|
|
12
|
+
// • JUSTIFY
|
|
11
13
|
// • SIZES
|
|
12
14
|
// • RESPONSIVE STYLE
|
|
13
15
|
|
|
@@ -17,28 +19,22 @@
|
|
|
17
19
|
.direction-options() {
|
|
18
20
|
&-column {
|
|
19
21
|
--stack-direction: column;
|
|
20
|
-
|
|
21
|
-
justify-content: flex-start;
|
|
22
|
+
--stack-align: initial;
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
&-column-reverse {
|
|
25
26
|
--stack-direction: column-reverse;
|
|
26
|
-
|
|
27
|
-
justify-content: flex-start;
|
|
27
|
+
--stack-align: initial;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&-row {
|
|
31
31
|
--stack-direction: row;
|
|
32
|
-
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: normal;
|
|
32
|
+
--stack-align: center;
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
&-row-reverse {
|
|
38
36
|
--stack-direction: row-reverse;
|
|
39
|
-
|
|
40
|
-
align-items: center;
|
|
41
|
-
justify-content: normal;
|
|
37
|
+
--stack-align: center;
|
|
42
38
|
}
|
|
43
39
|
}
|
|
44
40
|
|
|
@@ -100,14 +96,65 @@
|
|
|
100
96
|
}
|
|
101
97
|
}
|
|
102
98
|
|
|
99
|
+
.align-options() {
|
|
100
|
+
&-align-start {
|
|
101
|
+
align-items: start;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&-align-center {
|
|
105
|
+
align-items: center;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&-align-end {
|
|
109
|
+
align-items: end;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&-align-stretch {
|
|
113
|
+
align-items: stretch;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&-align-baseline {
|
|
117
|
+
align-items: baseline;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.justify-options() {
|
|
122
|
+
&-justify-start {
|
|
123
|
+
justify-content: start;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&-justify-center {
|
|
127
|
+
justify-content: center;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&-justify-end {
|
|
131
|
+
justify-content: end;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&-justify-around {
|
|
135
|
+
justify-content: space-around;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&-justify-between {
|
|
139
|
+
justify-content: space-between;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&-justify-evenly {
|
|
143
|
+
justify-content: space-evenly;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
103
147
|
.d-stack {
|
|
104
148
|
--stack-gap: 0;
|
|
105
149
|
--stack-direction: column;
|
|
150
|
+
--stack-align: initial;
|
|
151
|
+
--stack-justify: initial;
|
|
106
152
|
|
|
107
153
|
display: flex;
|
|
108
154
|
flex-direction: var(--stack-direction);
|
|
109
155
|
gap: var(--stack-gap);
|
|
110
|
-
|
|
156
|
+
align-items: var(--stack-align);
|
|
157
|
+
justify-content: var(--stack-justify);
|
|
111
158
|
}
|
|
112
159
|
|
|
113
160
|
// ============================================================================
|
|
@@ -117,8 +164,7 @@
|
|
|
117
164
|
// ----------------------------------------------------------------------------
|
|
118
165
|
.d-stack--column-reverse {
|
|
119
166
|
--stack-direction: column-reverse;
|
|
120
|
-
|
|
121
|
-
justify-content: flex-start;
|
|
167
|
+
--stack-align: initial;
|
|
122
168
|
}
|
|
123
169
|
|
|
124
170
|
// ----------------------------------------------------------------------------
|
|
@@ -126,9 +172,7 @@
|
|
|
126
172
|
// ----------------------------------------------------------------------------
|
|
127
173
|
.d-stack--row {
|
|
128
174
|
--stack-direction: row;
|
|
129
|
-
|
|
130
|
-
align-items: center;
|
|
131
|
-
justify-content: normal;
|
|
175
|
+
--stack-align: center;
|
|
132
176
|
}
|
|
133
177
|
|
|
134
178
|
// ----------------------------------------------------------------------------
|
|
@@ -136,9 +180,59 @@
|
|
|
136
180
|
// ----------------------------------------------------------------------------
|
|
137
181
|
.d-stack--row-reverse {
|
|
138
182
|
--stack-direction: row-reverse;
|
|
183
|
+
--stack-align: center;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// ============================================================================
|
|
187
|
+
// $ ALIGNMENT
|
|
188
|
+
// ----------------------------------------------------------------------------
|
|
189
|
+
|
|
190
|
+
.d-stack--align-start {
|
|
191
|
+
--stack-align: start;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.d-stack--align-center {
|
|
195
|
+
--stack-align: center;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.d-stack--align-end {
|
|
199
|
+
--stack-align: end;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.d-stack--align-stretch {
|
|
203
|
+
--stack-align: stretch;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.d-stack--align-baseline {
|
|
207
|
+
--stack-align: baseline;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// ============================================================================
|
|
211
|
+
// $ JUSTIFY
|
|
212
|
+
// ----------------------------------------------------------------------------
|
|
213
|
+
|
|
214
|
+
.d-stack--justify-start {
|
|
215
|
+
--stack-justify: start;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.d-stack--justify-center {
|
|
219
|
+
--stack-justify: center;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.d-stack--justify-end {
|
|
223
|
+
--stack-justify: end;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.d-stack--justify-around {
|
|
227
|
+
--stack-justify: space-around;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.d-stack--justify-between {
|
|
231
|
+
--stack-justify: space-between;
|
|
232
|
+
}
|
|
139
233
|
|
|
140
|
-
|
|
141
|
-
justify
|
|
234
|
+
.d-stack--justify-evenly {
|
|
235
|
+
--stack-justify: space-evenly;
|
|
142
236
|
}
|
|
143
237
|
|
|
144
238
|
// ============================================================================
|
|
@@ -168,6 +262,8 @@
|
|
|
168
262
|
@media screen and (min-width: 480px) {
|
|
169
263
|
.direction-options();
|
|
170
264
|
.gap-options();
|
|
265
|
+
.align-options();
|
|
266
|
+
.justify-options();
|
|
171
267
|
}
|
|
172
268
|
}
|
|
173
269
|
|
|
@@ -177,6 +273,8 @@
|
|
|
177
273
|
@media screen and (min-width: 640px) {
|
|
178
274
|
.direction-options();
|
|
179
275
|
.gap-options();
|
|
276
|
+
.align-options();
|
|
277
|
+
.justify-options();
|
|
180
278
|
}
|
|
181
279
|
}
|
|
182
280
|
|
|
@@ -186,6 +284,8 @@
|
|
|
186
284
|
@media screen and (min-width: 980px) {
|
|
187
285
|
.direction-options();
|
|
188
286
|
.gap-options();
|
|
287
|
+
.align-options();
|
|
288
|
+
.justify-options();
|
|
189
289
|
}
|
|
190
290
|
}
|
|
191
291
|
|
|
@@ -195,5 +295,7 @@
|
|
|
195
295
|
@media screen and (min-width: 1264px) {
|
|
196
296
|
.direction-options();
|
|
197
297
|
.gap-options();
|
|
298
|
+
.align-options();
|
|
299
|
+
.justify-options();
|
|
198
300
|
}
|
|
199
301
|
}
|
|
@@ -650,24 +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);
|
|
656
|
-
|
|
658
|
+
align-items: var(--stack-align);
|
|
659
|
+
justify-content: var(--stack-justify);
|
|
657
660
|
}
|
|
658
661
|
.d-stack--column-reverse {
|
|
659
662
|
--stack-direction: column-reverse;
|
|
660
|
-
|
|
663
|
+
--stack-align: initial;
|
|
661
664
|
}
|
|
662
665
|
.d-stack--row {
|
|
663
666
|
--stack-direction: row;
|
|
664
|
-
align
|
|
665
|
-
justify-content: normal;
|
|
667
|
+
--stack-align: center;
|
|
666
668
|
}
|
|
667
669
|
.d-stack--row-reverse {
|
|
668
670
|
--stack-direction: row-reverse;
|
|
669
|
-
align
|
|
670
|
-
|
|
671
|
+
--stack-align: center;
|
|
672
|
+
}
|
|
673
|
+
.d-stack--align-start {
|
|
674
|
+
--stack-align: start;
|
|
675
|
+
}
|
|
676
|
+
.d-stack--align-center {
|
|
677
|
+
--stack-align: center;
|
|
678
|
+
}
|
|
679
|
+
.d-stack--align-end {
|
|
680
|
+
--stack-align: end;
|
|
681
|
+
}
|
|
682
|
+
.d-stack--align-stretch {
|
|
683
|
+
--stack-align: stretch;
|
|
684
|
+
}
|
|
685
|
+
.d-stack--align-baseline {
|
|
686
|
+
--stack-align: baseline;
|
|
687
|
+
}
|
|
688
|
+
.d-stack--justify-start {
|
|
689
|
+
--stack-justify: start;
|
|
690
|
+
}
|
|
691
|
+
.d-stack--justify-center {
|
|
692
|
+
--stack-justify: center;
|
|
693
|
+
}
|
|
694
|
+
.d-stack--justify-end {
|
|
695
|
+
--stack-justify: end;
|
|
696
|
+
}
|
|
697
|
+
.d-stack--justify-around {
|
|
698
|
+
--stack-justify: space-around;
|
|
699
|
+
}
|
|
700
|
+
.d-stack--justify-between {
|
|
701
|
+
--stack-justify: space-between;
|
|
702
|
+
}
|
|
703
|
+
.d-stack--justify-evenly {
|
|
704
|
+
--stack-justify: space-evenly;
|
|
671
705
|
}
|
|
672
706
|
.d-stack--gap-50 {
|
|
673
707
|
--stack-gap: var(--dt-space-50);
|
|
@@ -714,21 +748,19 @@ template {
|
|
|
714
748
|
@media screen and (min-width: 480px) {
|
|
715
749
|
.d-stack--sm-column {
|
|
716
750
|
--stack-direction: column;
|
|
717
|
-
|
|
751
|
+
--stack-align: initial;
|
|
718
752
|
}
|
|
719
753
|
.d-stack--sm-column-reverse {
|
|
720
754
|
--stack-direction: column-reverse;
|
|
721
|
-
|
|
755
|
+
--stack-align: initial;
|
|
722
756
|
}
|
|
723
757
|
.d-stack--sm-row {
|
|
724
758
|
--stack-direction: row;
|
|
725
|
-
align
|
|
726
|
-
justify-content: normal;
|
|
759
|
+
--stack-align: center;
|
|
727
760
|
}
|
|
728
761
|
.d-stack--sm-row-reverse {
|
|
729
762
|
--stack-direction: row-reverse;
|
|
730
|
-
align
|
|
731
|
-
justify-content: normal;
|
|
763
|
+
--stack-align: center;
|
|
732
764
|
}
|
|
733
765
|
.d-stack--sm-gap-50 {
|
|
734
766
|
--stack-gap: var(--dt-space-50);
|
|
@@ -772,25 +804,56 @@ template {
|
|
|
772
804
|
.d-stack--sm-gap-700 {
|
|
773
805
|
--stack-gap: var(--dt-space-700);
|
|
774
806
|
}
|
|
807
|
+
.d-stack--sm-align-start {
|
|
808
|
+
align-items: start;
|
|
809
|
+
}
|
|
810
|
+
.d-stack--sm-align-center {
|
|
811
|
+
align-items: center;
|
|
812
|
+
}
|
|
813
|
+
.d-stack--sm-align-end {
|
|
814
|
+
align-items: end;
|
|
815
|
+
}
|
|
816
|
+
.d-stack--sm-align-stretch {
|
|
817
|
+
align-items: stretch;
|
|
818
|
+
}
|
|
819
|
+
.d-stack--sm-align-baseline {
|
|
820
|
+
align-items: baseline;
|
|
821
|
+
}
|
|
822
|
+
.d-stack--sm-justify-start {
|
|
823
|
+
justify-content: start;
|
|
824
|
+
}
|
|
825
|
+
.d-stack--sm-justify-center {
|
|
826
|
+
justify-content: center;
|
|
827
|
+
}
|
|
828
|
+
.d-stack--sm-justify-end {
|
|
829
|
+
justify-content: end;
|
|
830
|
+
}
|
|
831
|
+
.d-stack--sm-justify-around {
|
|
832
|
+
justify-content: space-around;
|
|
833
|
+
}
|
|
834
|
+
.d-stack--sm-justify-between {
|
|
835
|
+
justify-content: space-between;
|
|
836
|
+
}
|
|
837
|
+
.d-stack--sm-justify-evenly {
|
|
838
|
+
justify-content: space-evenly;
|
|
839
|
+
}
|
|
775
840
|
}
|
|
776
841
|
@media screen and (min-width: 640px) {
|
|
777
842
|
.d-stack--md-column {
|
|
778
843
|
--stack-direction: column;
|
|
779
|
-
|
|
844
|
+
--stack-align: initial;
|
|
780
845
|
}
|
|
781
846
|
.d-stack--md-column-reverse {
|
|
782
847
|
--stack-direction: column-reverse;
|
|
783
|
-
|
|
848
|
+
--stack-align: initial;
|
|
784
849
|
}
|
|
785
850
|
.d-stack--md-row {
|
|
786
851
|
--stack-direction: row;
|
|
787
|
-
align
|
|
788
|
-
justify-content: normal;
|
|
852
|
+
--stack-align: center;
|
|
789
853
|
}
|
|
790
854
|
.d-stack--md-row-reverse {
|
|
791
855
|
--stack-direction: row-reverse;
|
|
792
|
-
align
|
|
793
|
-
justify-content: normal;
|
|
856
|
+
--stack-align: center;
|
|
794
857
|
}
|
|
795
858
|
.d-stack--md-gap-50 {
|
|
796
859
|
--stack-gap: var(--dt-space-50);
|
|
@@ -834,25 +897,56 @@ template {
|
|
|
834
897
|
.d-stack--md-gap-700 {
|
|
835
898
|
--stack-gap: var(--dt-space-700);
|
|
836
899
|
}
|
|
900
|
+
.d-stack--md-align-start {
|
|
901
|
+
align-items: start;
|
|
902
|
+
}
|
|
903
|
+
.d-stack--md-align-center {
|
|
904
|
+
align-items: center;
|
|
905
|
+
}
|
|
906
|
+
.d-stack--md-align-end {
|
|
907
|
+
align-items: end;
|
|
908
|
+
}
|
|
909
|
+
.d-stack--md-align-stretch {
|
|
910
|
+
align-items: stretch;
|
|
911
|
+
}
|
|
912
|
+
.d-stack--md-align-baseline {
|
|
913
|
+
align-items: baseline;
|
|
914
|
+
}
|
|
915
|
+
.d-stack--md-justify-start {
|
|
916
|
+
justify-content: start;
|
|
917
|
+
}
|
|
918
|
+
.d-stack--md-justify-center {
|
|
919
|
+
justify-content: center;
|
|
920
|
+
}
|
|
921
|
+
.d-stack--md-justify-end {
|
|
922
|
+
justify-content: end;
|
|
923
|
+
}
|
|
924
|
+
.d-stack--md-justify-around {
|
|
925
|
+
justify-content: space-around;
|
|
926
|
+
}
|
|
927
|
+
.d-stack--md-justify-between {
|
|
928
|
+
justify-content: space-between;
|
|
929
|
+
}
|
|
930
|
+
.d-stack--md-justify-evenly {
|
|
931
|
+
justify-content: space-evenly;
|
|
932
|
+
}
|
|
837
933
|
}
|
|
838
934
|
@media screen and (min-width: 980px) {
|
|
839
935
|
.d-stack--lg-column {
|
|
840
936
|
--stack-direction: column;
|
|
841
|
-
|
|
937
|
+
--stack-align: initial;
|
|
842
938
|
}
|
|
843
939
|
.d-stack--lg-column-reverse {
|
|
844
940
|
--stack-direction: column-reverse;
|
|
845
|
-
|
|
941
|
+
--stack-align: initial;
|
|
846
942
|
}
|
|
847
943
|
.d-stack--lg-row {
|
|
848
944
|
--stack-direction: row;
|
|
849
|
-
align
|
|
850
|
-
justify-content: normal;
|
|
945
|
+
--stack-align: center;
|
|
851
946
|
}
|
|
852
947
|
.d-stack--lg-row-reverse {
|
|
853
948
|
--stack-direction: row-reverse;
|
|
854
|
-
align
|
|
855
|
-
justify-content: normal;
|
|
949
|
+
--stack-align: center;
|
|
856
950
|
}
|
|
857
951
|
.d-stack--lg-gap-50 {
|
|
858
952
|
--stack-gap: var(--dt-space-50);
|
|
@@ -896,25 +990,56 @@ template {
|
|
|
896
990
|
.d-stack--lg-gap-700 {
|
|
897
991
|
--stack-gap: var(--dt-space-700);
|
|
898
992
|
}
|
|
993
|
+
.d-stack--lg-align-start {
|
|
994
|
+
align-items: start;
|
|
995
|
+
}
|
|
996
|
+
.d-stack--lg-align-center {
|
|
997
|
+
align-items: center;
|
|
998
|
+
}
|
|
999
|
+
.d-stack--lg-align-end {
|
|
1000
|
+
align-items: end;
|
|
1001
|
+
}
|
|
1002
|
+
.d-stack--lg-align-stretch {
|
|
1003
|
+
align-items: stretch;
|
|
1004
|
+
}
|
|
1005
|
+
.d-stack--lg-align-baseline {
|
|
1006
|
+
align-items: baseline;
|
|
1007
|
+
}
|
|
1008
|
+
.d-stack--lg-justify-start {
|
|
1009
|
+
justify-content: start;
|
|
1010
|
+
}
|
|
1011
|
+
.d-stack--lg-justify-center {
|
|
1012
|
+
justify-content: center;
|
|
1013
|
+
}
|
|
1014
|
+
.d-stack--lg-justify-end {
|
|
1015
|
+
justify-content: end;
|
|
1016
|
+
}
|
|
1017
|
+
.d-stack--lg-justify-around {
|
|
1018
|
+
justify-content: space-around;
|
|
1019
|
+
}
|
|
1020
|
+
.d-stack--lg-justify-between {
|
|
1021
|
+
justify-content: space-between;
|
|
1022
|
+
}
|
|
1023
|
+
.d-stack--lg-justify-evenly {
|
|
1024
|
+
justify-content: space-evenly;
|
|
1025
|
+
}
|
|
899
1026
|
}
|
|
900
1027
|
@media screen and (min-width: 1264px) {
|
|
901
1028
|
.d-stack--xl-column {
|
|
902
1029
|
--stack-direction: column;
|
|
903
|
-
|
|
1030
|
+
--stack-align: initial;
|
|
904
1031
|
}
|
|
905
1032
|
.d-stack--xl-column-reverse {
|
|
906
1033
|
--stack-direction: column-reverse;
|
|
907
|
-
|
|
1034
|
+
--stack-align: initial;
|
|
908
1035
|
}
|
|
909
1036
|
.d-stack--xl-row {
|
|
910
1037
|
--stack-direction: row;
|
|
911
|
-
align
|
|
912
|
-
justify-content: normal;
|
|
1038
|
+
--stack-align: center;
|
|
913
1039
|
}
|
|
914
1040
|
.d-stack--xl-row-reverse {
|
|
915
1041
|
--stack-direction: row-reverse;
|
|
916
|
-
align
|
|
917
|
-
justify-content: normal;
|
|
1042
|
+
--stack-align: center;
|
|
918
1043
|
}
|
|
919
1044
|
.d-stack--xl-gap-50 {
|
|
920
1045
|
--stack-gap: var(--dt-space-50);
|
|
@@ -958,6 +1083,39 @@ template {
|
|
|
958
1083
|
.d-stack--xl-gap-700 {
|
|
959
1084
|
--stack-gap: var(--dt-space-700);
|
|
960
1085
|
}
|
|
1086
|
+
.d-stack--xl-align-start {
|
|
1087
|
+
align-items: start;
|
|
1088
|
+
}
|
|
1089
|
+
.d-stack--xl-align-center {
|
|
1090
|
+
align-items: center;
|
|
1091
|
+
}
|
|
1092
|
+
.d-stack--xl-align-end {
|
|
1093
|
+
align-items: end;
|
|
1094
|
+
}
|
|
1095
|
+
.d-stack--xl-align-stretch {
|
|
1096
|
+
align-items: stretch;
|
|
1097
|
+
}
|
|
1098
|
+
.d-stack--xl-align-baseline {
|
|
1099
|
+
align-items: baseline;
|
|
1100
|
+
}
|
|
1101
|
+
.d-stack--xl-justify-start {
|
|
1102
|
+
justify-content: start;
|
|
1103
|
+
}
|
|
1104
|
+
.d-stack--xl-justify-center {
|
|
1105
|
+
justify-content: center;
|
|
1106
|
+
}
|
|
1107
|
+
.d-stack--xl-justify-end {
|
|
1108
|
+
justify-content: end;
|
|
1109
|
+
}
|
|
1110
|
+
.d-stack--xl-justify-around {
|
|
1111
|
+
justify-content: space-around;
|
|
1112
|
+
}
|
|
1113
|
+
.d-stack--xl-justify-between {
|
|
1114
|
+
justify-content: space-between;
|
|
1115
|
+
}
|
|
1116
|
+
.d-stack--xl-justify-evenly {
|
|
1117
|
+
justify-content: space-evenly;
|
|
1118
|
+
}
|
|
961
1119
|
}
|
|
962
1120
|
.d-item-layout {
|
|
963
1121
|
display: flex;
|