Bug 1494949 - Replace toggle box shadow with border to highlight focused state; r=fvsch
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 14 Jan 2019 15:50:25 +0000
changeset 513732 4a87188c418ffdb7f339203fa17c9abbe9191915
parent 513731 42961555f63beaffc1f6ac94c5a8774a848a3daf
child 513733 2f4288c49610e004e668f6065a54ca591ac7d215
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1494949
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1494949 - Replace toggle box shadow with border to highlight focused state; r=fvsch Differential Revision: https://phabricator.services.mozilla.com/D16034
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -807,32 +807,33 @@ checkbox:-moz-focusring {
   -moz-appearance: none;
   background-color: var(--toggle-track-color);
   cursor: pointer;
   /* Change font-size to scale. */
   font-size: 16px;
   width: 2em;
   height: 1em;
   border-radius: 1em;
+  border: 1px solid transparent;
+  box-sizing: content-box;
   /* Animate the thumb position between states of the checkbox. */
   transition: background-color .1s ease-out;
 }
 
 /* For right-to-left layout, the toggle thumb goes in the opposite direction. */
 html[dir="rtl"] .devtools-checkbox-toggle {
   --x-pos: -.15em;
 }
 
-.devtools-checkbox-toggle:focus {
-  box-shadow: 0 0 0 1px var(--blue-55);
+.devtools-checkbox-toggle:not(:checked):focus {
+  border-color: var(--blue-55);
 }
 
 .devtools-checkbox-toggle:checked:focus {
   background-color: var(--blue-40);
-  box-shadow: none;
 }
 
 .devtools-checkbox-toggle:checked {
   --x-pos: 1.15em;
   background-color: var(--blue-55);
 }
 
 html[dir="rtl"] .devtools-checkbox-toggle:checked {