@dialpad/dialtone 6.30.1 → 6.32.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/chip.less +100 -64
- package/lib/build/less/utilities/internals.less +4 -4
- package/lib/build/svg/brand/dialpad-ai.svg +10 -0
- package/lib/build/svg/system/ai-glyph.svg +4 -0
- package/lib/dist/css/dialtone.css +208 -69
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/brand/dialpad-ai.svg +1 -0
- package/lib/dist/svg/system/ai-glyph.svg +1 -0
- package/lib/dist/vue/icons/IconAiGlyph.vue +3 -0
- package/lib/dist/vue/icons/IconDialpadAi.vue +3 -0
- package/package.json +3 -1
- package/lib/build/svg/system/vi-off.svg +0 -7
- package/lib/dist/svg/system/vi-off.svg +0 -1
- package/lib/dist/vue/icons/IconViOff.vue +0 -3
|
@@ -15,12 +15,17 @@
|
|
|
15
15
|
// $ BASE STYLE
|
|
16
16
|
// ----------------------------------------------------------------------------
|
|
17
17
|
.d-chip {
|
|
18
|
+
position: relative;
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.d-chip__label {
|
|
18
24
|
// Component CSS Vars
|
|
19
25
|
--chip--fc: var(--fc-dark);
|
|
20
26
|
--chip--bgc: var(--black-050);
|
|
21
27
|
--chip--br: var(--su102);
|
|
22
28
|
|
|
23
|
-
position: relative;
|
|
24
29
|
display: inline-flex;
|
|
25
30
|
align-items: center;
|
|
26
31
|
justify-content: center;
|
|
@@ -31,39 +36,42 @@
|
|
|
31
36
|
font-family: inherit;
|
|
32
37
|
line-height: var(--lh4);
|
|
33
38
|
background-color: var(--chip--bgc);
|
|
39
|
+
border: none;
|
|
34
40
|
border-radius: var(--chip--br);
|
|
35
41
|
transition-timing-function: var(--ttf-in-out);
|
|
36
42
|
transition-duration: 75ms;
|
|
37
43
|
transition-property: background-color;
|
|
38
44
|
|
|
39
|
-
|
|
45
|
+
// Reserves space within the chip for the close button, since the close button is
|
|
46
|
+
// not nested within the chip. Only apply if close button exists (more than one child).
|
|
47
|
+
&:not(:only-child)::after {
|
|
40
48
|
flex-shrink: 0;
|
|
41
49
|
width: calc(var(--su16) + var(--su2));
|
|
42
50
|
height: calc(var(--su16) + var(--su2));
|
|
51
|
+
content: '';
|
|
43
52
|
}
|
|
44
53
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
54
|
+
// These properties are only set if d-chip is interactive (ex: a button).
|
|
55
|
+
&:is(a),
|
|
56
|
+
&:is(button),
|
|
57
|
+
&:is([role='button']),
|
|
58
|
+
&:is([role='link']) {
|
|
59
|
+
text-decoration: none;
|
|
50
60
|
cursor: pointer;
|
|
51
61
|
|
|
52
|
-
.d-btn {
|
|
53
|
-
padding: calc(var(--su2) + var(--su1));
|
|
54
|
-
border-width: var(--su0);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
62
|
&:hover {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
63
|
+
--chip--bgc: var(--black-075);
|
|
64
|
+
|
|
65
|
+
text-decoration: none;
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
&:active {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
--chip--bgc: var(--black-100);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&:focus-visible {
|
|
73
|
+
outline: none;
|
|
74
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
67
75
|
}
|
|
68
76
|
}
|
|
69
77
|
|
|
@@ -73,38 +81,49 @@
|
|
|
73
81
|
margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
|
|
74
82
|
}
|
|
75
83
|
|
|
76
|
-
.d-svg
|
|
77
|
-
.d-btn .d-btn__icon .d-svg {
|
|
84
|
+
.d-svg {
|
|
78
85
|
width: @icon18;
|
|
79
86
|
height: @icon18;
|
|
80
87
|
}
|
|
81
88
|
}
|
|
82
89
|
|
|
83
|
-
.d-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
90
|
+
.d-chip__close {
|
|
91
|
+
.d-btn();
|
|
92
|
+
.d-btn--circle();
|
|
87
93
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
94
|
+
position: absolute;
|
|
95
|
+
right: var(--su2);
|
|
96
|
+
padding: calc(var(--su2) + var(--su1));
|
|
97
|
+
border-width: var(--su0);
|
|
91
98
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
cursor: pointer;
|
|
99
|
+
&::before {
|
|
100
|
+
position: absolute;
|
|
101
|
+
width: 2.6rem;
|
|
102
|
+
height: 2.8rem;
|
|
103
|
+
content: '';
|
|
104
|
+
}
|
|
99
105
|
|
|
100
106
|
&:hover {
|
|
101
|
-
--
|
|
107
|
+
--button--bgc: hsla(var(--black-800-hsl) ~' / ' 15%);
|
|
102
108
|
}
|
|
103
109
|
|
|
104
|
-
&:
|
|
105
|
-
|
|
106
|
-
box-shadow: var(--bs-focus-ring-muted);
|
|
110
|
+
&:active {
|
|
111
|
+
--button--bgc: hsla(var(--black-800-hsl) ~' / ' 25%);
|
|
107
112
|
}
|
|
113
|
+
|
|
114
|
+
.d-btn__icon .d-svg {
|
|
115
|
+
width: @icon18;
|
|
116
|
+
height: @icon18;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.d-chip__icon {
|
|
121
|
+
padding-right: var(--su4);
|
|
122
|
+
line-height: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.d-chip__label--active {
|
|
126
|
+
background-color: var(--black-100);
|
|
108
127
|
}
|
|
109
128
|
|
|
110
129
|
// ============================================================================
|
|
@@ -112,29 +131,24 @@
|
|
|
112
131
|
// ----------------------------------------------------------------------------
|
|
113
132
|
// $$ EXTRA SMALL
|
|
114
133
|
// ----------------------------------------------------------------------------
|
|
115
|
-
.d-
|
|
134
|
+
.d-chip__label--xs {
|
|
116
135
|
padding: var(--su2) var(--su6);
|
|
117
136
|
font-size: var(--fs12);
|
|
118
137
|
|
|
119
|
-
|
|
138
|
+
|
|
139
|
+
|
|
120
140
|
.d-svg {
|
|
121
141
|
width: @icon14;
|
|
122
142
|
height: @icon14;
|
|
123
143
|
}
|
|
124
144
|
|
|
125
|
-
|
|
145
|
+
// reserves space within the chip for the close button, since the close button is
|
|
146
|
+
// not nested within the chip.
|
|
147
|
+
&::after {
|
|
148
|
+
flex-shrink: 0;
|
|
126
149
|
width: var(--su12);
|
|
127
150
|
height: var(--su12);
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
.d-chip-btn-container {
|
|
131
|
-
top: calc(var(--sun1) + var(--sun2));
|
|
132
|
-
right: var(--sun2);
|
|
133
|
-
padding: var(--su4);
|
|
134
|
-
|
|
135
|
-
.d-btn {
|
|
136
|
-
padding: var(--su1);
|
|
137
|
-
}
|
|
151
|
+
content: '';
|
|
138
152
|
}
|
|
139
153
|
|
|
140
154
|
.d-avatar {
|
|
@@ -145,31 +159,39 @@
|
|
|
145
159
|
}
|
|
146
160
|
}
|
|
147
161
|
|
|
162
|
+
.d-chip__close--xs {
|
|
163
|
+
padding: var(--su1);
|
|
164
|
+
|
|
165
|
+
// Clickable area for the close button.
|
|
166
|
+
&::before {
|
|
167
|
+
width: var(--su24);
|
|
168
|
+
height: var(--su24);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.d-btn__icon .d-svg {
|
|
172
|
+
width: @icon14;
|
|
173
|
+
height: @icon14;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
148
177
|
// $$ SMALL
|
|
149
178
|
// ----------------------------------------------------------------------------
|
|
150
|
-
.d-
|
|
179
|
+
.d-chip__label--sm {
|
|
151
180
|
padding: var(--su2) var(--su8);
|
|
152
181
|
font-size: var(--fs16);
|
|
153
182
|
|
|
154
|
-
.d-btn .d-btn__icon .d-svg,
|
|
155
183
|
.d-svg {
|
|
156
184
|
width: @icon16;
|
|
157
185
|
height: @icon16;
|
|
158
186
|
}
|
|
159
187
|
|
|
160
|
-
|
|
188
|
+
// reserves space within the chip for the close button, since the close button is
|
|
189
|
+
// not nested within the chip.
|
|
190
|
+
&::after {
|
|
191
|
+
flex-shrink: 0;
|
|
161
192
|
width: calc(var(--su12) + var(--su2));
|
|
162
193
|
height: calc(var(--su12) + var(--su2));
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
.d-chip-btn-container {
|
|
166
|
-
top: var(--sun1);
|
|
167
|
-
right: var(--su0);
|
|
168
|
-
padding: var(--su2);
|
|
169
|
-
|
|
170
|
-
.d-btn {
|
|
171
|
-
padding: var(--su2);
|
|
172
|
-
}
|
|
194
|
+
content: '';
|
|
173
195
|
}
|
|
174
196
|
|
|
175
197
|
.d-avatar {
|
|
@@ -179,3 +201,17 @@
|
|
|
179
201
|
margin-left: var(--sun6);
|
|
180
202
|
}
|
|
181
203
|
}
|
|
204
|
+
|
|
205
|
+
.d-chip__close--sm {
|
|
206
|
+
padding: var(--su2);
|
|
207
|
+
|
|
208
|
+
&::before {
|
|
209
|
+
width: var(--su24);
|
|
210
|
+
height: var(--su24);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.d-btn__icon .d-svg {
|
|
214
|
+
width: @icon16;
|
|
215
|
+
height: @icon16;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
#d-internal-config {
|
|
15
15
|
// Do we want to generate font-face CSS?
|
|
16
16
|
@generate-font-face: true;
|
|
17
|
+
|
|
18
|
+
// Path of the fonts that Dialtone provides
|
|
19
|
+
@define-font-path: '../../fonts/';
|
|
17
20
|
}
|
|
18
21
|
|
|
19
22
|
// ============================================================================
|
|
@@ -378,15 +381,12 @@
|
|
|
378
381
|
#font-face(@type, @name, @style: normal) {
|
|
379
382
|
#d-internal-config();
|
|
380
383
|
|
|
381
|
-
// Path of the fonts that Dialtone provides
|
|
382
|
-
@define-font-path: '../../fonts/';
|
|
383
|
-
|
|
384
384
|
if((@generate-font-face = true), each(@type, {
|
|
385
385
|
@font-face {
|
|
386
386
|
font-style: @style;
|
|
387
387
|
font-weight: @key;
|
|
388
388
|
font-family: @name;
|
|
389
|
-
src: url("
|
|
389
|
+
src: url("@{define-font-path}@{value}.woff2") format("woff2");
|
|
390
390
|
};
|
|
391
391
|
}));
|
|
392
392
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.7002 7.69319C21.6942 7.69319 22.5 6.88738 22.5 5.89338C22.5 4.89937 21.6942 4.09357 20.7002 4.09357C19.7062 4.09357 18.9004 4.89937 18.9004 5.89338C18.9004 6.88738 19.7062 7.69319 20.7002 7.69319Z" fill="#F40FB9"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.18478 7.27565C8.77699 7.27565 8.07496 7.6641 7.70978 8.85633L7.70906 8.8587L4.25039 20.0099C4.02027 20.7519 3.23223 21.1668 2.49027 20.9367C1.74831 20.7066 1.33338 19.9185 1.56351 19.1766L5.01998 8.03244C5.02024 8.0316 5.0205 8.03076 5.02075 8.02991C5.58305 6.19696 7.05661 4.46249 9.18478 4.46249C11.3123 4.46249 12.7837 6.19329 13.3469 8.02343C13.3471 8.02399 13.3473 8.02455 13.3475 8.02512L16.01 16.6088L16.0105 16.6105C16.376 17.7994 17.0767 18.1867 17.4842 18.1867C18.4836 18.1867 19.2935 17.3767 19.2935 16.3774V10.5006C19.2935 9.72376 19.9233 9.09401 20.7001 9.09401C21.4769 9.09401 22.1067 9.72376 22.1067 10.5006V16.3774C22.1067 18.9304 20.0373 20.9998 17.4842 20.9998C15.3589 20.9998 13.8857 19.2698 13.3222 17.4392C13.322 17.4385 13.3218 17.4379 13.3216 17.4372L10.659 8.85352L10.6585 8.85184C10.2928 7.6624 9.59353 7.27565 9.18478 7.27565Z" fill="url(#paint0_linear_3116_21)"/>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient id="paint0_linear_3116_21" x1="11.8035" y1="5.86906" x2="11.8035" y2="19.5932" gradientUnits="userSpaceOnUse">
|
|
6
|
+
<stop stop-color="#F40FB9"/>
|
|
7
|
+
<stop offset="1" stop-color="#7C52FF"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.7002 7.69319C21.6942 7.69319 22.5 6.88739 22.5 5.89338C22.5 4.89938 21.6942 4.09357 20.7002 4.09357C19.7062 4.09357 18.9004 4.89938 18.9004 5.89338C18.9004 6.88739 19.7062 7.69319 20.7002 7.69319Z" fill="black"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.18478 7.27565C8.77699 7.27565 8.07496 7.66411 7.70978 8.85633L7.70906 8.8587L4.25039 20.0099C4.02027 20.7519 3.23223 21.1668 2.49027 20.9367C1.74831 20.7066 1.33338 19.9185 1.56351 19.1766L5.01998 8.03245L5.02075 8.02992C5.58305 6.19697 7.05661 4.4625 9.18478 4.4625C11.3123 4.4625 12.7837 6.1933 13.3469 8.02344L13.3475 8.02512L16.01 16.6088L16.0105 16.6105C16.376 17.7994 17.0767 18.1867 17.4842 18.1867C18.4836 18.1867 19.2935 17.3768 19.2935 16.3774V10.5006C19.2935 9.72376 19.9233 9.09402 20.7001 9.09402C21.4769 9.09402 22.1067 9.72376 22.1067 10.5006V16.3774C22.1067 18.9304 20.0373 20.9998 17.4842 20.9998C15.3589 20.9998 13.8857 19.2698 13.3222 17.4392L13.3216 17.4372L10.659 8.85352L10.6585 8.85185C10.2928 7.66241 9.59353 7.27565 9.18478 7.27565Z" fill="black"/>
|
|
4
|
+
</svg>
|