@dialpad/dialtone 6.31.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/dist/css/dialtone.css +196 -57
- 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
|
+
}
|
|
@@ -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);
|