Bug 1494949 - Replace toggle box shadow with border to highlight focused state; r=fvsch
☠☠ backed out by 0651e1f9c1ed ☠ ☠
authorRazvan Caliman <rcaliman@mozilla.com>
Sun, 13 Jan 2019 19:17:11 +0000
changeset 453722 6a2a0437e8e976cc69f6120745b90d9fe4797789
parent 453721 5a2081993bcb0ec1b26531a4a9c6bc9e7bb82e0b
child 453723 5fd809e7035df96a1da4273affd017a125b47256
push id111141
push userncsoregi@mozilla.com
push dateMon, 14 Jan 2019 17:26:52 +0000
treeherdermozilla-inbound@b8baa741549c [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,34 @@ 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);
+  border-color: var(--blue-55);
 }
 
 .devtools-checkbox-toggle:checked:focus {
   background-color: var(--blue-40);
-  box-shadow: none;
+  border-color: none;
 }
 
 .devtools-checkbox-toggle:checked {
   --x-pos: 1.15em;
   background-color: var(--blue-55);
 }
 
 html[dir="rtl"] .devtools-checkbox-toggle:checked {