Update focus ring offset

pull/5507/head
Cagatay Civici 2024-04-02 10:44:31 +03:00
parent 695d230547
commit d31c58478f
5 changed files with 7 additions and 8 deletions

View File

@ -37,7 +37,7 @@
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
white-space: nowrap; white-space: nowrap;
--focus-ring-offset: -1px; --p-focus-ring-offset: -1px;
&:hover { &:hover {
border-bottom-color: var(--hover-border-color); border-bottom-color: var(--hover-border-color);
@ -196,7 +196,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@include focus-visible(); @include focus-visible();
--focus-ring-offset: -1px; --p-focus-ring-offset: -1px;
} }
&:hover { &:hover {

View File

@ -1,7 +1,7 @@
@mixin focus-visible() { @mixin focus-visible() {
&:focus-visible { &:focus-visible {
outline: 1px solid var(--primary-color); outline: 1px solid var(--primary-color);
outline-offset: var(--focus-ring-offset, 2px); outline-offset: var(--p-focus-ring-offset);
} }
} }

View File

@ -100,7 +100,7 @@
} }
@include focus-visible(); @include focus-visible();
--focus-ring-offset: -1px; --p-focus-ring-offset: -1px;
} }
> div { > div {
@ -123,7 +123,7 @@
position: relative; position: relative;
@include focus-visible(); @include focus-visible();
--focus-ring-offset: -1px; --p-focus-ring-offset: -1px;
&:hover { &:hover {
border-left-color: var(--hover-border-color); border-left-color: var(--hover-border-color);

View File

@ -61,7 +61,6 @@ export default {
.p-selectbutton .p-button:focus-visible { .p-selectbutton .p-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
--p-focus-ring-offset: 0;
} }
.p-selectbutton.p-invalid { .p-selectbutton.p-invalid {

View File

@ -4,7 +4,7 @@ export default {
root: { root: {
background: '{surface.100}', background: '{surface.100}',
disabledBackground: '{form.field.background.disabled}', disabledBackground: '{form.field.background.disabled}',
invalidBorderColor: '{form.field.border.color.invalid}' invalidBorderColor: '{form.field.invalid.border.color}'
}, },
item: { item: {
checkedBackground: '{surface.0}', checkedBackground: '{surface.0}',
@ -18,7 +18,7 @@ export default {
root: { root: {
background: '{surface.950}', background: '{surface.950}',
disabledBackground: '{form.field.background.disabled}', disabledBackground: '{form.field.background.disabled}',
invalidBorderColor: '{form.field.border.color.invalid}' invalidBorderColor: '{form.field.invalid.border.color}'
}, },
item: { item: {
checkedBackground: '{surface.800}', checkedBackground: '{surface.800}',