fix(checkbox): Ensure correct positioning in RTL context (#381)

Fixes #375
material-components · Mar 4, 2017 · e296032 · e296032
1 parent 4bfda34
commit e296032
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -15,8 +15,9 @@
 //
 
 @import "@material/animation/functions";
-@import "@material/ripple/mixins";
 @import "@material/animation/mixins";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "./variables";
 @import "./keyframes";
 
@@ -40,16 +41,6 @@
   left: 0;
 }
 
-@mixin mdc-checkbox-outer-box {
-  @include mdc-checkbox-cover-element;
-
-  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-  left: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-  border-radius: 2px;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-
 // postcss-bem-linter: define checkbox
 .mdc-checkbox {
   @include mdc-ripple-base;
@@ -84,18 +75,23 @@
   // stylelint-enable plugin/selector-bem-pattern
 
   &__background {
-    @include mdc-checkbox-outer-box;
+    @include mdc-checkbox-cover-element;
+    @include mdc-rtl-reflexive-position(
+      left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");
 
     display: inline-flex;
+    top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    pointer-events: none;
     width: $mdc-checkbox-ui-pct;
     height: $mdc-checkbox-ui-pct;
-    box-sizing: border-box;
     transition:
       mdc-checkbox-transition-exit(background-color),
       mdc-checkbox-transition-exit(border-color);
     border: $mdc-checkbox-border-width solid $mdc-checkbox-border-color;
+    border-radius: 2px;
     background-color: transparent;
     will-change: background-color, border-color;
 

diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json
@@ -17,6 +17,7 @@
     "@material/animation": "^0.1.4",
     "@material/base": "^0.1.2",
     "@material/ripple": "^0.3.0",
+    "@material/rtl": "^0.1.2",
     "@material/theme": "^0.1.2"
   }
 }