fix(checkbox): fix horizontal spacing between checkboxes and radio buttons

Author: kara

src/components/checkbox/checkbox.scss

@@ -3,7 +3,7 @@
 @import "variables";
 
 /** The width/height of the checkbox element. */
-$md-checkbox-size: 18px !default;
+$md-checkbox-size: $md-toggle-size !default;
 /** The width of the line used to draw the checkmark / mixedmark. */
 $md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;
 /** The width of the checkbox border shown when the checkbox is unchecked. */
@@ -17,7 +17,7 @@ $md-checkbox-background-color: md-color($md-accent, 500);
 /** The base duration used for the majority of transitions for the checkbox. */
 $md-checkbox-transition-duration: 90ms;
 /** The amount of spacing between the checkbox and its label. */
-$md-checkbox-item-spacing: 4px;
+$md-checkbox-item-spacing: $md-toggle-padding;
 
 // Manual calculation done on SVG
 $_md-checkbox-mark-path-length: 22.910259;
@@ -250,6 +250,11 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
   }
 }
 
+// TODO(kara): Remove this style when fixing vertical baseline
+.md-checkbox-layout label {
+  line-height: 24px;
+}
+
 .md-checkbox-frame {
   @extend %md-checkbox-outer-box;
 

src/components/radio/radio.scss

@@ -1,6 +1,7 @@
 @import "default-theme";
+@import "variables";
 
-$md-radio-width: 20px !default;
+$md-radio-size: $md-toggle-size !default;
 
 // Top-level host container.
 md-radio-button {
@@ -12,18 +13,17 @@ md-radio-button {
 .md-radio-label {
   cursor: pointer;
   display: block;
-  padding: 8px;
   white-space: nowrap;
 }
 
 // Container for radio circles and ripple.
 .md-radio-container {
   box-sizing: border-box;
   display: inline-block;
-  height: $md-radio-width;
+  height: $md-radio-size;
   position: relative;
   top: 2px;
-  width: $md-radio-width;
+  width: $md-radio-size;
 }
 
 // TODO(mtlin): Replace when ink ripple component is implemented.
@@ -60,12 +60,12 @@ md-radio-button {
   border: solid 2px;
   border-radius: 50%;
   box-sizing: border-box;
-  height: $md-radio-width;
+  height: $md-radio-size;
   left: 0;
   position: absolute;
   top: 0;
   transition: border-color ease 0.28s;
-  width: $md-radio-width;
+  width: $md-radio-size;
 
   .md-radio-checked & {
     border-color: md-color($md-accent);
@@ -81,13 +81,13 @@ md-radio-button {
   background-color: md-color($md-accent);
   border-radius: 50%;
   box-sizing: border-box;
-  height: $md-radio-width;
+  height: $md-radio-size;
   left: 0;
   position: absolute;
   top: 0;
   transition: transform ease 0.28s, background-color ease 0.28s;
   transform: scale(0);
-  width: $md-radio-width;
+  width: $md-radio-size;
 
   .md-radio-checked & {
     transform: scale(0.5);
@@ -103,11 +103,15 @@ md-radio-button {
   display: inline-block;
   float: right;
   line-height: 24px;
-  // Equal padding on both sides, for RTL.
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: $md-toggle-padding;
   position: relative;
   vertical-align: top;
+
+  [dir='rtl'] & {
+    float: left;
+    padding-right: $md-toggle-padding;
+    padding-left: 0;
+  }
 }
 
 // Underlying native input element.

src/core/style/_variables.scss

@@ -15,6 +15,11 @@ $z-index-drawer: 100 !default;
 // Global constants
 $pi: 3.14159265;
 
+// Padding between input toggles and their labels
+$md-toggle-padding: 8px !default;
+// Width and height of input toggles
+$md-toggle-size: 20px !default;
+
 // Easing Curves
 // TODO(jelbourn): all of these need to be revisited
 

src/demo-app/checkbox/checkbox-demo.html

@@ -6,7 +6,7 @@ <h1>md-checkbox: Basic Example</h1>
              [align]="alignment">
   Do you want to <em>foobar</em> the <em>bazquux</em>?
 </md-checkbox> - <strong>{{printResult()}}</strong>
-<div>
+<div class="demo-checkboxes">
 <input id="indeterminate-toggle"
        type="checkbox"
        [(ngModel)]="isIndeterminate"

src/demo-app/checkbox/checkbox-demo.scss

@@ -0,0 +1,4 @@
+.demo-checkboxes {
+  margin: 8px 0;
+  
+}

src/demo-app/radio/radio-demo.scss

@@ -7,4 +7,8 @@
   background-color: #f7f7f7;
   margin: 8px;
   padding: 16px;
+
+  md-radio-button {
+    margin: 8px;
+  }
 }