@dialpad/dialtone 6.30.0 → 6.32.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/chip.less +100 -64
- package/lib/build/less/variables/typography.less +1 -1
- 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 +198 -59
- 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 +5 -2
- 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
|
+
}
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
@ff-custom: @define-ff-custom-name, @ff-sans;
|
|
64
64
|
@ff-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
65
|
-
@ff-mono: @define-ff-mono-name,
|
|
65
|
+
@ff-mono: @define-ff-mono-name, RobotoMono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
|
66
66
|
@ff-marketing: @define-ff-marketing-name, @ff-sans;
|
|
67
67
|
@ff-marketing-semi-expanded: @define-ff-marketing-semi-expanded-name, @ff-sans;
|
|
68
68
|
@ff-marketing-expanded: @define-ff-marketing-expanded-name, @ff-sans;
|
|
@@ -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>
|
|
@@ -1058,10 +1058,14 @@ body {
|
|
|
1058
1058
|
justify-content: space-between;
|
|
1059
1059
|
}
|
|
1060
1060
|
.d-chip {
|
|
1061
|
+
position: relative;
|
|
1062
|
+
display: inline-flex;
|
|
1063
|
+
align-items: center;
|
|
1064
|
+
}
|
|
1065
|
+
.d-chip__label {
|
|
1061
1066
|
--chip--fc: var(--fc-dark);
|
|
1062
1067
|
--chip--bgc: var(--black-050);
|
|
1063
1068
|
--chip--br: var(--su102);
|
|
1064
|
-
position: relative;
|
|
1065
1069
|
display: inline-flex;
|
|
1066
1070
|
align-items: center;
|
|
1067
1071
|
justify-content: center;
|
|
@@ -1072,115 +1076,250 @@ body {
|
|
|
1072
1076
|
font-family: inherit;
|
|
1073
1077
|
line-height: var(--lh4);
|
|
1074
1078
|
background-color: var(--chip--bgc);
|
|
1079
|
+
border: none;
|
|
1075
1080
|
border-radius: var(--chip--br);
|
|
1076
1081
|
transition-timing-function: var(--ttf-in-out);
|
|
1077
1082
|
transition-duration: 75ms;
|
|
1078
1083
|
transition-property: background-color;
|
|
1079
1084
|
}
|
|
1080
|
-
.d-
|
|
1085
|
+
.d-chip__label:not(:only-child)::after {
|
|
1081
1086
|
flex-shrink: 0;
|
|
1082
1087
|
width: calc(var(--su16) + var(--su2));
|
|
1083
1088
|
height: calc(var(--su16) + var(--su2));
|
|
1089
|
+
content: '';
|
|
1084
1090
|
}
|
|
1085
|
-
.d-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1091
|
+
.d-chip__label:is(a),
|
|
1092
|
+
.d-chip__label:is(button),
|
|
1093
|
+
.d-chip__label:is([role='button']),
|
|
1094
|
+
.d-chip__label:is([role='link']) {
|
|
1095
|
+
text-decoration: none;
|
|
1090
1096
|
cursor: pointer;
|
|
1091
1097
|
}
|
|
1092
|
-
.d-
|
|
1093
|
-
|
|
1094
|
-
|
|
1098
|
+
.d-chip__label:is(a):hover,
|
|
1099
|
+
.d-chip__label:is(button):hover,
|
|
1100
|
+
.d-chip__label:is([role='button']):hover,
|
|
1101
|
+
.d-chip__label:is([role='link']):hover {
|
|
1102
|
+
--chip--bgc: var(--black-075);
|
|
1103
|
+
text-decoration: none;
|
|
1095
1104
|
}
|
|
1096
|
-
.d-
|
|
1097
|
-
|
|
1105
|
+
.d-chip__label:is(a):active,
|
|
1106
|
+
.d-chip__label:is(button):active,
|
|
1107
|
+
.d-chip__label:is([role='button']):active,
|
|
1108
|
+
.d-chip__label:is([role='link']):active {
|
|
1109
|
+
--chip--bgc: var(--black-100);
|
|
1098
1110
|
}
|
|
1099
|
-
.d-
|
|
1100
|
-
|
|
1111
|
+
.d-chip__label:is(a).focus-visible,
|
|
1112
|
+
.d-chip__label:is(button).focus-visible,
|
|
1113
|
+
.d-chip__label:is([role='button']).focus-visible,
|
|
1114
|
+
.d-chip__label:is([role='link']).focus-visible {
|
|
1115
|
+
outline: none;
|
|
1116
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
1117
|
+
}
|
|
1118
|
+
.d-chip__label:is(a):focus-visible,
|
|
1119
|
+
.d-chip__label:is(button):focus-visible,
|
|
1120
|
+
.d-chip__label:is([role='button']):focus-visible,
|
|
1121
|
+
.d-chip__label:is([role='link']):focus-visible {
|
|
1122
|
+
outline: none;
|
|
1123
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
1101
1124
|
}
|
|
1102
|
-
.d-
|
|
1125
|
+
.d-chip__label .d-avatar {
|
|
1103
1126
|
--avatar--size: var(--su24);
|
|
1104
1127
|
margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
|
|
1105
1128
|
}
|
|
1106
|
-
.d-
|
|
1107
|
-
.d-chip .d-btn .d-btn__icon .d-svg {
|
|
1129
|
+
.d-chip__label .d-svg {
|
|
1108
1130
|
width: 1.8rem;
|
|
1109
1131
|
height: 1.8rem;
|
|
1110
1132
|
}
|
|
1111
|
-
.d-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1133
|
+
.d-chip__close {
|
|
1134
|
+
--button--fc: var(--primary-color);
|
|
1135
|
+
--button--bgc: transparent;
|
|
1136
|
+
--button--bc: transparent;
|
|
1137
|
+
--button--br: var(--base--corner-radius);
|
|
1138
|
+
position: relative;
|
|
1139
|
+
display: inline-flex;
|
|
1140
|
+
align-items: center;
|
|
1141
|
+
justify-content: center;
|
|
1142
|
+
box-sizing: border-box;
|
|
1143
|
+
padding: calc(var(--su8) - var(--su1));
|
|
1144
|
+
color: var(--button--fc);
|
|
1145
|
+
font-size: var(--fs16);
|
|
1146
|
+
font-family: inherit;
|
|
1147
|
+
line-height: var(--lh4);
|
|
1148
|
+
text-transform: inherit;
|
|
1149
|
+
text-decoration: none;
|
|
1150
|
+
vertical-align: middle;
|
|
1151
|
+
background-color: var(--button--bgc);
|
|
1152
|
+
border: 0.1rem solid var(--button--bc);
|
|
1153
|
+
border-radius: var(--button--br);
|
|
1154
|
+
box-shadow: var(--button--bs);
|
|
1119
1155
|
cursor: pointer;
|
|
1156
|
+
transition-timing-function: var(--ttf-in-out);
|
|
1157
|
+
transition-duration: 75ms;
|
|
1158
|
+
transition-property: background-color, border, box-shadow;
|
|
1159
|
+
user-select: none;
|
|
1160
|
+
fill: currentColor;
|
|
1161
|
+
--button--fc: var(--black-800);
|
|
1162
|
+
--button--br: var(--br-circle);
|
|
1163
|
+
padding: calc(var(--su8) + var(--su1));
|
|
1164
|
+
transition-duration: 150ms;
|
|
1165
|
+
position: absolute;
|
|
1166
|
+
right: var(--su2);
|
|
1167
|
+
padding: calc(var(--su2) + var(--su1));
|
|
1168
|
+
border-width: var(--su0);
|
|
1120
1169
|
}
|
|
1121
|
-
.d-
|
|
1122
|
-
--
|
|
1170
|
+
.d-chip__close:hover {
|
|
1171
|
+
--button--fc: var(--primary-color-hover);
|
|
1172
|
+
--button--bgc: hsla(var(--primary-color-hsl) / 3%);
|
|
1123
1173
|
}
|
|
1124
|
-
.d-
|
|
1174
|
+
.d-chip__close:active,
|
|
1175
|
+
.d-chip__close.d-btn--active,
|
|
1176
|
+
.d-chip__close.d-btn--active:active {
|
|
1177
|
+
--button--fc: var(--primary-color-hover);
|
|
1178
|
+
--button--bgc: hsla(var(--primary-color-hsl) / 9%);
|
|
1179
|
+
}
|
|
1180
|
+
.d-chip__close.focus-visible {
|
|
1125
1181
|
outline: none;
|
|
1126
|
-
box-shadow: var(--bs-focus-ring
|
|
1182
|
+
box-shadow: var(--bs-focus-ring);
|
|
1127
1183
|
}
|
|
1128
|
-
.d-
|
|
1184
|
+
.d-chip__close:focus-visible {
|
|
1129
1185
|
outline: none;
|
|
1130
|
-
box-shadow: var(--bs-focus-ring
|
|
1186
|
+
box-shadow: var(--bs-focus-ring);
|
|
1187
|
+
}
|
|
1188
|
+
.d-chip__close[disabled] {
|
|
1189
|
+
color: var(--black-400);
|
|
1190
|
+
background-color: var(--black-100);
|
|
1191
|
+
border-color: transparent;
|
|
1192
|
+
cursor: not-allowed;
|
|
1193
|
+
transition: none;
|
|
1194
|
+
}
|
|
1195
|
+
.d-chip__close .d-btn__icon .d-svg {
|
|
1196
|
+
width: 1.6rem;
|
|
1197
|
+
height: 1.6rem;
|
|
1198
|
+
}
|
|
1199
|
+
.d-chip__close:hover {
|
|
1200
|
+
--button--fc: var(--muted-color-hover);
|
|
1201
|
+
--button--bgc: hsla(var(--black-800-hsl) / 3%);
|
|
1202
|
+
}
|
|
1203
|
+
.d-chip__close:active,
|
|
1204
|
+
.d-chip__close.d-btn--active,
|
|
1205
|
+
.d-chip__close.d-btn--active:active {
|
|
1206
|
+
--button--fc: var(--muted-color-hover);
|
|
1207
|
+
--button--bgc: hsla(var(--black-800-hsl) / 9%);
|
|
1208
|
+
}
|
|
1209
|
+
.d-chip__close.focus-visible {
|
|
1210
|
+
box-shadow: var(--bs-focus-ring-circle);
|
|
1211
|
+
}
|
|
1212
|
+
.d-chip__close:focus-visible {
|
|
1213
|
+
box-shadow: var(--bs-focus-ring-circle);
|
|
1214
|
+
}
|
|
1215
|
+
.d-chip__close .d-btn__icon {
|
|
1216
|
+
margin: unset;
|
|
1217
|
+
}
|
|
1218
|
+
.d-chip__close.d-btn__label {
|
|
1219
|
+
display: none;
|
|
1220
|
+
}
|
|
1221
|
+
.d-chip__close.d-btn--outlined {
|
|
1222
|
+
--button--bc: var(--black-700);
|
|
1223
|
+
}
|
|
1224
|
+
.d-chip__close.d-btn--xs {
|
|
1225
|
+
padding: calc(var(--su8) - var(--su1));
|
|
1226
|
+
--button--br: var(--br-circle);
|
|
1227
|
+
}
|
|
1228
|
+
.d-chip__close.d-btn--sm {
|
|
1229
|
+
padding: var(--su8);
|
|
1230
|
+
--button--br: var(--br-circle);
|
|
1231
|
+
}
|
|
1232
|
+
.d-chip__close.d-btn--lg {
|
|
1233
|
+
padding: calc(var(--su12) + var(--su1));
|
|
1234
|
+
--button--br: var(--br-circle);
|
|
1235
|
+
}
|
|
1236
|
+
.d-chip__close.d-btn--xl {
|
|
1237
|
+
padding: calc(var(--su16) - var(--su1));
|
|
1238
|
+
--button--br: var(--br-circle);
|
|
1239
|
+
}
|
|
1240
|
+
.d-chip__close::before {
|
|
1241
|
+
position: absolute;
|
|
1242
|
+
width: 2.6rem;
|
|
1243
|
+
height: 2.8rem;
|
|
1244
|
+
content: '';
|
|
1245
|
+
}
|
|
1246
|
+
.d-chip__close:hover {
|
|
1247
|
+
--button--bgc: hsla(var(--black-800-hsl) / 15%);
|
|
1248
|
+
}
|
|
1249
|
+
.d-chip__close:active {
|
|
1250
|
+
--button--bgc: hsla(var(--black-800-hsl) / 25%);
|
|
1131
1251
|
}
|
|
1132
|
-
.d-
|
|
1252
|
+
.d-chip__close .d-btn__icon .d-svg {
|
|
1253
|
+
width: 1.8rem;
|
|
1254
|
+
height: 1.8rem;
|
|
1255
|
+
}
|
|
1256
|
+
.d-chip__icon {
|
|
1257
|
+
padding-right: var(--su4);
|
|
1258
|
+
line-height: 0;
|
|
1259
|
+
}
|
|
1260
|
+
.d-chip__label--active {
|
|
1261
|
+
background-color: var(--black-100);
|
|
1262
|
+
}
|
|
1263
|
+
.d-chip__label--xs {
|
|
1133
1264
|
padding: var(--su2) var(--su6);
|
|
1134
1265
|
font-size: var(--fs12);
|
|
1135
1266
|
}
|
|
1136
|
-
.d-
|
|
1137
|
-
.d-chip--xs .d-svg {
|
|
1267
|
+
.d-chip__label--xs .d-svg {
|
|
1138
1268
|
width: 1.4rem;
|
|
1139
1269
|
height: 1.4rem;
|
|
1140
1270
|
}
|
|
1141
|
-
.d-
|
|
1271
|
+
.d-chip__label--xs::after {
|
|
1272
|
+
flex-shrink: 0;
|
|
1142
1273
|
width: var(--su12);
|
|
1143
1274
|
height: var(--su12);
|
|
1275
|
+
content: '';
|
|
1144
1276
|
}
|
|
1145
|
-
.d-
|
|
1146
|
-
top: calc(var(--sun1) + var(--sun2));
|
|
1147
|
-
right: var(--sun2);
|
|
1148
|
-
padding: var(--su4);
|
|
1149
|
-
}
|
|
1150
|
-
.d-chip--xs .d-chip-btn-container .d-btn {
|
|
1151
|
-
padding: var(--su1);
|
|
1152
|
-
}
|
|
1153
|
-
.d-chip--xs .d-avatar {
|
|
1277
|
+
.d-chip__label--xs .d-avatar {
|
|
1154
1278
|
--avatar--size: var(--su16);
|
|
1155
1279
|
margin-right: var(--su4);
|
|
1156
1280
|
margin-left: var(--sun4);
|
|
1157
1281
|
}
|
|
1158
|
-
.d-
|
|
1282
|
+
.d-chip__close--xs {
|
|
1283
|
+
padding: var(--su1);
|
|
1284
|
+
}
|
|
1285
|
+
.d-chip__close--xs::before {
|
|
1286
|
+
width: var(--su24);
|
|
1287
|
+
height: var(--su24);
|
|
1288
|
+
}
|
|
1289
|
+
.d-chip__close--xs .d-btn__icon .d-svg {
|
|
1290
|
+
width: 1.4rem;
|
|
1291
|
+
height: 1.4rem;
|
|
1292
|
+
}
|
|
1293
|
+
.d-chip__label--sm {
|
|
1159
1294
|
padding: var(--su2) var(--su8);
|
|
1160
1295
|
font-size: var(--fs16);
|
|
1161
1296
|
}
|
|
1162
|
-
.d-
|
|
1163
|
-
.d-chip--sm .d-svg {
|
|
1297
|
+
.d-chip__label--sm .d-svg {
|
|
1164
1298
|
width: 1.6rem;
|
|
1165
1299
|
height: 1.6rem;
|
|
1166
1300
|
}
|
|
1167
|
-
.d-
|
|
1301
|
+
.d-chip__label--sm::after {
|
|
1302
|
+
flex-shrink: 0;
|
|
1168
1303
|
width: calc(var(--su12) + var(--su2));
|
|
1169
1304
|
height: calc(var(--su12) + var(--su2));
|
|
1305
|
+
content: '';
|
|
1170
1306
|
}
|
|
1171
|
-
.d-
|
|
1172
|
-
top: var(--sun1);
|
|
1173
|
-
right: var(--su0);
|
|
1174
|
-
padding: var(--su2);
|
|
1175
|
-
}
|
|
1176
|
-
.d-chip--sm .d-chip-btn-container .d-btn {
|
|
1177
|
-
padding: var(--su2);
|
|
1178
|
-
}
|
|
1179
|
-
.d-chip--sm .d-avatar {
|
|
1307
|
+
.d-chip__label--sm .d-avatar {
|
|
1180
1308
|
--avatar--size: calc(var(--su24) - var(--su4));
|
|
1181
1309
|
margin-right: var(--su4);
|
|
1182
1310
|
margin-left: var(--sun6);
|
|
1183
1311
|
}
|
|
1312
|
+
.d-chip__close--sm {
|
|
1313
|
+
padding: var(--su2);
|
|
1314
|
+
}
|
|
1315
|
+
.d-chip__close--sm::before {
|
|
1316
|
+
width: var(--su24);
|
|
1317
|
+
height: var(--su24);
|
|
1318
|
+
}
|
|
1319
|
+
.d-chip__close--sm .d-btn__icon .d-svg {
|
|
1320
|
+
width: 1.6rem;
|
|
1321
|
+
height: 1.6rem;
|
|
1322
|
+
}
|
|
1184
1323
|
fieldset {
|
|
1185
1324
|
min-width: var(--su0);
|
|
1186
1325
|
padding: var(--su0);
|
|
@@ -18743,7 +18882,7 @@ body.theme-dark .d\:d-bgg-to-0 {
|
|
|
18743
18882
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
|
|
18744
18883
|
}
|
|
18745
18884
|
.d-ff-mono {
|
|
18746
|
-
font-family: 'RobotoMono',
|
|
18885
|
+
font-family: 'RobotoMono', RobotoMono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace !important;
|
|
18747
18886
|
}
|
|
18748
18887
|
.d-ff-marketing {
|
|
18749
18888
|
font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
|
|
@@ -19514,7 +19653,7 @@ body {
|
|
|
19514
19653
|
--grid-column-auto: 1fr;
|
|
19515
19654
|
--ff-custom: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
19516
19655
|
--ff-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
19517
|
-
--ff-mono: 'RobotoMono',
|
|
19656
|
+
--ff-mono: 'RobotoMono', RobotoMono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
|
|
19518
19657
|
--ff-marketing: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
19519
19658
|
--ff-marketing-semi-expanded: 'ArchivoSemiExpanded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
19520
19659
|
--ff-marketing-expanded: 'ArchivoExpanded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|