@dialpad/dialtone-css 8.81.0-next.11 → 8.81.0-next.13
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/emoji-picker.less +12 -4
- package/lib/build/less/components/radio-checkbox.less +15 -1
- package/lib/build/less/components/toggle.less +5 -2
- package/lib/dist/dialtone-default-theme.css +19 -6
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone-docs.json +1 -1
- package/lib/dist/dialtone.css +19 -6
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/no-layers/dialtone-default-theme.css +19 -6
- package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
- package/lib/dist/no-layers/dialtone.css +19 -6
- package/lib/dist/no-layers/dialtone.min.css +1 -1
- package/package.json +1 -1
|
@@ -6799,7 +6799,9 @@ template {
|
|
|
6799
6799
|
transform: translate(-50%, 0);
|
|
6800
6800
|
}
|
|
6801
6801
|
.d-toggle:focus-visible {
|
|
6802
|
-
|
|
6802
|
+
box-shadow: none;
|
|
6803
|
+
}
|
|
6804
|
+
.d-toggle:focus-visible::after {
|
|
6803
6805
|
box-shadow: var(--dt-shadow-focus);
|
|
6804
6806
|
}
|
|
6805
6807
|
.d-toggle--disabled,
|
|
@@ -9539,8 +9541,16 @@ legend .d-label {
|
|
|
9539
9541
|
.d-checkbox:focus,
|
|
9540
9542
|
.d-checkbox:focus-visible,
|
|
9541
9543
|
.d-checkbox:checked:focus-visible {
|
|
9544
|
+
--check-radio-color-border: var(--dt-color-border-focus);
|
|
9542
9545
|
box-shadow: var(--dt-shadow-focus);
|
|
9543
9546
|
}
|
|
9547
|
+
.d-checkbox:checked:focus,
|
|
9548
|
+
.d-checkbox:checked:focus-visible,
|
|
9549
|
+
.d-checkbox:indeterminate:focus,
|
|
9550
|
+
.d-checkbox:indeterminate:focus-visible {
|
|
9551
|
+
outline: var(--dt-size-border-200) solid CanvasText;
|
|
9552
|
+
outline-offset: calc(var(--dt-size-border-200) * -1);
|
|
9553
|
+
}
|
|
9544
9554
|
.d-checkbox:checked {
|
|
9545
9555
|
--check-radio-color-background: var(--check-radio-color-background-checked);
|
|
9546
9556
|
background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
|
|
@@ -9612,7 +9622,9 @@ legend .d-label {
|
|
|
9612
9622
|
.d-radio:focus,
|
|
9613
9623
|
.d-radio:focus-visible,
|
|
9614
9624
|
.d-radio:checked:focus-visible {
|
|
9615
|
-
|
|
9625
|
+
outline: var(--dt-size-border-200) solid var(--dt-color-border-focus);
|
|
9626
|
+
outline-offset: calc(var(--dt-size-border-200) * -1);
|
|
9627
|
+
box-shadow: inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
|
|
9616
9628
|
}
|
|
9617
9629
|
.d-radio--disabled:checked {
|
|
9618
9630
|
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
@@ -10686,7 +10698,7 @@ legend .d-label {
|
|
|
10686
10698
|
.d-emoji-picker__alignment {
|
|
10687
10699
|
box-sizing: content-box !important;
|
|
10688
10700
|
inline-size: auto;
|
|
10689
|
-
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-
|
|
10701
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
10690
10702
|
margin: 0 var(--dt-spacing-200);
|
|
10691
10703
|
}
|
|
10692
10704
|
.d-emoji-picker--footer {
|
|
@@ -10705,6 +10717,7 @@ legend .d-label {
|
|
|
10705
10717
|
}
|
|
10706
10718
|
.d-emoji-picker__tabset-list {
|
|
10707
10719
|
gap: var(--dt-spacing-0);
|
|
10720
|
+
--tablist-padding-bottom: var(--dt-spacing-0);
|
|
10708
10721
|
}
|
|
10709
10722
|
.d-emoji-picker__tabset-list::after {
|
|
10710
10723
|
background-color: var(--dt-color-neutral-transparent) !important;
|
|
@@ -10759,7 +10772,7 @@ legend .d-label {
|
|
|
10759
10772
|
border-color: var(--dt-color-border-subtle);
|
|
10760
10773
|
}
|
|
10761
10774
|
.d-emoji-picker__selector {
|
|
10762
|
-
min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
|
|
10775
|
+
min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
10763
10776
|
}
|
|
10764
10777
|
.d-emoji-picker__selector p {
|
|
10765
10778
|
-webkit-padding-after: var(--dt-spacing-50);
|
|
@@ -10779,7 +10792,7 @@ legend .d-label {
|
|
|
10779
10792
|
.d-emoji-picker__list {
|
|
10780
10793
|
position: relative;
|
|
10781
10794
|
block-size: 100%;
|
|
10782
|
-
max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
|
|
10795
|
+
max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
|
|
10783
10796
|
-webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
|
|
10784
10797
|
padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
|
|
10785
10798
|
overflow: hidden auto;
|
|
@@ -10801,7 +10814,7 @@ legend .d-label {
|
|
|
10801
10814
|
flex-wrap: wrap;
|
|
10802
10815
|
gap: var(--dt-spacing-25);
|
|
10803
10816
|
inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
|
|
10804
|
-
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-
|
|
10817
|
+
max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
|
|
10805
10818
|
-webkit-margin-start: var(--dt-spacing-75-negative);
|
|
10806
10819
|
margin-inline-start: var(--dt-spacing-75-negative);
|
|
10807
10820
|
-webkit-padding-before: var(--dt-spacing-50);
|