@dialpad/dialtone-css 8.68.0 → 8.69.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/dist/dialtone-default-theme.css +22 -5
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +22 -5
- 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
|
}
|
|
@@ -1138,6 +1138,7 @@ template {
|
|
|
1138
1138
|
font-weight: var(--dt-font-weight-bold);
|
|
1139
1139
|
font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
|
|
1140
1140
|
line-height: var(--dt-font-line-height-100);
|
|
1141
|
+
white-space: nowrap;
|
|
1141
1142
|
text-align: center;
|
|
1142
1143
|
background-color: var(--dt-color-surface-strong);
|
|
1143
1144
|
border-radius: var(--dt-size-radius-pill);
|
|
@@ -1293,6 +1294,7 @@ template {
|
|
|
1293
1294
|
will-change: transform;
|
|
1294
1295
|
}
|
|
1295
1296
|
.d-avatar--group-digits-2 > .d-avatar__count {
|
|
1297
|
+
padding-inline: var(--dt-space-0);
|
|
1296
1298
|
inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
|
|
1297
1299
|
}
|
|
1298
1300
|
.d-avatar--group-digits-3 {
|
|
@@ -1308,6 +1310,7 @@ template {
|
|
|
1308
1310
|
will-change: transform;
|
|
1309
1311
|
}
|
|
1310
1312
|
.d-avatar--group-digits-3 > .d-avatar__count {
|
|
1313
|
+
padding-inline: var(--dt-space-0);
|
|
1311
1314
|
inline-size: calc(var(--dt-size-550) + var(--dt-size-200));
|
|
1312
1315
|
}
|
|
1313
1316
|
.d-badge {
|
|
@@ -3104,16 +3107,18 @@ legend .d-label--md {
|
|
|
3104
3107
|
}
|
|
3105
3108
|
.d-keyboard-shortcut {
|
|
3106
3109
|
display: inline-flex;
|
|
3110
|
+
gap: var(--dt-space-200);
|
|
3107
3111
|
align-items: center;
|
|
3108
3112
|
justify-content: center;
|
|
3109
3113
|
box-sizing: border-box;
|
|
3110
|
-
padding-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
+
padding-inline: var(--dt-space-350);
|
|
3115
|
+
font: var(--dt-typography-body-sm);
|
|
3116
|
+
line-height: var(--dt-font-line-height-400);
|
|
3117
|
+
min-inline-size: 1lh;
|
|
3114
3118
|
border: var(--dt-size-100) solid;
|
|
3115
3119
|
border-color: var(--dt-color-border-default);
|
|
3116
3120
|
border-radius: var(--dt-size-radius-300);
|
|
3121
|
+
font-variant-numeric: tabular-nums;
|
|
3117
3122
|
/* Hiding class, making content visible only to screen readers but not visually */
|
|
3118
3123
|
/* "sr" meaning "screen-reader" */
|
|
3119
3124
|
/* https://css-tricks.com/inclusively-hidden/ */
|
|
@@ -3132,9 +3137,21 @@ legend .d-label--md {
|
|
|
3132
3137
|
}
|
|
3133
3138
|
.d-keyboard-shortcut__icon,
|
|
3134
3139
|
.d-keyboard-shortcut__item {
|
|
3135
|
-
|
|
3140
|
+
min-height: 1lh;
|
|
3136
3141
|
color: var(--dt-color-foreground-tertiary);
|
|
3137
3142
|
}
|
|
3143
|
+
.d-keyboard-shortcut__icon.d-icon--plus,
|
|
3144
|
+
.d-keyboard-shortcut__item.d-icon--plus {
|
|
3145
|
+
color: var(--dt-color-foreground-muted);
|
|
3146
|
+
}
|
|
3147
|
+
.d-keyboard-shortcut__icon.d-icon--plus,
|
|
3148
|
+
.d-keyboard-shortcut__item.d-icon--plus {
|
|
3149
|
+
color: var(--dt-color-foreground-muted);
|
|
3150
|
+
}
|
|
3151
|
+
.d-keyboard-shortcut--inverted .d-keyboard-shortcut__icon.d-icon--plus,
|
|
3152
|
+
.d-keyboard-shortcut--inverted .d-keyboard-shortcut__item.d-icon--plus {
|
|
3153
|
+
color: var(--dt-color-foreground-muted-inverted);
|
|
3154
|
+
}
|
|
3138
3155
|
.d-keyboard-shortcut__icon--inverted,
|
|
3139
3156
|
.d-keyboard-shortcut__item--inverted {
|
|
3140
3157
|
color: var(--dt-color-foreground-secondary-inverted);
|