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 @@
md-checkbox: Basic Example
+Pseudo checkboxes
+
+
+
+
+
+
+
+
+
Nested Checklist
diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 541909dbf171..9199eb2663a4 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 {