@dialpad/dialtone-css 8.68.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.
- package/lib/build/less/components/avatar.less +3 -0
- package/lib/build/less/components/keyboard-shortcut.less +19 -5
- package/lib/build/less/components/stack.less +116 -17
- package/lib/dist/dialtone-default-theme.css +201 -34
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +201 -34
- package/lib/dist/dialtone.min.css +1 -1
- package/package.json +3 -3
|
@@ -118,6 +118,7 @@
|
|
|
118
118
|
font-weight: var(--dt-font-weight-bold);
|
|
119
119
|
font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
|
|
120
120
|
line-height: var(--dt-font-line-height-100);
|
|
121
|
+
white-space: nowrap;
|
|
121
122
|
text-align: center;
|
|
122
123
|
background-color: var(--dt-color-surface-strong);
|
|
123
124
|
border-radius: var(--dt-size-radius-pill);
|
|
@@ -372,6 +373,7 @@
|
|
|
372
373
|
}
|
|
373
374
|
|
|
374
375
|
> .d-avatar__count {
|
|
376
|
+
padding-inline: var(--dt-space-0);
|
|
375
377
|
inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
|
|
376
378
|
}
|
|
377
379
|
}
|
|
@@ -400,6 +402,7 @@
|
|
|
400
402
|
}
|
|
401
403
|
|
|
402
404
|
> .d-avatar__count {
|
|
405
|
+
padding-inline: var(--dt-space-0);
|
|
403
406
|
inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
|
|
404
407
|
}
|
|
405
408
|
}
|
|
@@ -12,16 +12,18 @@
|
|
|
12
12
|
// ----------------------------------------------------------------------------
|
|
13
13
|
.d-keyboard-shortcut {
|
|
14
14
|
display: inline-flex;
|
|
15
|
+
gap: var(--dt-space-200);
|
|
15
16
|
align-items: center;
|
|
16
17
|
justify-content: center;
|
|
17
18
|
box-sizing: border-box;
|
|
18
|
-
padding-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
padding-inline: var(--dt-space-350);
|
|
20
|
+
font: var(--dt-typography-body-sm);
|
|
21
|
+
line-height: var(--dt-font-line-height-400);
|
|
22
|
+
min-inline-size: 1lh;
|
|
22
23
|
border: var(--dt-size-100) solid;
|
|
23
24
|
border-color: var(--dt-color-border-default);
|
|
24
25
|
border-radius: var(--dt-size-radius-300);
|
|
26
|
+
font-variant-numeric: tabular-nums;
|
|
25
27
|
|
|
26
28
|
&--inverted {
|
|
27
29
|
border-color: var(--dt-color-border-moderate-inverted);
|
|
@@ -43,9 +45,21 @@
|
|
|
43
45
|
|
|
44
46
|
&__icon,
|
|
45
47
|
&__item {
|
|
46
|
-
|
|
48
|
+
min-height: 1lh;
|
|
47
49
|
color: var(--dt-color-foreground-tertiary);
|
|
48
50
|
|
|
51
|
+
&.d-icon--plus {
|
|
52
|
+
color: var(--dt-color-foreground-muted);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.d-icon--plus {
|
|
56
|
+
color: var(--dt-color-foreground-muted);
|
|
57
|
+
|
|
58
|
+
.d-keyboard-shortcut--inverted & {
|
|
59
|
+
color: var(--dt-color-foreground-muted-inverted);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
49
63
|
&--inverted {
|
|
50
64
|
color: var(--dt-color-foreground-secondary-inverted);
|
|
51
65
|
}
|
|
@@ -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;
|
|
@@ -1138,6 +1288,7 @@ template {
|
|
|
1138
1288
|
font-weight: var(--dt-font-weight-bold);
|
|
1139
1289
|
font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
|
|
1140
1290
|
line-height: var(--dt-font-line-height-100);
|
|
1291
|
+
white-space: nowrap;
|
|
1141
1292
|
text-align: center;
|
|
1142
1293
|
background-color: var(--dt-color-surface-strong);
|
|
1143
1294
|
border-radius: var(--dt-size-radius-pill);
|
|
@@ -1293,6 +1444,7 @@ template {
|
|
|
1293
1444
|
will-change: transform;
|
|
1294
1445
|
}
|
|
1295
1446
|
.d-avatar--group-digits-2 > .d-avatar__count {
|
|
1447
|
+
padding-inline: var(--dt-space-0);
|
|
1296
1448
|
inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
|
|
1297
1449
|
}
|
|
1298
1450
|
.d-avatar--group-digits-3 {
|
|
@@ -1308,6 +1460,7 @@ template {
|
|
|
1308
1460
|
will-change: transform;
|
|
1309
1461
|
}
|
|
1310
1462
|
.d-avatar--group-digits-3 > .d-avatar__count {
|
|
1463
|
+
padding-inline: var(--dt-space-0);
|
|
1311
1464
|
inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
|
|
1312
1465
|
}
|
|
1313
1466
|
.d-badge {
|
|
@@ -3104,16 +3257,18 @@ legend .d-label--md {
|
|
|
3104
3257
|
}
|
|
3105
3258
|
.d-keyboard-shortcut {
|
|
3106
3259
|
display: inline-flex;
|
|
3260
|
+
gap: var(--dt-space-200);
|
|
3107
3261
|
align-items: center;
|
|
3108
3262
|
justify-content: center;
|
|
3109
3263
|
box-sizing: border-box;
|
|
3110
|
-
padding-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3264
|
+
padding-inline: var(--dt-space-350);
|
|
3265
|
+
font: var(--dt-typography-body-sm);
|
|
3266
|
+
line-height: var(--dt-font-line-height-400);
|
|
3267
|
+
min-inline-size: 1lh;
|
|
3114
3268
|
border: var(--dt-size-100) solid;
|
|
3115
3269
|
border-color: var(--dt-color-border-default);
|
|
3116
3270
|
border-radius: var(--dt-size-radius-300);
|
|
3271
|
+
font-variant-numeric: tabular-nums;
|
|
3117
3272
|
/* Hiding class, making content visible only to screen readers but not visually */
|
|
3118
3273
|
/* "sr" meaning "screen-reader" */
|
|
3119
3274
|
/* https://css-tricks.com/inclusively-hidden/ */
|
|
@@ -3132,9 +3287,21 @@ legend .d-label--md {
|
|
|
3132
3287
|
}
|
|
3133
3288
|
.d-keyboard-shortcut__icon,
|
|
3134
3289
|
.d-keyboard-shortcut__item {
|
|
3135
|
-
|
|
3290
|
+
min-height: 1lh;
|
|
3136
3291
|
color: var(--dt-color-foreground-tertiary);
|
|
3137
3292
|
}
|
|
3293
|
+
.d-keyboard-shortcut__icon.d-icon--plus,
|
|
3294
|
+
.d-keyboard-shortcut__item.d-icon--plus {
|
|
3295
|
+
color: var(--dt-color-foreground-muted);
|
|
3296
|
+
}
|
|
3297
|
+
.d-keyboard-shortcut__icon.d-icon--plus,
|
|
3298
|
+
.d-keyboard-shortcut__item.d-icon--plus {
|
|
3299
|
+
color: var(--dt-color-foreground-muted);
|
|
3300
|
+
}
|
|
3301
|
+
.d-keyboard-shortcut--inverted .d-keyboard-shortcut__icon.d-icon--plus,
|
|
3302
|
+
.d-keyboard-shortcut--inverted .d-keyboard-shortcut__item.d-icon--plus {
|
|
3303
|
+
color: var(--dt-color-foreground-muted-inverted);
|
|
3304
|
+
}
|
|
3138
3305
|
.d-keyboard-shortcut__icon--inverted,
|
|
3139
3306
|
.d-keyboard-shortcut__item--inverted {
|
|
3140
3307
|
color: var(--dt-color-foreground-secondary-inverted);
|