From d04931a7f6f6bee8b98bf48b1cb69152afce0efe Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 15 Jan 2025 09:21:32 +0100 Subject: [PATCH] fix(material/checkbox): ensure focus indicator has the correct shape The specificity for the checkbox's focus indicator was very low which means that if the ripple styles are loaded later, it can be overwritten. Fixes #30326. --- src/material/checkbox/checkbox.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index 1bc17261034b..0ab15a3d7d7a 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -107,8 +107,9 @@ } // Checkbox components have to set `border-radius: 50%` in order to support density scaling -// which will clip a square focus indicator so we have to turn it into a circle. -.mat-mdc-checkbox-ripple::before { +// which will clip a square focus indicator so we have to turn it into a circle. Needs extra +// specificity in case the ripple styles are loaded later which can override the shape. +.mat-mdc-checkbox .mat-mdc-checkbox-ripple::before { border-radius: 50%; }