fix(pseudo-checkbox): alignment issue and border color (#3144)

* fix(pseudo-checkbox): alignment issue and border color

* Fixes an alignment issue with the pseudo checkboxes. Most likely caused by the `mat-` prefix changes or a faulty conflict resolution.
* Fixes pseudo checkboxes not using the proper border color from the theme.
* Adds the pseudo checkboxes to the checkbox demo for easier testing.

* fix: address PR feedback

Author: crisbeto

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

@@ -43,5 +43,15 @@ <h1>md-checkbox: Basic Example</h1>
   </div>
 </div>
 
+<h1>Pseudo checkboxes</h1>
+<md-pseudo-checkbox></md-pseudo-checkbox>
+<md-pseudo-checkbox [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="checked"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="checked" [disabled]="true"></md-pseudo-checkbox>
+
+<md-pseudo-checkbox state="indeterminate"></md-pseudo-checkbox>
+<md-pseudo-checkbox state="indeterminate" [disabled]="true"></md-pseudo-checkbox>
+
 <h1>Nested Checklist</h1>
 <md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

src/demo-app/demo-app-module.ts

@@ -4,7 +4,12 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {DemoApp, Home} from './demo-app/demo-app';
 import {RouterModule} from '@angular/router';
-import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
+import {
+  MaterialModule,
+  OverlayContainer,
+  FullscreenOverlayContainer,
+  MdSelectionModule,
+} from '@angular/material';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {JazzDialog, ContentElementDialog, DialogDemo, IFrameDialog} from './dialog/dialog-demo';
@@ -47,6 +52,7 @@ import {StyleDemo} from './style/style-demo';
     ReactiveFormsModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule.forRoot(),
+    MdSelectionModule,
   ],
   declarations: [
     AutocompleteDemo,
@@ -93,7 +99,7 @@ import {StyleDemo} from './style/style-demo';
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
-    PlatformDemo
+    PlatformDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

src/lib/checkbox/_checkbox-theme.scss

@@ -9,9 +9,6 @@
   $background: map-get($theme, background);
 
 
-  // The color of the checkbox border.
-  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
-
   // The color of the checkbox's checkmark / mixedmark.
   $checkbox-mark-color: mat-color($background, background);
 
@@ -23,7 +20,7 @@
   $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
 
   .mat-checkbox-frame {
-    border-color: $checkbox-border-color;
+    border-color: mat-color(map-get($theme, foreground), secondary-text);
   }
 
   .mat-checkbox-checkmark {

src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,18 +8,19 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
 
-  // The color of the checkbox's checkmark / mixedmark.
-  $checkbox-mark-color: mat-color($background, background);
-
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
   // blend the colors together based on the base color and the theme background.
   $white-30pct-opacity-on-dark: #686868;
   $black-26pct-opacity-on-light: #b0b0b0;
   $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
 
-  .mat-pseudo-checkbox::after {
-    color: $checkbox-mark-color;
+  .mat-pseudo-checkbox {
+    color: mat-color(map-get($theme, foreground), secondary-text);
+
+    &::after {
+      color: mat-color($background, background);
+    }
   }
 
   .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -29,6 +29,10 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
     border-bottom: $mat-checkbox-border-width solid currentColor;
     transition: opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
   }
+
+  &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
+    border: none;
+  }
 }
 
 .mat-pseudo-checkbox-disabled {