diff --git a/src/material/_index.scss b/src/material/_index.scss index 4681e82bc2f6..5c8a3a5b7bd3 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -72,6 +72,8 @@ legacy-optgroup-typography, legacy-optgroup-theme; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme; +@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show + pseudo-checkbox-legacy-size; @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show strong-focus-indicators-color, strong-focus-indicators-theme; @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme, diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss new file mode 100644 index 000000000000..dd93f9cfc93a --- /dev/null +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss @@ -0,0 +1,33 @@ +@use 'sass:math'; +@use '../../style/checkbox-common'; + +// Padding inside of a pseudo checkbox. +$padding: checkbox-common.$border-width * 2; + +/// Applies the styles that set the size of the pseudo checkbox +@mixin size($box-size) { + $mark-size: $box-size - (2 * $padding); + + .mat-pseudo-checkbox { + width: $box-size; + height: $box-size; + } + + .mat-pseudo-checkbox-indeterminate::after { + top: math.div($box-size - checkbox-common.$border-width, 2) - + checkbox-common.$border-width; + width: $box-size - 6px; + } + + .mat-pseudo-checkbox-checked::after { + top: math.div($box-size, 2) - math.div($mark-size, 4) - + math.div($box-size, 10) - checkbox-common.$border-width; + width: $mark-size; + height: math.div($mark-size - checkbox-common.$border-width, 2); + } +} + +/// Applies the legacy size styles to the pseudo-checkbox +@mixin legacy-size() { + @include size(checkbox-common.$legacy-size); +} diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss index b0382bb9b143..4ca8acf459a2 100644 --- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss @@ -2,17 +2,9 @@ @use '../../style/checkbox-common'; @use '../../style/private'; @use '../../style/variables'; - -// Padding inside of a pseudo checkbox. -$_padding: checkbox-common.$border-width * 2; - -// Size of the checkmark in a pseudo checkbox. -$_checkmark-size: checkbox-common.$size - (2 * $_padding); - +@use './pseudo-checkbox-common'; .mat-pseudo-checkbox { - width: checkbox-common.$size; - height: checkbox-common.$size; border: checkbox-common.$border-width solid; border-radius: 2px; cursor: pointer; @@ -51,22 +43,19 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding); } .mat-pseudo-checkbox-indeterminate::after { - top: math.div(checkbox-common.$size - checkbox-common.$border-width, 2) - - checkbox-common.$border-width; left: math.div(checkbox-common.$border-width, 2); - width: checkbox-common.$size - 6px; opacity: 1; border-radius: 2px; } .mat-pseudo-checkbox-checked::after { - top: math.div(checkbox-common.$size, 2) - math.div($_checkmark-size, 4) - - math.div(checkbox-common.$size, 10) - checkbox-common.$border-width; - left: $_padding - checkbox-common.$border-width * 1.5; - width: $_checkmark-size; - height: math.div($_checkmark-size - checkbox-common.$border-width, 2); + left: pseudo-checkbox-common.$padding - checkbox-common.$border-width * 1.5; border-left: checkbox-common.$border-width solid currentColor; transform: rotate(-45deg); opacity: 1; box-sizing: content-box; } + +// TODO(andrewseguin): Change this to the non-legacy size once +// the above mixins have landed internally. +@include pseudo-checkbox-common.size(checkbox-common.$legacy-size); diff --git a/src/material/core/style/_checkbox-common.scss b/src/material/core/style/_checkbox-common.scss index d9aec357c38e..1a60a93cc13f 100644 --- a/src/material/core/style/_checkbox-common.scss +++ b/src/material/core/style/_checkbox-common.scss @@ -1,6 +1,9 @@ // The width/height of the checkbox element. $size: 16px !default; +// The width/height of the legacy-checkbox element. +$legacy-size: 16px !default; + // The width of the checkbox border shown when the checkbox is unchecked. $border-width: 2px;