Skip to content

Commit 7165a45

Browse files
authored
fix(material/list): nav list item border-radius (angular#28789)
* fix(material/list): nav list item border-radius * https://m2.material.io/components/navigation-drawer#states * https://m3.material.io/components/navigation-drawer/specs * fixup! fix(material/list): nav list item border-radius * fixup! fix(material/list): nav list item border-radius
1 parent d91d0d4 commit 7165a45

File tree

2 files changed

+11
-8
lines changed

2 files changed

+11
-8
lines changed

src/material/core/tokens/m2/mat/_list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $prefix: (mat, list);
1010
@return (
1111
// active indicator themable with M3
1212
active-indicator-color: transparent,
13-
active-indicator-shape: 0,
13+
active-indicator-shape: 4px,
1414
);
1515
}
1616

src/material/list/list.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -200,18 +200,21 @@ mat-action-list button {
200200
}
201201
}
202202

203-
@include token-utils.use-tokens(m2-mat-list.$prefix,
204-
m2-mat-list.get-token-slots()) {
203+
@include token-utils.use-tokens(m2-mat-list.$prefix, m2-mat-list.get-token-slots()) {
205204
.mdc-list-item--with-leading-icon .mdc-list-item__start {
206205
@include token-utils.create-token-slot(margin-inline-start, list-item-leading-icon-start-space);
207206
@include token-utils.create-token-slot(margin-inline-end, list-item-leading-icon-end-space);
208207
}
209208

210-
a.mdc-list-item.mdc-list-item--activated {
211-
@include token-utils.create-token-slot(background-color, active-indicator-color);
212-
// active-indicator-shape overrides list-item-container-shape
213-
&.mdc-list-item {
214-
@include token-utils.create-token-slot(border-radius, active-indicator-shape);
209+
.mat-mdc-nav-list .mat-mdc-list-item {
210+
@include token-utils.create-token-slot(border-radius, active-indicator-shape);
211+
@include token-utils.create-token-slot(
212+
--mat-mdc-focus-indicator-border-radius,
213+
active-indicator-shape
214+
);
215+
216+
&.mdc-list-item--activated {
217+
@include token-utils.create-token-slot(background-color, active-indicator-color);
215218
}
216219
}
217220
}

0 commit comments

Comments
 (0)