@dialpad/dialtone 6.31.0 → 6.32.2
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/dialtone-globals.less +1 -0
- package/lib/build/less/themes/default.less +1 -0
- package/lib/build/less/utilities/internals.less +4 -4
- package/lib/dist/css/dialtone.css +210 -69
- package/lib/dist/css/dialtone.min.css +1 -1
- package/package.json +1 -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
|
+
}
|
|
@@ -29,6 +29,7 @@ body {
|
|
|
29
29
|
color: var(--base--text-color);
|
|
30
30
|
font-size: var(--base--font-size); // [2]
|
|
31
31
|
font-family: var(--base--font-family);
|
|
32
|
+
font-feature-settings: var(--base--font-feature-settings);
|
|
32
33
|
line-height: var(--base--line-height);
|
|
33
34
|
background-color: var(--base--background-color);
|
|
34
35
|
font-kerning: normal;
|
|
@@ -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
|
}
|