@dialpad/dialtone-css 8.36.0 → 8.37.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.
|
@@ -145,23 +145,56 @@
|
|
|
145
145
|
margin-bottom: var(--dt-space-200);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
+
.d-input--hidden {
|
|
149
|
+
visibility: hidden;
|
|
150
|
+
}
|
|
151
|
+
|
|
148
152
|
// $$ INPUT WRAPPER
|
|
149
153
|
// ----------------------------------------------------------------------------
|
|
150
154
|
.d-input__wrapper {
|
|
151
155
|
padding: 0;
|
|
152
156
|
overflow-y: auto;
|
|
153
157
|
|
|
154
|
-
.d-
|
|
155
|
-
|
|
158
|
+
.d-textarea + .d-input-icon--right {
|
|
159
|
+
position: absolute;
|
|
160
|
+
right: var(--dt-space-450);
|
|
156
161
|
}
|
|
157
162
|
|
|
158
|
-
.d-input-icon.d-
|
|
159
|
-
|
|
163
|
+
.d-input-icon--left:has(+ .d-textarea) {
|
|
164
|
+
align-items: flex-start;
|
|
160
165
|
}
|
|
161
166
|
|
|
162
|
-
.d-
|
|
163
|
-
|
|
164
|
-
|
|
167
|
+
.d-input-icon:has(+ .d-textarea),
|
|
168
|
+
.d-textarea+.d-input-icon {
|
|
169
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.d-input-icon:has(+ .d-textarea--xs),
|
|
173
|
+
.d-textarea--xs + .d-input-icon {
|
|
174
|
+
#d-internal__input-and-select-xs();
|
|
175
|
+
|
|
176
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.d-input-icon:has(+ .d-textarea--sm),
|
|
180
|
+
.d-textarea--sm+.d-input-icon {
|
|
181
|
+
#d-internal__input-and-select-sm();
|
|
182
|
+
|
|
183
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.d-input-icon:has(+ .d-textarea--lg),
|
|
187
|
+
.d-textarea--lg+.d-input-icon {
|
|
188
|
+
#d-internal__input-and-select-lg();
|
|
189
|
+
|
|
190
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.d-input-icon:has(+ .d-textarea--xl),
|
|
194
|
+
.d-textarea--xl+.d-input-icon {
|
|
195
|
+
#d-internal__input-and-select-xl();
|
|
196
|
+
|
|
197
|
+
padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
|
|
165
198
|
}
|
|
166
199
|
|
|
167
200
|
.d-input,
|
|
@@ -176,20 +209,6 @@
|
|
|
176
209
|
outline: 0;
|
|
177
210
|
box-shadow: none !important;
|
|
178
211
|
}
|
|
179
|
-
|
|
180
|
-
&.d-input-icon--right {
|
|
181
|
-
padding-right: var(--dt-space-350);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
&.d-input-icon--left {
|
|
185
|
-
padding-left: var(--dt-space-350);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.d-textarea {
|
|
190
|
-
&.d-input-icon--right {
|
|
191
|
-
padding-right: var(--dt-space-625);
|
|
192
|
-
}
|
|
193
212
|
}
|
|
194
213
|
}
|
|
195
214
|
|
|
@@ -270,54 +289,18 @@
|
|
|
270
289
|
// $ INPUT ICONS
|
|
271
290
|
// ----------------------------------------------------------------------------
|
|
272
291
|
.d-input-icon {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
display: inline-flex;
|
|
280
|
-
align-items: center;
|
|
281
|
-
height: var(--input-icon-container-height);
|
|
282
|
-
margin: 0;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
// $$ SIZES
|
|
288
|
-
// ----------------------------------------------------------------------------
|
|
289
|
-
.d-input-icon.d-input--xs {
|
|
290
|
-
--input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
.d-input-icon--xs {
|
|
294
|
-
// Backwards-compatible to DT6 icons
|
|
295
|
-
--input-icon-size: var(--dt-icon-size-100);
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.d-input-icon.d-input--sm {
|
|
299
|
-
--input-icon-container-height: var(--dt-size-600);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.d-input-icon--sm {
|
|
303
|
-
// Backwards-compatible to DT6 icons
|
|
304
|
-
--input-icon-size: var(--dt-icon-size-200);
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.d-input-icon.d-input--lg {
|
|
308
|
-
--input-icon-container-height: calc(var(--dt-size-300) * 10);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.d-input-icon--lg {
|
|
312
|
-
// Backwards-compatible to DT6 icons
|
|
313
|
-
--input-icon-size: var(--dt-icon-size-400);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.d-input-icon.d-input--xl {
|
|
317
|
-
--input-icon-container-height: calc(var(--dt-size-300) * 14);
|
|
318
|
-
}
|
|
292
|
+
display: none;
|
|
293
|
+
|
|
294
|
+
&:not(:empty) {
|
|
295
|
+
display: inline-flex;
|
|
296
|
+
align-items: center;
|
|
297
|
+
}
|
|
319
298
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
299
|
+
&--right:not(:empty) {
|
|
300
|
+
margin-right: var(--dt-space-400);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
&--left:not(:empty) {
|
|
304
|
+
margin-left: var(--dt-space-400);
|
|
305
|
+
}
|
|
306
|
+
}
|
package/lib/dist/dialtone.css
CHANGED
|
@@ -2243,20 +2243,75 @@ legend .d-label {
|
|
|
2243
2243
|
.d-input__length-description {
|
|
2244
2244
|
margin-bottom: var(--dt-space-200);
|
|
2245
2245
|
}
|
|
2246
|
+
.d-input--hidden {
|
|
2247
|
+
visibility: hidden;
|
|
2248
|
+
}
|
|
2246
2249
|
.d-input__wrapper {
|
|
2247
2250
|
padding: 0;
|
|
2248
2251
|
overflow-y: auto;
|
|
2249
2252
|
}
|
|
2250
|
-
.d-input__wrapper .d-
|
|
2251
|
-
margin-right: var(--dt-space-400);
|
|
2252
|
-
}
|
|
2253
|
-
.d-input__wrapper .d-input-icon.d-input-icon--left {
|
|
2254
|
-
margin-left: var(--dt-space-400);
|
|
2255
|
-
}
|
|
2256
|
-
.d-input__wrapper .d-textarea + .d-input-icon.d-input-icon--right {
|
|
2253
|
+
.d-input__wrapper .d-textarea + .d-input-icon--right {
|
|
2257
2254
|
position: absolute;
|
|
2258
2255
|
right: var(--dt-space-450);
|
|
2259
2256
|
}
|
|
2257
|
+
.d-input__wrapper .d-input-icon--left:has(+ .d-textarea) {
|
|
2258
|
+
align-items: flex-start;
|
|
2259
|
+
}
|
|
2260
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea),
|
|
2261
|
+
.d-input__wrapper .d-textarea + .d-input-icon {
|
|
2262
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
|
|
2263
|
+
}
|
|
2264
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--xs),
|
|
2265
|
+
.d-input__wrapper .d-textarea--xs + .d-input-icon {
|
|
2266
|
+
--input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
|
|
2267
|
+
--input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
|
|
2268
|
+
--input-font-size: var(--dt-font-size-100);
|
|
2269
|
+
--input-border-radius: var(--dt-size-300);
|
|
2270
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
2271
|
+
}
|
|
2272
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--xs) .d-btn__icon,
|
|
2273
|
+
.d-input__wrapper .d-textarea--xs + .d-input-icon .d-btn__icon {
|
|
2274
|
+
width: calc(var(--dt-size-500) - var(--dt-size-200));
|
|
2275
|
+
height: calc(var(--dt-size-500) - var(--dt-size-200));
|
|
2276
|
+
}
|
|
2277
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--sm),
|
|
2278
|
+
.d-input__wrapper .d-textarea--sm + .d-input-icon {
|
|
2279
|
+
--input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
|
|
2280
|
+
--input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
|
|
2281
|
+
--input-font-size: var(--dt-font-size-100);
|
|
2282
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
2283
|
+
}
|
|
2284
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--sm) .d-btn__icon,
|
|
2285
|
+
.d-input__wrapper .d-textarea--sm + .d-input-icon .d-btn__icon {
|
|
2286
|
+
width: var(--dt-size-500);
|
|
2287
|
+
height: var(--dt-size-500);
|
|
2288
|
+
}
|
|
2289
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--lg),
|
|
2290
|
+
.d-input__wrapper .d-textarea--lg + .d-input-icon {
|
|
2291
|
+
--input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
|
|
2292
|
+
--input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
|
|
2293
|
+
--input-font-size: var(--dt-font-size-300);
|
|
2294
|
+
--input-border-radius: var(--dt-size-450);
|
|
2295
|
+
padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
|
|
2296
|
+
}
|
|
2297
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--lg) .d-btn__icon,
|
|
2298
|
+
.d-input__wrapper .d-textarea--lg + .d-input-icon .d-btn__icon {
|
|
2299
|
+
width: calc(var(--dt-size-300) * 5);
|
|
2300
|
+
height: calc(var(--dt-size-300) * 5);
|
|
2301
|
+
}
|
|
2302
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--xl),
|
|
2303
|
+
.d-input__wrapper .d-textarea--xl + .d-input-icon {
|
|
2304
|
+
--input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
|
|
2305
|
+
--input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
|
|
2306
|
+
--input-font-size: var(--dt-font-size-400);
|
|
2307
|
+
--input-border-radius: var(--dt-size-500);
|
|
2308
|
+
padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
|
|
2309
|
+
}
|
|
2310
|
+
.d-input__wrapper .d-input-icon:has(+ .d-textarea--xl) .d-btn__icon,
|
|
2311
|
+
.d-input__wrapper .d-textarea--xl + .d-input-icon .d-btn__icon {
|
|
2312
|
+
width: var(--dt-size-550);
|
|
2313
|
+
height: var(--dt-size-550);
|
|
2314
|
+
}
|
|
2260
2315
|
.d-input__wrapper .d-input,
|
|
2261
2316
|
.d-input__wrapper .d-textarea {
|
|
2262
2317
|
flex: 1;
|
|
@@ -2271,17 +2326,6 @@ legend .d-label {
|
|
|
2271
2326
|
outline: 0;
|
|
2272
2327
|
box-shadow: none !important;
|
|
2273
2328
|
}
|
|
2274
|
-
.d-input__wrapper .d-input.d-input-icon--right,
|
|
2275
|
-
.d-input__wrapper .d-textarea.d-input-icon--right {
|
|
2276
|
-
padding-right: var(--dt-space-350);
|
|
2277
|
-
}
|
|
2278
|
-
.d-input__wrapper .d-input.d-input-icon--left,
|
|
2279
|
-
.d-input__wrapper .d-textarea.d-input-icon--left {
|
|
2280
|
-
padding-left: var(--dt-space-350);
|
|
2281
|
-
}
|
|
2282
|
-
.d-input__wrapper .d-textarea.d-input-icon--right {
|
|
2283
|
-
padding-right: var(--dt-space-625);
|
|
2284
|
-
}
|
|
2285
2329
|
.d-input.d-input--xs {
|
|
2286
2330
|
--input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
|
|
2287
2331
|
--input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
|
|
@@ -2384,37 +2428,17 @@ legend .d-label {
|
|
|
2384
2428
|
--input-color-border: var(--dt-inputs-color-border-success) !important;
|
|
2385
2429
|
}
|
|
2386
2430
|
.d-input-icon {
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2431
|
+
display: none;
|
|
2432
|
+
}
|
|
2433
|
+
.d-input-icon:not(:empty) {
|
|
2390
2434
|
display: inline-flex;
|
|
2391
2435
|
align-items: center;
|
|
2392
|
-
height: var(--input-icon-container-height);
|
|
2393
|
-
margin: 0;
|
|
2394
|
-
}
|
|
2395
|
-
.d-input-icon.d-input--xs {
|
|
2396
|
-
--input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
|
|
2397
|
-
}
|
|
2398
|
-
.d-input-icon--xs {
|
|
2399
|
-
--input-icon-size: var(--dt-icon-size-100);
|
|
2400
2436
|
}
|
|
2401
|
-
.d-input-icon
|
|
2402
|
-
|
|
2403
|
-
}
|
|
2404
|
-
.d-input-icon--sm {
|
|
2405
|
-
--input-icon-size: var(--dt-icon-size-200);
|
|
2406
|
-
}
|
|
2407
|
-
.d-input-icon.d-input--lg {
|
|
2408
|
-
--input-icon-container-height: calc(var(--dt-size-300) * 10);
|
|
2409
|
-
}
|
|
2410
|
-
.d-input-icon--lg {
|
|
2411
|
-
--input-icon-size: var(--dt-icon-size-400);
|
|
2412
|
-
}
|
|
2413
|
-
.d-input-icon.d-input--xl {
|
|
2414
|
-
--input-icon-container-height: calc(var(--dt-size-300) * 14);
|
|
2437
|
+
.d-input-icon--right:not(:empty) {
|
|
2438
|
+
margin-right: var(--dt-space-400);
|
|
2415
2439
|
}
|
|
2416
|
-
.d-input-icon--
|
|
2417
|
-
|
|
2440
|
+
.d-input-icon--left:not(:empty) {
|
|
2441
|
+
margin-left: var(--dt-space-400);
|
|
2418
2442
|
}
|
|
2419
2443
|
.d-keyboard-shortcut {
|
|
2420
2444
|
display: inline-flex;
|
|
@@ -7583,7 +7607,7 @@ body {
|
|
|
7583
7607
|
}
|
|
7584
7608
|
/**
|
|
7585
7609
|
* Do not edit directly
|
|
7586
|
-
* Generated on
|
|
7610
|
+
* Generated on Mon, 08 Jul 2024 20:08:28 GMT
|
|
7587
7611
|
*/
|
|
7588
7612
|
|
|
7589
7613
|
.dialtone-theme-light {
|
|
@@ -8404,7 +8428,7 @@ body {
|
|
|
8404
8428
|
|
|
8405
8429
|
/**
|
|
8406
8430
|
* Do not edit directly
|
|
8407
|
-
* Generated on
|
|
8431
|
+
* Generated on Mon, 08 Jul 2024 20:08:28 GMT
|
|
8408
8432
|
*/
|
|
8409
8433
|
|
|
8410
8434
|
.dialtone-theme-dark {
|