fix(checkbox) rework checkbox to match Material Design spec

automatic 16px horizontal padding when in row configuration
change checkbox size from 20px to 18px
blank checkboxes are sized properly
add md-spacing options for different spacing styles
add alignment math
support custom margins for md-checkbox

Author: clshortfuse

src/components/checkbox/checkbox.js

@@ -31,11 +31,13 @@ angular
  * @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
  *     If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
  *     If falsy expression is passed in it just looks like a normal unchecked checkbox.
- *     The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time. 
- *     Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic. 
+ *     The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
+ *     Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
  *     When using the 'md-indeterminate' attribute use 'ng-checked' to define rendering logic instead of using 'ng-model'.
- * @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it 
+ * @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
  *     will appear checked.
+ * @param md-spacing {string=} Override spacing between icon and text. Default is 36px. Use `wide` for 48px.
+ *     Use `extra-wide` for 56px.
  *
  * @usage
  * <hljs lang="html">

src/components/checkbox/checkbox.scss

@@ -1,38 +1,43 @@
-//$checkbox-width: 20px !default;
+//$checkbox-width: 18px !default;
 //$checkbox-height: $checkbox-width !default;
 //$checkbox-border-radius: 2px !default;
 //$checkbox-border-width: 2px !default;
 //
 // ^^ defined in variables.scss
 //
-$checkbox-margin: 16px !default;
-$checkbox-text-margin: 10px !default;
-$checkbox-top: 12px !default;
+$checkbox-margin-end: 16px !default;
+$checkbox-text-margin-top: 8px !default;
+$container-checkbox-margin: 3px !default;
 
-.md-inline-form {
-  md-checkbox {
-    margin: 19px 0 18px;
-  }
-}
+// md-spacing values (horizontal spacing with icons)
+// normal     = 36px (Angular Material default)
+// wide       = 48px (Material Design Spec dense)
+// extra-wide = 56px (Material Design Spec default)
+$checkbox-text-margin: 36px !default;
+$checkbox-text-margin-wide: 48px !default;
+$checkbox-text-margin-extra-wide: 56px !default;
+
+// from input.scss
+$input-container-margin-top: 18px !default;
+$input-container-padding-top: 2px !default;
+$input-padding-top: 2px !default;
+$input-padding-bottom: 1px !default;
+$input-border: 1px !default;
+
+$md-inline-alignment: $input-container-margin-top + $input-container-padding-top
+                  + $input-padding-top + $input-padding-bottom + $input-border
+                  - $checkbox-text-margin-top !default;
 
 md-checkbox {
   box-sizing: border-box;
   display: inline-block;
-  margin-bottom: $checkbox-margin;
   white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
   position: relative;
   min-width: $checkbox-width;
-  min-height: $checkbox-width;
-  @include rtl(margin-left, 0, $checkbox-margin);
-  @include rtl(margin-right, $checkbox-margin, 0);
-
-  &:last-of-type {
-    margin-left: 0;
-    margin-right: 0;
-  }
+  min-height: $checkbox-width * 2;
 
   &.md-focused:not([disabled]) {
     ._md-container:before {
@@ -49,22 +54,72 @@ md-checkbox {
     }
   }
 
-  &.md-align-top-left > div._md-container {
-    top: $checkbox-top;
-  }
-
   @include checkbox-container;
 
+  ._md-container {
+    // Use auto for compatibility with md-checkbox padding
+    top: auto;
+    @include rtl(left, initial, auto);
+    @include rtl(right, auto, initial);
+    margin: $container-checkbox-margin;
+    margin-top: $checkbox-height + $container-checkbox-margin;
+  }
+
   ._md-label {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
     user-select: text;
+    margin-top: $checkbox-text-margin-top;
+    margin-bottom: auto;
 
-    @include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
-    @include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
+    @include rtl(margin-left, $checkbox-text-margin, 0);
+    @include rtl(margin-right, 0, $checkbox-text-margin);
 
+    &:empty {
+      // clamp to checkbox-container margins
+      @include rtl(margin-left, $checkbox-height + ($container-checkbox-margin * 2), 0);
+      @include rtl(margin-right, 0, $checkbox-height + ($container-checkbox-margin * 2));
+    }
+
+  }
+
+  [md-spacing="wide"] &,
+  &[md-spacing="wide"] {
+    ._md-label {
+      @include rtl(margin-left, $checkbox-text-margin-wide, 0);
+      @include rtl(margin-right, 0, $checkbox-text-margin-wide);
+    }
+  }
+
+  [md-spacing="extra-wide"] &,
+  &[md-spacing="extra-wide"]{
+    ._md-label {
+      @include rtl(margin-left, $checkbox-text-margin-extra-wide, 0);
+      @include rtl(margin-right, 0, $checkbox-text-margin-extra-wide);
+    }
+  }
+}
+
+
+.layout-row,
+.layout-xs-row, .layout-gt-xs-row,
+.layout-sm-row, .layout-gt-sm-row,
+.layout-md-row, .layout-gt-md-row,
+.layout-lg-row, .layout-gt-lg-row,
+.layout-xl-row {
+  & > md-checkbox:not(:last-child), {
+    @include rtl(margin-right, $checkbox-margin-end, 0);
+    @include rtl(margin-left, 0, $checkbox-margin-end);
+  }
+
+  &.md-inline-form,
+  .md-inline-form & {
+    > md-checkbox {
+      margin-top: $md-inline-alignment;
+      margin-bottom: auto;
+    }
   }
 }

src/core/style/variables.scss

@@ -129,7 +129,7 @@ $button-fab-padding: rem(1.60) !default;
 
 
 // Shared Checkbox variables
-$checkbox-width: 20px !default;
+$checkbox-width: 18px !default;
 $checkbox-height: $checkbox-width !default;
 $checkbox-border-radius: 2px !default;
 $checkbox-border-width: 2px !default;