fix(checkbox) update CSS to match spec

Checkbox did not support a11y minimum touch target and the box was
larger than spec.

 - Change checkbox size from 20px to 18px
 - Keep horizontal size flush when text is blank
 - Add md-dense support for checkbox
 - Add inline alignment math to SCSS
 - Increase size of md-checkbox to properly support touch
 - Add demo for md-dense support

Fixes #9351. Fixes #9927. Closes #8713.

BREAKING CHANGE: The default size and spacing for `md-checkbox` has been updated to align with the Material Design specification. Additionally, many new Sass variables have been added for customizing the size and spacing of `md-checkbox`. The `md-dense` class is now supported. After updating to this version, you may need to adjust the layout of your app due to the larger touch-friendly size of checkbox. You may also want to make use of `md-dense` in cases where space is limited.

Author: clshortfuse

src/components/checkbox/checkbox.scss

@@ -1,39 +1,53 @@
-//$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: 10px !default;
+$container-checkbox-margin: 3px !default;
+
+$checkbox-min-height: 48px !default;
+$checkbox-min-height-dense: 36px !default;
+$checkbox-text-margin: 36px !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);
+  @include dense(min-height, $checkbox-min-height, $checkbox-min-height-dense);
+  @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 +63,34 @@ 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;
+    left: auto;
+    right: auto;
+    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-prop(margin-left, margin-right, $checkbox-text-margin, 0);
+
+    &: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));
+    }
 
   }
-}
+}

src/components/checkbox/demoBasicUsage/index.html

@@ -57,6 +57,64 @@
         </div>
       </div>
     </fieldset>
-
+  </div>
+  <br/>
+  <div layout='row'>
+    <fieldset class="standard">
+      <legend>Default Spacing</legend>
+      <div>
+        <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
+          Checkbox 1: {{ data.cb1 }}
+        </md-checkbox>
+        <div>
+          <md-checkbox
+            ng-model="data.cb2"
+            aria-label="Checkbox 2"
+            ng-true-value="'yup'"
+            ng-false-value="'nope'"
+            class="md-warn md-align-top-left" flex>
+            Checkbox 2 (md-warn)  <br/>
+            <span class="ipsum">
+              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
+              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
+              sit amet dapibus tortor ligula non nibh.
+            </span>
+            <br/>
+            {{ data.cb2 }}
+          </md-checkbox>
+        </div>
+          <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
+            Checkbox: Disabled
+          </md-checkbox>
+      </div>
+    </fieldset>
+    <fieldset class="standard md-dense">
+      <legend>Dense Spacing with "md-dense"</legend>
+      <div>
+        <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
+          Checkbox 1: {{ data.cb1 }}
+        </md-checkbox>
+        <div>
+          <md-checkbox
+            ng-model="data.cb2"
+            aria-label="Checkbox 2"
+            ng-true-value="'yup'"
+            ng-false-value="'nope'"
+            class="md-warn md-align-top-left" flex>
+            Checkbox 2 (md-warn)  <br/>
+            <span class="ipsum">
+              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
+              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
+              sit amet dapibus tortor ligula non nibh.
+            </span>
+            <br/>
+            {{ data.cb2 }}
+          </md-checkbox>
+        </div>
+          <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
+            Checkbox: Disabled
+          </md-checkbox>
+      </div>
+    </fieldset>
   </div>
 </div>

src/core/style/_variables.scss

@@ -127,7 +127,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;