Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(material-experimental/mdc-checkbox): add larger touch target (#22892
)

Sets up a larger touch target for checkboxes in order to meet the 48px minimum.
  • Loading branch information
crisbeto committed Jun 16, 2021
1 parent 9428939 commit 437aba6
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-checkbox/checkbox.html
@@ -1,6 +1,8 @@
<div class="mdc-form-field"
[class.mdc-form-field--align-end]="labelPosition == 'before'">
<div #checkbox class="mdc-checkbox">
<!-- Render this element first so the input is on top. -->
<div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
<input #nativeCheckbox
type="checkbox"
[ngClass]="_classes"
Expand Down
14 changes: 14 additions & 0 deletions src/material-experimental/mdc-checkbox/checkbox.scss
@@ -1,6 +1,7 @@
@use '@material/checkbox' as mdc-checkbox;
@use '@material/form-field' as mdc-form-field;
@use '@material/ripple' as mdc-ripple;
@use '@material/touch-target' as mdc-touch-target;
@use 'sass:map';
@use '../../cdk/a11y';
@use '../mdc-helpers/mdc-helpers';
Expand Down Expand Up @@ -85,3 +86,16 @@
transform: translateZ(0);
}
}

// Element used to provide a larger tap target for users on touch devices.
.mat-mdc-checkbox-touch-target {
@include mdc-touch-target.touch-target(
$set-width: true,
$query: mdc-helpers.$mat-base-styles-query);

[dir='rtl'] & {
left: 0;
right: 50%;
transform: translate(50%, -50%);
}
}

0 comments on commit 437aba6

Please sign in to comment.