Split :active and :focus styles for Button+Toggle
Brian Vaughn committed
Feb 22, 2019 at 10:54 UTC
105b53f0fb9881cb79f965323e4e92f7f69121c6
2 files changed
+12
-4
src/devtools/views/Button.css
+5
-2
@@ -13,12 +13,15 @@
13
background: var(--color-button-background-hover);
14
color: var(--color-button-hover);
15
}
16
-.Button:active,
17
-.Button:focus {
16
+.Button:active {
17
background: var(--color-button-background-focus);
18
color: var(--color-button-focus);
19
outline: none;
20
}
21
+.Button:focus {
22
+ outline: none;
23
+ box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
24
+}
25
.Button:disabled {
26
background: var(--color-button-background);
27
color: var(--color-button-disabled);
src/devtools/views/Toggle.css
+7
-2
@@ -20,13 +20,18 @@
20
}
21
22
.ToggleOn,
23
-.ToggleOn:active,
24
-.ToggleOn:focus {
23
+.ToggleOn:active {
24
background: var(--color-button-background-focus);
25
color: var(--color-button-focus);
26
outline: none;
27
}
28
29
+.ToggleOn:focus-within,
30
+.ToggleOff:focus-within {
31
+ box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
32
+ outline: none;
33
+}
34
+
35
.ToggleDisabled {
36
background: var(--color-button-background);
37
color: var(--color-button-disabled);