Skip to content

Commit 9d48ab3

Browse files
committed
fix(material/paginator): allow touch target size to be customized
Adds a token that allows for the paginator touch target to be customized. Also adds a token to customize the width of the page size select.
1 parent fe865b1 commit 9d48ab3

File tree

3 files changed

+11
-7
lines changed

3 files changed

+11
-7
lines changed

src/material/paginator/_m2-paginator.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@
1818
), if($density-scale > -4, -4, $density-scale));
1919

2020
@return (
21-
base: (),
21+
base: (
22+
paginator-page-size-select-width: 84px,
23+
paginator-page-size-select-touch-target-height: 48px,
24+
),
2225
color: (
2326
paginator-container-text-color: map.get($system, on-surface),
2427
paginator-container-background-color: map.get($system, surface),

src/material/paginator/_m3-paginator.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
$system: m3-utils.get-system($theme);
1010

1111
@return (
12-
base: (),
12+
base: (
13+
paginator-page-size-select-width: 84px,
14+
paginator-page-size-select-touch-target-height: 48px,
15+
),
1316
color: (
1417
paginator-container-text-color: map.get($system, on-surface),
1518
paginator-container-background-color: map.get($system, surface),

src/material/paginator/paginator.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ $page-size-margin-right: 8px;
88

99
$items-per-page-label-margin: 0 4px;
1010
$selector-margin: 0 4px;
11-
$selector-trigger-width: 84px;
12-
$touch-target-height: 48px;
1311

1412
$range-label-margin: 0 32px 0 24px;
1513
$button-icon-size: 28px;
@@ -84,7 +82,7 @@ $fallbacks: m3-paginator.get-tokens();
8482

8583
.mat-mdc-paginator-page-size-select {
8684
margin: $selector-margin;
87-
width: $selector-trigger-width;
85+
width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
8886
}
8987

9088
.mat-mdc-paginator-range-label {
@@ -131,8 +129,8 @@ $fallbacks: m3-paginator.get-tokens();
131129
position: absolute;
132130
top: 50%;
133131
left: 50%;
134-
width: $selector-trigger-width;
135-
height: $touch-target-height;
132+
width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
133+
height: token-utils.slot(paginator-page-size-select-touch-target-height, $fallbacks);
136134
background-color: transparent;
137135
transform: translate(-50%, -50%);
138136
cursor: pointer;

0 commit comments

Comments
 (0)