Update focus ring offset
parent
695d230547
commit
d31c58478f
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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}',
|
||||||
|
|
Loading…
Reference in New Issue