From 164634049d7d794701c463e4d3b0d545f7f96a27 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 16 Feb 2017 22:55:41 +0100 Subject: [PATCH 1/2] 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. --- src/demo-app/checkbox/checkbox-demo.html | 10 ++++++++++ src/demo-app/demo-app-module.ts | 10 ++++++++-- .../pseudo-checkbox/_pseudo-checkbox-theme.scss | 11 ++++++----- .../selection/pseudo-checkbox/pseudo-checkbox.scss | 4 ++++ 4 files changed, 28 insertions(+), 7 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 @@

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/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 0c35c8b24346..9dd99f726bf1 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: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)); + + &::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 { From dcbff5d53a617cb60f7e4486610bc66e678f4657 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 17 Feb 2017 20:45:08 +0100 Subject: [PATCH 2/2] fix: address PR feedback --- src/lib/checkbox/_checkbox-theme.scss | 5 +---- .../selection/pseudo-checkbox/_pseudo-checkbox-theme.scss | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) 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 9dd99f726bf1..fe85a4ce4ab0 100644 --- a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -16,7 +16,7 @@ $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light); .mat-pseudo-checkbox { - color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)); + color: mat-color(map-get($theme, foreground), secondary-text); &::after { color: mat-color($background, background);