Skip to content

Commit

Permalink
fix(pseudo-checkbox): alignment issue and border color (#3144)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
crisbeto authored and mmalerba committed Feb 21, 2017
1 parent 634e414 commit 1f19ef0
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 11 deletions.
10 changes: 10 additions & 0 deletions src/demo-app/checkbox/checkbox-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 8 additions & 2 deletions src/demo-app/demo-app-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -47,6 +52,7 @@ import {StyleDemo} from './style/style-demo';
ReactiveFormsModule,
RouterModule.forRoot(DEMO_APP_ROUTES),
MaterialModule.forRoot(),
MdSelectionModule,
],
declarations: [
AutocompleteDemo,
Expand Down Expand Up @@ -93,7 +99,7 @@ import {StyleDemo} from './style/style-demo';
SunnyTabContent,
RainyTabContent,
FoggyTabContent,
PlatformDemo
PlatformDemo,
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer}
Expand Down
5 changes: 1 addition & 4 deletions src/lib/checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 1f19ef0

Please sign in to comment.