Skip to content

Commit

Permalink
fix(select): multi-select checkbox not having an outline in high cont…
Browse files Browse the repository at this point in the history
…rast mode (#11667)

Reworks the pseudo checkbox not to remove its border when it becomes checked. This has the advantage of not removing the checkbox outline in high contrast mode.
  • Loading branch information
crisbeto authored and andrewseguin committed Jun 7, 2018
1 parent ff78ade commit 082efa3
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
}

&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
border: none;
border-color: transparent;
}
}

Expand All @@ -41,15 +41,16 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
}

.mat-pseudo-checkbox-indeterminate::after {
top: ($mat-checkbox-size - $mat-checkbox-border-width) / 2;
left: $mat-checkbox-border-width;
top: ($mat-checkbox-size - $mat-checkbox-border-width) / 2 - $mat-checkbox-border-width;
left: 0;
width: $mat-checkbox-size - ($mat-checkbox-border-width * 2);
opacity: 1;
}

.mat-pseudo-checkbox-checked::after {
top: ($mat-checkbox-size / 2) - ($_mat-pseudo-checkmark-size / 4) - ($mat-checkbox-size / 10);
left: $_mat-pseudo-checkbox-padding - $mat-checkbox-border-width / 2;
top: ($mat-checkbox-size / 2) - ($_mat-pseudo-checkmark-size / 4) -
($mat-checkbox-size / 10) - $mat-checkbox-border-width;
left: $_mat-pseudo-checkbox-padding - $mat-checkbox-border-width * 1.5;
width: $_mat-pseudo-checkmark-size;
height: ($_mat-pseudo-checkmark-size - $mat-checkbox-border-width) / 2;
border-left: $mat-checkbox-border-width solid currentColor;
Expand Down

0 comments on commit 082efa3

Please sign in to comment.