@dialpad/dialtone 7.16.0-alpha.1 → 7.16.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.
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
--avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
|
|
39
39
|
|
|
40
40
|
position: relative;
|
|
41
|
-
display: flex;
|
|
41
|
+
display: inline-flex;
|
|
42
42
|
color: var(--avatar-color-text);
|
|
43
43
|
|
|
44
44
|
// -- CHILDREN
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
display: inline-flex;
|
|
93
93
|
align-items: center;
|
|
94
94
|
justify-content: center;
|
|
95
|
+
box-sizing: border-box;
|
|
95
96
|
min-width: calc(var(--size-300) * 3.5);
|
|
96
97
|
padding: var(--space-200) calc(var(--space-200) + var(--space-100));
|
|
97
98
|
color: var(--fc-primary-inverted);
|
|
@@ -139,7 +139,6 @@
|
|
|
139
139
|
cursor: pointer;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
|
|
143
142
|
// ============================================================================
|
|
144
143
|
// $ CHECKBOXES
|
|
145
144
|
// ----------------------------------------------------------------------------
|
|
@@ -207,3 +206,41 @@
|
|
|
207
206
|
}
|
|
208
207
|
}
|
|
209
208
|
}
|
|
209
|
+
|
|
210
|
+
// ============================================================================
|
|
211
|
+
// $ RADIOS
|
|
212
|
+
// ----------------------------------------------------------------------------
|
|
213
|
+
.d-radio {
|
|
214
|
+
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
215
|
+
border-radius: var(--br-circle);
|
|
216
|
+
|
|
217
|
+
// Disabled
|
|
218
|
+
&[disabled],
|
|
219
|
+
&--disabled {
|
|
220
|
+
--check-radio-color: var(--fc-disabled);
|
|
221
|
+
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
222
|
+
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
&:focus-visible,
|
|
226
|
+
&:checked:focus-visible {
|
|
227
|
+
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&:checked {
|
|
231
|
+
--check-radio-color-background: var(--check-radio-color);
|
|
232
|
+
|
|
233
|
+
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
234
|
+
|
|
235
|
+
// Disabled
|
|
236
|
+
&[disabled] {
|
|
237
|
+
--check-radio-color-background: var(--black-400);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
&--disabled:checked {
|
|
242
|
+
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
243
|
+
--check-radio-color-background: var(--black-400);
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
@@ -481,7 +481,7 @@ body {
|
|
|
481
481
|
--avatar-presence-position-right: calc(var(--space-200) * -1);
|
|
482
482
|
--avatar-presence-position-bottom: calc(var(--space-200) * -1);
|
|
483
483
|
position: relative;
|
|
484
|
-
display: flex;
|
|
484
|
+
display: inline-flex;
|
|
485
485
|
color: var(--avatar-color-text);
|
|
486
486
|
}
|
|
487
487
|
.d-avatar__canvas {
|
|
@@ -526,6 +526,7 @@ body {
|
|
|
526
526
|
display: inline-flex;
|
|
527
527
|
align-items: center;
|
|
528
528
|
justify-content: center;
|
|
529
|
+
box-sizing: border-box;
|
|
529
530
|
min-width: calc(var(--size-300) * 3.5);
|
|
530
531
|
padding: var(--space-200) calc(var(--space-200) + var(--space-100));
|
|
531
532
|
color: var(--fc-primary-inverted);
|
|
@@ -2697,6 +2698,38 @@ body {
|
|
|
2697
2698
|
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2698
2699
|
}
|
|
2699
2700
|
}
|
|
2701
|
+
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
2702
|
+
.d-radio {
|
|
2703
|
+
border-radius: var(--br-circle);
|
|
2704
|
+
}
|
|
2705
|
+
.d-radio[disabled],
|
|
2706
|
+
.d-radio--disabled {
|
|
2707
|
+
--check-radio-color: var(--fc-disabled);
|
|
2708
|
+
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2709
|
+
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2710
|
+
}
|
|
2711
|
+
.d-radio.focus-visible.js-focus-visible,
|
|
2712
|
+
.js-focus-visible .d-radio.focus-visible,
|
|
2713
|
+
.d-radio:checked.focus-visible.js-focus-visible,
|
|
2714
|
+
.js-focus-visible .d-radio:checked.focus-visible {
|
|
2715
|
+
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2716
|
+
}
|
|
2717
|
+
.d-radio:focus-visible,
|
|
2718
|
+
.d-radio:checked:focus-visible {
|
|
2719
|
+
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2720
|
+
}
|
|
2721
|
+
.d-radio:checked {
|
|
2722
|
+
--check-radio-color-background: var(--check-radio-color);
|
|
2723
|
+
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
2724
|
+
}
|
|
2725
|
+
.d-radio:checked[disabled] {
|
|
2726
|
+
--check-radio-color-background: var(--black-400);
|
|
2727
|
+
}
|
|
2728
|
+
.d-radio--disabled:checked {
|
|
2729
|
+
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2730
|
+
--check-radio-color-background: var(--black-400);
|
|
2731
|
+
}
|
|
2732
|
+
}
|
|
2700
2733
|
.d-select {
|
|
2701
2734
|
--select-color-border: var(--black-500);
|
|
2702
2735
|
--select-notch-position-right: calc(var(--size-300) * 2);
|