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