From 1f19ef057112e3df45933566447695a3b2fc685d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 21 Feb 2017 21:49:46 +0100
Subject: [PATCH] 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
---
 src/demo-app/checkbox/checkbox-demo.html              | 10 ++++++++++
 src/demo-app/demo-app-module.ts                       | 10 ++++++++--
 src/lib/checkbox/_checkbox-theme.scss                 |  5 +----
 .../pseudo-checkbox/_pseudo-checkbox-theme.scss       | 11 ++++++-----
 .../selection/pseudo-checkbox/pseudo-checkbox.scss    |  4 ++++
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html
index 713f8b008d4c..73fdfc6e2c91 100644
--- a/src/demo-app/checkbox/checkbox-demo.html
+++ b/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>
diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 9f66cf8016ba..0263eff112fc 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/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}
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
index cf025e1a0b37..b36d64526f67 100644
--- a/src/lib/checkbox/_checkbox-theme.scss
+++ b/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 {
diff --git a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index 0c35c8b24346..fe85a4ce4ab0 100644
--- a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -8,9 +8,6 @@
   $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.
@@ -18,8 +15,12 @@
   $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 {
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index b9799238cd86..4bf82038dde2 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/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 {