@dialpad/dialtone-css 8.69.0 → 8.70.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.
|
@@ -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,18 @@
|
|
|
17
19
|
.direction-options() {
|
|
18
20
|
&-column {
|
|
19
21
|
--stack-direction: column;
|
|
20
|
-
|
|
21
|
-
justify-content: flex-start;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&-column-reverse {
|
|
25
25
|
--stack-direction: column-reverse;
|
|
26
|
-
|
|
27
|
-
justify-content: flex-start;
|
|
28
26
|
}
|
|
29
27
|
|
|
30
28
|
&-row {
|
|
31
29
|
--stack-direction: row;
|
|
32
|
-
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: normal;
|
|
35
30
|
}
|
|
36
31
|
|
|
37
32
|
&-row-reverse {
|
|
38
33
|
--stack-direction: row-reverse;
|
|
39
|
-
|
|
40
|
-
align-items: center;
|
|
41
|
-
justify-content: normal;
|
|
42
34
|
}
|
|
43
35
|
}
|
|
44
36
|
|
|
@@ -100,6 +92,58 @@
|
|
|
100
92
|
}
|
|
101
93
|
}
|
|
102
94
|
|
|
95
|
+
.align-options() {
|
|
96
|
+
&-align-normal {
|
|
97
|
+
align-items: normal;
|
|
98
|
+
}
|
|
99
|
+
|
|
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;
|
|
@@ -107,7 +151,6 @@
|
|
|
107
151
|
display: flex;
|
|
108
152
|
flex-direction: var(--stack-direction);
|
|
109
153
|
gap: var(--stack-gap);
|
|
110
|
-
justify-content: flex-start;
|
|
111
154
|
}
|
|
112
155
|
|
|
113
156
|
// ============================================================================
|
|
@@ -117,8 +160,6 @@
|
|
|
117
160
|
// ----------------------------------------------------------------------------
|
|
118
161
|
.d-stack--column-reverse {
|
|
119
162
|
--stack-direction: column-reverse;
|
|
120
|
-
|
|
121
|
-
justify-content: flex-start;
|
|
122
163
|
}
|
|
123
164
|
|
|
124
165
|
// ----------------------------------------------------------------------------
|
|
@@ -126,9 +167,6 @@
|
|
|
126
167
|
// ----------------------------------------------------------------------------
|
|
127
168
|
.d-stack--row {
|
|
128
169
|
--stack-direction: row;
|
|
129
|
-
|
|
130
|
-
align-items: center;
|
|
131
|
-
justify-content: normal;
|
|
132
170
|
}
|
|
133
171
|
|
|
134
172
|
// ----------------------------------------------------------------------------
|
|
@@ -136,9 +174,62 @@
|
|
|
136
174
|
// ----------------------------------------------------------------------------
|
|
137
175
|
.d-stack--row-reverse {
|
|
138
176
|
--stack-direction: row-reverse;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// ============================================================================
|
|
180
|
+
// $ ALIGNMENT
|
|
181
|
+
// ----------------------------------------------------------------------------
|
|
182
|
+
|
|
183
|
+
.d-stack--align-normal {
|
|
184
|
+
align-items: normal;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.d-stack--align-start {
|
|
188
|
+
align-items: start;
|
|
189
|
+
}
|
|
139
190
|
|
|
191
|
+
.d-stack--align-center {
|
|
140
192
|
align-items: center;
|
|
141
|
-
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.d-stack--align-end {
|
|
196
|
+
align-items: end;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.d-stack--align-stretch {
|
|
200
|
+
align-items: stretch;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.d-stack--align-baseline {
|
|
204
|
+
align-items: baseline;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// ============================================================================
|
|
208
|
+
// $ JUSTIFY
|
|
209
|
+
// ----------------------------------------------------------------------------
|
|
210
|
+
|
|
211
|
+
.d-stack--justify-start {
|
|
212
|
+
justify-content: start;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.d-stack--justify-center {
|
|
216
|
+
justify-content: center;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.d-stack--justify-end {
|
|
220
|
+
justify-content: end;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.d-stack--justify-around {
|
|
224
|
+
justify-content: space-around;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.d-stack--justify-between {
|
|
228
|
+
justify-content: space-between;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.d-stack--justify-evenly {
|
|
232
|
+
justify-content: space-evenly;
|
|
142
233
|
}
|
|
143
234
|
|
|
144
235
|
// ============================================================================
|
|
@@ -168,6 +259,8 @@
|
|
|
168
259
|
@media screen and (min-width: 480px) {
|
|
169
260
|
.direction-options();
|
|
170
261
|
.gap-options();
|
|
262
|
+
.align-options();
|
|
263
|
+
.justify-options();
|
|
171
264
|
}
|
|
172
265
|
}
|
|
173
266
|
|
|
@@ -177,6 +270,8 @@
|
|
|
177
270
|
@media screen and (min-width: 640px) {
|
|
178
271
|
.direction-options();
|
|
179
272
|
.gap-options();
|
|
273
|
+
.align-options();
|
|
274
|
+
.justify-options();
|
|
180
275
|
}
|
|
181
276
|
}
|
|
182
277
|
|
|
@@ -186,6 +281,8 @@
|
|
|
186
281
|
@media screen and (min-width: 980px) {
|
|
187
282
|
.direction-options();
|
|
188
283
|
.gap-options();
|
|
284
|
+
.align-options();
|
|
285
|
+
.justify-options();
|
|
189
286
|
}
|
|
190
287
|
}
|
|
191
288
|
|
|
@@ -195,5 +292,7 @@
|
|
|
195
292
|
@media screen and (min-width: 1264px) {
|
|
196
293
|
.direction-options();
|
|
197
294
|
.gap-options();
|
|
295
|
+
.align-options();
|
|
296
|
+
.justify-options();
|
|
198
297
|
}
|
|
199
298
|
}
|
|
@@ -653,21 +653,51 @@ template {
|
|
|
653
653
|
display: flex;
|
|
654
654
|
flex-direction: var(--stack-direction);
|
|
655
655
|
gap: var(--stack-gap);
|
|
656
|
-
justify-content: flex-start;
|
|
657
656
|
}
|
|
658
657
|
.d-stack--column-reverse {
|
|
659
658
|
--stack-direction: column-reverse;
|
|
660
|
-
justify-content: flex-start;
|
|
661
659
|
}
|
|
662
660
|
.d-stack--row {
|
|
663
661
|
--stack-direction: row;
|
|
664
|
-
align-items: center;
|
|
665
|
-
justify-content: normal;
|
|
666
662
|
}
|
|
667
663
|
.d-stack--row-reverse {
|
|
668
664
|
--stack-direction: row-reverse;
|
|
665
|
+
}
|
|
666
|
+
.d-stack--align-normal {
|
|
667
|
+
align-items: normal;
|
|
668
|
+
}
|
|
669
|
+
.d-stack--align-start {
|
|
670
|
+
align-items: start;
|
|
671
|
+
}
|
|
672
|
+
.d-stack--align-center {
|
|
669
673
|
align-items: center;
|
|
670
|
-
|
|
674
|
+
}
|
|
675
|
+
.d-stack--align-end {
|
|
676
|
+
align-items: end;
|
|
677
|
+
}
|
|
678
|
+
.d-stack--align-stretch {
|
|
679
|
+
align-items: stretch;
|
|
680
|
+
}
|
|
681
|
+
.d-stack--align-baseline {
|
|
682
|
+
align-items: baseline;
|
|
683
|
+
}
|
|
684
|
+
.d-stack--justify-start {
|
|
685
|
+
justify-content: start;
|
|
686
|
+
}
|
|
687
|
+
.d-stack--justify-center {
|
|
688
|
+
justify-content: center;
|
|
689
|
+
}
|
|
690
|
+
.d-stack--justify-end {
|
|
691
|
+
justify-content: end;
|
|
692
|
+
}
|
|
693
|
+
.d-stack--justify-around {
|
|
694
|
+
justify-content: space-around;
|
|
695
|
+
}
|
|
696
|
+
.d-stack--justify-between {
|
|
697
|
+
justify-content: space-between;
|
|
698
|
+
}
|
|
699
|
+
.d-stack--justify-evenly {
|
|
700
|
+
justify-content: space-evenly;
|
|
671
701
|
}
|
|
672
702
|
.d-stack--gap-50 {
|
|
673
703
|
--stack-gap: var(--dt-space-50);
|
|
@@ -714,21 +744,15 @@ template {
|
|
|
714
744
|
@media screen and (min-width: 480px) {
|
|
715
745
|
.d-stack--sm-column {
|
|
716
746
|
--stack-direction: column;
|
|
717
|
-
justify-content: flex-start;
|
|
718
747
|
}
|
|
719
748
|
.d-stack--sm-column-reverse {
|
|
720
749
|
--stack-direction: column-reverse;
|
|
721
|
-
justify-content: flex-start;
|
|
722
750
|
}
|
|
723
751
|
.d-stack--sm-row {
|
|
724
752
|
--stack-direction: row;
|
|
725
|
-
align-items: center;
|
|
726
|
-
justify-content: normal;
|
|
727
753
|
}
|
|
728
754
|
.d-stack--sm-row-reverse {
|
|
729
755
|
--stack-direction: row-reverse;
|
|
730
|
-
align-items: center;
|
|
731
|
-
justify-content: normal;
|
|
732
756
|
}
|
|
733
757
|
.d-stack--sm-gap-50 {
|
|
734
758
|
--stack-gap: var(--dt-space-50);
|
|
@@ -772,25 +796,55 @@ template {
|
|
|
772
796
|
.d-stack--sm-gap-700 {
|
|
773
797
|
--stack-gap: var(--dt-space-700);
|
|
774
798
|
}
|
|
799
|
+
.d-stack--sm-align-normal {
|
|
800
|
+
align-items: normal;
|
|
801
|
+
}
|
|
802
|
+
.d-stack--sm-align-start {
|
|
803
|
+
align-items: start;
|
|
804
|
+
}
|
|
805
|
+
.d-stack--sm-align-center {
|
|
806
|
+
align-items: center;
|
|
807
|
+
}
|
|
808
|
+
.d-stack--sm-align-end {
|
|
809
|
+
align-items: end;
|
|
810
|
+
}
|
|
811
|
+
.d-stack--sm-align-stretch {
|
|
812
|
+
align-items: stretch;
|
|
813
|
+
}
|
|
814
|
+
.d-stack--sm-align-baseline {
|
|
815
|
+
align-items: baseline;
|
|
816
|
+
}
|
|
817
|
+
.d-stack--sm-justify-start {
|
|
818
|
+
justify-content: start;
|
|
819
|
+
}
|
|
820
|
+
.d-stack--sm-justify-center {
|
|
821
|
+
justify-content: center;
|
|
822
|
+
}
|
|
823
|
+
.d-stack--sm-justify-end {
|
|
824
|
+
justify-content: end;
|
|
825
|
+
}
|
|
826
|
+
.d-stack--sm-justify-around {
|
|
827
|
+
justify-content: space-around;
|
|
828
|
+
}
|
|
829
|
+
.d-stack--sm-justify-between {
|
|
830
|
+
justify-content: space-between;
|
|
831
|
+
}
|
|
832
|
+
.d-stack--sm-justify-evenly {
|
|
833
|
+
justify-content: space-evenly;
|
|
834
|
+
}
|
|
775
835
|
}
|
|
776
836
|
@media screen and (min-width: 640px) {
|
|
777
837
|
.d-stack--md-column {
|
|
778
838
|
--stack-direction: column;
|
|
779
|
-
justify-content: flex-start;
|
|
780
839
|
}
|
|
781
840
|
.d-stack--md-column-reverse {
|
|
782
841
|
--stack-direction: column-reverse;
|
|
783
|
-
justify-content: flex-start;
|
|
784
842
|
}
|
|
785
843
|
.d-stack--md-row {
|
|
786
844
|
--stack-direction: row;
|
|
787
|
-
align-items: center;
|
|
788
|
-
justify-content: normal;
|
|
789
845
|
}
|
|
790
846
|
.d-stack--md-row-reverse {
|
|
791
847
|
--stack-direction: row-reverse;
|
|
792
|
-
align-items: center;
|
|
793
|
-
justify-content: normal;
|
|
794
848
|
}
|
|
795
849
|
.d-stack--md-gap-50 {
|
|
796
850
|
--stack-gap: var(--dt-space-50);
|
|
@@ -834,25 +888,55 @@ template {
|
|
|
834
888
|
.d-stack--md-gap-700 {
|
|
835
889
|
--stack-gap: var(--dt-space-700);
|
|
836
890
|
}
|
|
891
|
+
.d-stack--md-align-normal {
|
|
892
|
+
align-items: normal;
|
|
893
|
+
}
|
|
894
|
+
.d-stack--md-align-start {
|
|
895
|
+
align-items: start;
|
|
896
|
+
}
|
|
897
|
+
.d-stack--md-align-center {
|
|
898
|
+
align-items: center;
|
|
899
|
+
}
|
|
900
|
+
.d-stack--md-align-end {
|
|
901
|
+
align-items: end;
|
|
902
|
+
}
|
|
903
|
+
.d-stack--md-align-stretch {
|
|
904
|
+
align-items: stretch;
|
|
905
|
+
}
|
|
906
|
+
.d-stack--md-align-baseline {
|
|
907
|
+
align-items: baseline;
|
|
908
|
+
}
|
|
909
|
+
.d-stack--md-justify-start {
|
|
910
|
+
justify-content: start;
|
|
911
|
+
}
|
|
912
|
+
.d-stack--md-justify-center {
|
|
913
|
+
justify-content: center;
|
|
914
|
+
}
|
|
915
|
+
.d-stack--md-justify-end {
|
|
916
|
+
justify-content: end;
|
|
917
|
+
}
|
|
918
|
+
.d-stack--md-justify-around {
|
|
919
|
+
justify-content: space-around;
|
|
920
|
+
}
|
|
921
|
+
.d-stack--md-justify-between {
|
|
922
|
+
justify-content: space-between;
|
|
923
|
+
}
|
|
924
|
+
.d-stack--md-justify-evenly {
|
|
925
|
+
justify-content: space-evenly;
|
|
926
|
+
}
|
|
837
927
|
}
|
|
838
928
|
@media screen and (min-width: 980px) {
|
|
839
929
|
.d-stack--lg-column {
|
|
840
930
|
--stack-direction: column;
|
|
841
|
-
justify-content: flex-start;
|
|
842
931
|
}
|
|
843
932
|
.d-stack--lg-column-reverse {
|
|
844
933
|
--stack-direction: column-reverse;
|
|
845
|
-
justify-content: flex-start;
|
|
846
934
|
}
|
|
847
935
|
.d-stack--lg-row {
|
|
848
936
|
--stack-direction: row;
|
|
849
|
-
align-items: center;
|
|
850
|
-
justify-content: normal;
|
|
851
937
|
}
|
|
852
938
|
.d-stack--lg-row-reverse {
|
|
853
939
|
--stack-direction: row-reverse;
|
|
854
|
-
align-items: center;
|
|
855
|
-
justify-content: normal;
|
|
856
940
|
}
|
|
857
941
|
.d-stack--lg-gap-50 {
|
|
858
942
|
--stack-gap: var(--dt-space-50);
|
|
@@ -896,25 +980,55 @@ template {
|
|
|
896
980
|
.d-stack--lg-gap-700 {
|
|
897
981
|
--stack-gap: var(--dt-space-700);
|
|
898
982
|
}
|
|
983
|
+
.d-stack--lg-align-normal {
|
|
984
|
+
align-items: normal;
|
|
985
|
+
}
|
|
986
|
+
.d-stack--lg-align-start {
|
|
987
|
+
align-items: start;
|
|
988
|
+
}
|
|
989
|
+
.d-stack--lg-align-center {
|
|
990
|
+
align-items: center;
|
|
991
|
+
}
|
|
992
|
+
.d-stack--lg-align-end {
|
|
993
|
+
align-items: end;
|
|
994
|
+
}
|
|
995
|
+
.d-stack--lg-align-stretch {
|
|
996
|
+
align-items: stretch;
|
|
997
|
+
}
|
|
998
|
+
.d-stack--lg-align-baseline {
|
|
999
|
+
align-items: baseline;
|
|
1000
|
+
}
|
|
1001
|
+
.d-stack--lg-justify-start {
|
|
1002
|
+
justify-content: start;
|
|
1003
|
+
}
|
|
1004
|
+
.d-stack--lg-justify-center {
|
|
1005
|
+
justify-content: center;
|
|
1006
|
+
}
|
|
1007
|
+
.d-stack--lg-justify-end {
|
|
1008
|
+
justify-content: end;
|
|
1009
|
+
}
|
|
1010
|
+
.d-stack--lg-justify-around {
|
|
1011
|
+
justify-content: space-around;
|
|
1012
|
+
}
|
|
1013
|
+
.d-stack--lg-justify-between {
|
|
1014
|
+
justify-content: space-between;
|
|
1015
|
+
}
|
|
1016
|
+
.d-stack--lg-justify-evenly {
|
|
1017
|
+
justify-content: space-evenly;
|
|
1018
|
+
}
|
|
899
1019
|
}
|
|
900
1020
|
@media screen and (min-width: 1264px) {
|
|
901
1021
|
.d-stack--xl-column {
|
|
902
1022
|
--stack-direction: column;
|
|
903
|
-
justify-content: flex-start;
|
|
904
1023
|
}
|
|
905
1024
|
.d-stack--xl-column-reverse {
|
|
906
1025
|
--stack-direction: column-reverse;
|
|
907
|
-
justify-content: flex-start;
|
|
908
1026
|
}
|
|
909
1027
|
.d-stack--xl-row {
|
|
910
1028
|
--stack-direction: row;
|
|
911
|
-
align-items: center;
|
|
912
|
-
justify-content: normal;
|
|
913
1029
|
}
|
|
914
1030
|
.d-stack--xl-row-reverse {
|
|
915
1031
|
--stack-direction: row-reverse;
|
|
916
|
-
align-items: center;
|
|
917
|
-
justify-content: normal;
|
|
918
1032
|
}
|
|
919
1033
|
.d-stack--xl-gap-50 {
|
|
920
1034
|
--stack-gap: var(--dt-space-50);
|
|
@@ -958,6 +1072,42 @@ template {
|
|
|
958
1072
|
.d-stack--xl-gap-700 {
|
|
959
1073
|
--stack-gap: var(--dt-space-700);
|
|
960
1074
|
}
|
|
1075
|
+
.d-stack--xl-align-normal {
|
|
1076
|
+
align-items: normal;
|
|
1077
|
+
}
|
|
1078
|
+
.d-stack--xl-align-start {
|
|
1079
|
+
align-items: start;
|
|
1080
|
+
}
|
|
1081
|
+
.d-stack--xl-align-center {
|
|
1082
|
+
align-items: center;
|
|
1083
|
+
}
|
|
1084
|
+
.d-stack--xl-align-end {
|
|
1085
|
+
align-items: end;
|
|
1086
|
+
}
|
|
1087
|
+
.d-stack--xl-align-stretch {
|
|
1088
|
+
align-items: stretch;
|
|
1089
|
+
}
|
|
1090
|
+
.d-stack--xl-align-baseline {
|
|
1091
|
+
align-items: baseline;
|
|
1092
|
+
}
|
|
1093
|
+
.d-stack--xl-justify-start {
|
|
1094
|
+
justify-content: start;
|
|
1095
|
+
}
|
|
1096
|
+
.d-stack--xl-justify-center {
|
|
1097
|
+
justify-content: center;
|
|
1098
|
+
}
|
|
1099
|
+
.d-stack--xl-justify-end {
|
|
1100
|
+
justify-content: end;
|
|
1101
|
+
}
|
|
1102
|
+
.d-stack--xl-justify-around {
|
|
1103
|
+
justify-content: space-around;
|
|
1104
|
+
}
|
|
1105
|
+
.d-stack--xl-justify-between {
|
|
1106
|
+
justify-content: space-between;
|
|
1107
|
+
}
|
|
1108
|
+
.d-stack--xl-justify-evenly {
|
|
1109
|
+
justify-content: space-evenly;
|
|
1110
|
+
}
|
|
961
1111
|
}
|
|
962
1112
|
.d-item-layout {
|
|
963
1113
|
display: flex;
|