fix(material/button-toggle): standard button toggle strong focus bord… (

#28790) * fix(material/button-toggle): standard button toggle strong focus border-radius * fixup! fix(material/button-toggle): standard button toggle strong focus border-radius * fixup! fix(material/button-toggle): standard button toggle strong focus border-radius * fixup! fix(material/button-toggle): standard button toggle strong focus border-radius * fixup! fix(material/button-toggle): standard button toggle strong focus border-radius (cherry picked from commit 46db6a6)
angular · Mar 28, 2024 · 7ccc392 · 7ccc392
1 parent 58faa94
commit 7ccc392
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -309,3 +309,23 @@ $_standard-tokens: (
     border: 0;
   }
 }
+
+// Change the border-radius of the focus indicator to match the
+// radius of the button-toggle-group or standalone button-toggle.
+@include token-utils.use-tokens($_standard-tokens...) {
+  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
+    @include token-utils.create-token-slot(--mat-focus-indicator-border-radius, shape);
+  }
+
+  .mat-button-toggle-group-appearance-standard .mat-button-toggle {
+    &:last-of-type .mat-button-toggle-button::before {
+      @include token-utils.create-token-slot(border-top-right-radius, shape);
+      @include token-utils.create-token-slot(border-bottom-right-radius, shape);
+    }
+
+    &:first-of-type .mat-button-toggle-button::before {
+      @include token-utils.create-token-slot(border-top-left-radius, shape);
+      @include token-utils.create-token-slot(border-bottom-left-radius, shape);
+    }
+  }
+}