diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss index d7d374c60075..d7f8dc700732 100644 --- a/src/material/slide-toggle/_m2-slide-toggle.scss +++ b/src/material/slide-toggle/_m2-slide-toggle.scss @@ -99,7 +99,8 @@ -1: 36px, -2: 32px, -3: 28px, - ), $density-scale) + ), $density-scale), + slide-toggle-touch-target-display: if($density-scale < -1, none, block) ), ); } diff --git a/src/material/slide-toggle/_m3-slide-toggle.scss b/src/material/slide-toggle/_m3-slide-toggle.scss index 52088b6fdbfc..4286dfdaf062 100644 --- a/src/material/slide-toggle/_m3-slide-toggle.scss +++ b/src/material/slide-toggle/_m3-slide-toggle.scss @@ -1,5 +1,7 @@ @use 'sass:map'; +@use 'sass:list'; @use '../core/tokens/m3-utils'; +@use '../core/theming/theming'; @use '../core/tokens/m3'; /// Generates custom tokens for the mat-slide-toggle. @@ -115,6 +117,16 @@ slide-toggle-label-text-tracking: map.get($system, body-medium-tracking), slide-toggle-label-text-weight: map.get($system, body-medium-weight), ), - density: (), + density: get-density-tokens(map.get($system, density-scale)), + ); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($scale) { + $scale: theming.clamp-density($scale, -3); + $index: ($scale * -1) + 1; + + @return ( + slide-toggle-touch-target-display: list.nth((block, block, none, none), $index), ); } diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html index f3330fe3278d..6e1c74ce2ad4 100644 --- a/src/material/slide-toggle/slide-toggle.html +++ b/src/material/slide-toggle/slide-toggle.html @@ -20,6 +20,7 @@ [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null" (click)="_handleClick()" #switch> +
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index addcad65d2f1..dd03b18b38e2 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -542,3 +542,20 @@ $fallbacks: m3-slide-toggle.get-tokens(); color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks); } } + +// Element used to provide a larger tap target for users on touch devices. +.mat-mdc-slide-toggle-touch-target { + position: absolute; + top: 50%; + left: 50%; + height: 48px; + width: 100%; + transform: translate(-50%, -50%); + display: token-utils.slot(slide-toggle-touch-target-display, $fallbacks); + + [dir='rtl'] & { + left: auto; + right: 50%; + transform: translate(50%, -50%); + } +}