Skip to content

Commit 02e6fb4

Browse files
committed
fix(material-experimental): strong focus indicator clipped in checkbox and radio button
In order to support density scaling, the MDC checkbox and radio button have `border-radius: 50%` on their ripple element which is also used as the strong focus indicator. Since the indicator is a square, it'll be clipped, unless we also make it into a circle.
1 parent 5f12539 commit 02e6fb4

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material-experimental/mdc-helpers/_focus-indicators.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@
5858
margin: 5px;
5959
}
6060

61+
// These components have to set `border-radius: 50%` in order to support density scaling
62+
// which will clip a square focus indicator so we have to turn it into a circle.
63+
.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
64+
.mat-radio-ripple.mat-mdc-focus-indicator::before {
65+
border-radius: 50%;
66+
}
67+
6168
// Render the focus indicator on focus. Defining a pseudo element's
6269
// content will cause it to render.
6370

0 commit comments

Comments
 (0)