@dialpad/dialtone-css 8.81.0-next.11 → 8.81.0-next.12
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/emoji-picker.less +12 -4
- package/lib/dist/dialtone-default-theme.css +5 -4
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone-docs.json +1 -1
- package/lib/dist/dialtone.css +5 -4
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/no-layers/dialtone-default-theme.css +5 -4
- package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
- package/lib/dist/no-layers/dialtone.css +5 -4
- package/lib/dist/no-layers/dialtone.min.css +1 -1
- package/package.json +1 -1
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
// !important to default value to override popover dialog box-sizing: border-box style
|
|
39
39
|
box-sizing: content-box !important;
|
|
40
40
|
inline-size: auto;
|
|
41
|
-
|
|
41
|
+
// 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
|
|
42
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
42
43
|
margin: 0 var(--dt-spacing-200);
|
|
43
44
|
}
|
|
44
45
|
|
|
@@ -59,6 +60,10 @@
|
|
|
59
60
|
|
|
60
61
|
&__tabset-list {
|
|
61
62
|
gap: var(--dt-spacing-0);
|
|
63
|
+
// The tabset sits flush above the emoji list, so it does not need the
|
|
64
|
+
// standalone tablist's underline gap that would otherwise add height here.
|
|
65
|
+
--tablist-padding-bottom: var(--dt-spacing-0);
|
|
66
|
+
|
|
62
67
|
|
|
63
68
|
&::after {
|
|
64
69
|
background-color: var(--dt-color-neutral-transparent) !important;
|
|
@@ -127,7 +132,8 @@
|
|
|
127
132
|
}
|
|
128
133
|
|
|
129
134
|
&__selector {
|
|
130
|
-
|
|
135
|
+
// 297px keeps the list tall enough to show a full grid of emoji rows
|
|
136
|
+
min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
131
137
|
|
|
132
138
|
p {
|
|
133
139
|
padding-block-end: var(--dt-spacing-50);
|
|
@@ -149,7 +155,8 @@
|
|
|
149
155
|
&__list {
|
|
150
156
|
position: relative;
|
|
151
157
|
block-size: 100%;
|
|
152
|
-
|
|
158
|
+
// 297px keeps the list tall enough to show a full grid of emoji rows
|
|
159
|
+
max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
153
160
|
padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
|
|
154
161
|
overflow: hidden auto;
|
|
155
162
|
|
|
@@ -173,7 +180,8 @@
|
|
|
173
180
|
flex-wrap: wrap;
|
|
174
181
|
gap: var(--dt-spacing-25);
|
|
175
182
|
inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
|
|
176
|
-
|
|
183
|
+
// 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
|
|
184
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
177
185
|
// We use this margin left to align the emoji list with the tabset label
|
|
178
186
|
margin-inline-start: var(--dt-spacing-75-negative);
|
|
179
187
|
padding-block-start: var(--dt-spacing-50);
|
|
@@ -10794,7 +10794,7 @@
|
|
|
10794
10794
|
.d-emoji-picker__alignment {
|
|
10795
10795
|
box-sizing: content-box !important;
|
|
10796
10796
|
inline-size: auto;
|
|
10797
|
-
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-
|
|
10797
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
10798
10798
|
margin: 0 var(--dt-spacing-200);
|
|
10799
10799
|
}
|
|
10800
10800
|
.d-emoji-picker--footer {
|
|
@@ -10813,6 +10813,7 @@
|
|
|
10813
10813
|
}
|
|
10814
10814
|
.d-emoji-picker__tabset-list {
|
|
10815
10815
|
gap: var(--dt-spacing-0);
|
|
10816
|
+
--tablist-padding-bottom: var(--dt-spacing-0);
|
|
10816
10817
|
}
|
|
10817
10818
|
.d-emoji-picker__tabset-list::after {
|
|
10818
10819
|
background-color: var(--dt-color-neutral-transparent) !important;
|
|
@@ -10867,7 +10868,7 @@
|
|
|
10867
10868
|
border-color: var(--dt-color-border-subtle);
|
|
10868
10869
|
}
|
|
10869
10870
|
.d-emoji-picker__selector {
|
|
10870
|
-
min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
|
|
10871
|
+
min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
10871
10872
|
}
|
|
10872
10873
|
.d-emoji-picker__selector p {
|
|
10873
10874
|
-webkit-padding-after: var(--dt-spacing-50);
|
|
@@ -10887,7 +10888,7 @@
|
|
|
10887
10888
|
.d-emoji-picker__list {
|
|
10888
10889
|
position: relative;
|
|
10889
10890
|
block-size: 100%;
|
|
10890
|
-
max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
|
|
10891
|
+
max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
10891
10892
|
-webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
|
|
10892
10893
|
padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
|
|
10893
10894
|
overflow: hidden auto;
|
|
@@ -10909,7 +10910,7 @@
|
|
|
10909
10910
|
flex-wrap: wrap;
|
|
10910
10911
|
gap: var(--dt-spacing-25);
|
|
10911
10912
|
inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
|
|
10912
|
-
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-
|
|
10913
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
10913
10914
|
-webkit-margin-start: var(--dt-spacing-75-negative);
|
|
10914
10915
|
margin-inline-start: var(--dt-spacing-75-negative);
|
|
10915
10916
|
-webkit-padding-before: var(--dt-spacing-50);
|