feat(checkbox) expand density options for checkbox

Create better flexibility for manipulating checkbox while still
following Material Design spec

 - Change checkbox size from 20px to 18px
 - Keep size flush when text is blank
 - Add md-spacing options for different density styles
 - Add alignment math to SCSS
 - Support custom margin and padding for md-checkbox

In case users don't want to use the current spacing of 36px, users
can now opt-in to use less dense options as seen in spec.

Author: clshortfuse

src/components/checkbox/checkbox.js

@@ -36,6 +36,8 @@ angular
  *     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
  *     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,39 +1,57 @@
-//$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-spacing values (horizontal spacing with icons)
+// default    = 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-inline-form {
   md-checkbox {
-    margin: 19px 0 18px;
+    margin-top: $md-inline-alignment;
+    margin-bottom: auto;
   }
 }
 
 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);
+  min-height: $checkbox-width * 2;
+  @include rtl(margin-left, 0, $checkbox-margin-end);
+  @include rtl(margin-right, $checkbox-margin-end, 0);
 
   &:last-of-type {
     margin-left: 0;
     margin-right: 0;
   }
-
   &.md-focused:not([disabled]) {
     .md-container:before {
       left: -8px;
@@ -49,22 +67,51 @@ 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"] &:not[md-spacing="default"],
+  &[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"] &:not[md-spacing="default"],
+  &[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);
+    }
   }
 }

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;