From c2e3218e05e0ad7a8d1d414fa9af6bee687307e4 Mon Sep 17 00:00:00 2001
From: FezVrasta <federico.zivolo@gmail.com>
Date: Wed, 3 Aug 2016 00:19:20 +0200
Subject: [PATCH] position checkbox same way of radios (absolutely) and unified
 css used to hide native inputs

---
 scss/_checkboxes.scss | 8 +++++---
 scss/_radios.scss     | 6 ++++++
 scss/_variables.scss  | 1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss
index bcb5a18e..cb0099a5 100644
--- a/scss/_checkboxes.scss
+++ b/scss/_checkboxes.scss
@@ -1,13 +1,15 @@
 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
 .checkbox label,
 label.checkbox-inline {
-  padding-left: 0; // Reset for Bootstrap rule
+  padding-left: $bmd-checkbox-size + $bmd-checkbox-label-padding; // absolutely positioned so add the radio size
   cursor: pointer;
 
   .checkbox-decorator {
-    position: relative;
-    top: 3px;
+    position: absolute;
+    top: 0.125rem;
+    left: 0;
     vertical-align: middle;
+
     &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
       position: absolute;
       left: 0;
diff --git a/scss/_radios.scss b/scss/_radios.scss
index f82d88f3..6c70f452 100644
--- a/scss/_radios.scss
+++ b/scss/_radios.scss
@@ -46,9 +46,15 @@ label.radio-inline {
   }
 
   input[type=radio] {
+    // Hide native radio
+    position: absolute;
+    left: 0;
+    z-index: -1;
     width: 0;
     height: 0;
+    margin: 0;
     overflow: hidden;
+    pointer-events: none;
     opacity: 0;
 
     &:checked {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 862c4488..aee71f49 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -94,6 +94,7 @@ $bmd-checkbox-size: 1.25rem !default;
 $bmd-checkbox-animation-ripple: 500ms !default;
 $bmd-checkbox-animation-check: 0.3s !default;
 $bmd-checkbox-checked-color: $brand-primary !default;
+$bmd-checkbox-label-padding: .3125rem !default; // 5px
 
 $bmd-checkbox-border-size: .125rem !default;
 $bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;