Bug 1494582 - Adjust toggle input direction for right-to-left layout; r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Thu, 04 Oct 2018 06:51:04 +0000
changeset 439528 e28a0bc4a7c53349e8490f41287c9e027037567f
parent 439527 6a2f74caa1c2afa5bc7af596ca37880939aaaa30
child 439529 c23c2bd92302e8460ec6a84f00bfa8a12530b06f
push id34778
push usernbeleuzu@mozilla.com
push dateThu, 04 Oct 2018 15:22:02 +0000
treeherdermozilla-central@01634947caab [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1494582
milestone64.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 1494582 - Adjust toggle input direction for right-to-left layout; r=pbro MozReview-Commit-ID: 5ItuYNHsmQt Differential Revision: https://phabricator.services.mozilla.com/D7623
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -815,30 +815,39 @@ checkbox:-moz-focusring {
   font-size: 16px;
   width: 2em;
   height: 1em;
   border-radius: 1em;
   /* 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: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 {
+  --x-pos: -1.15em;
+}
+
 .devtools-checkbox-toggle::before {
   position: relative;
   width: calc(1em - .3em);
   height: calc(1em - .3em);
   transform: translateY(.15em) translateX(var(--x-pos));
   border-radius: 100%;
   display: block;
   content: "";