fix(app): make keyboard focus visible in settings (#12612)
This commit is contained in:
@@ -79,9 +79,9 @@
|
|||||||
background-color: var(--surface-hover);
|
background-color: var(--surface-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
|
&:not([data-readonly]) [data-slot="checkbox-checkbox-input"]:focus-visible + [data-slot="checkbox-checkbox-control"] {
|
||||||
border-color: var(--border-focus);
|
border-color: var(--border-focus);
|
||||||
box-shadow: 0 0 0 2px var(--surface-focus);
|
box-shadow: var(--shadow-xs-border-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-checked] [data-slot="checkbox-checkbox-control"],
|
&[data-checked] [data-slot="checkbox-checkbox-control"],
|
||||||
|
|||||||
@@ -32,6 +32,7 @@
|
|||||||
/* } */
|
/* } */
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
background-color: var(--surface-raised-base-hover);
|
||||||
}
|
}
|
||||||
&[data-disabled] {
|
&[data-disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
@@ -70,6 +71,7 @@
|
|||||||
/* } */
|
/* } */
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
background-color: var(--surface-raised-base-hover);
|
||||||
}
|
}
|
||||||
&[data-disabled] {
|
&[data-disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@@ -82,7 +82,7 @@
|
|||||||
box-shadow: var(--shadow-xs-border-base);
|
box-shadow: var(--shadow-xs-border-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([data-expanded]):focus {
|
&:not([data-expanded]):not(:focus-visible):focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,9 +86,9 @@
|
|||||||
background-color: var(--surface-hover);
|
background-color: var(--surface-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-within:not([data-readonly]) [data-slot="switch-control"] {
|
&:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
|
||||||
border-color: var(--border-focus);
|
border-color: var(--border-focus);
|
||||||
box-shadow: 0 0 0 2px var(--surface-focus);
|
box-shadow: var(--shadow-xs-border-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-checked] [data-slot="switch-control"] {
|
&[data-checked] [data-slot="switch-control"] {
|
||||||
|
|||||||
@@ -429,6 +429,11 @@
|
|||||||
background-color: var(--surface-raised-base-hover);
|
background-color: var(--surface-raised-base-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:has([data-slot="tabs-trigger"]:focus-visible) {
|
||||||
|
background-color: var(--surface-raised-base-hover);
|
||||||
|
box-shadow: var(--shadow-xs-border-focus);
|
||||||
|
}
|
||||||
|
|
||||||
&:has([data-selected]) {
|
&:has([data-selected]) {
|
||||||
background-color: var(--surface-raised-base-active);
|
background-color: var(--surface-raised-base-active);
|
||||||
color: var(--text-strong);
|
color: var(--text-strong);
|
||||||
|
|||||||
Reference in New Issue
Block a user