fix(material/button-toggle): incorrect shape of focus indicator in ve…

…rtical group (#30376) Fixes that the first/last buttons in a vertical button group had the wrong shape. Fixes #30368. (cherry picked from commit e91d509)
angular · Jan 23, 2025 · b683474 · b683474
1 parent 8ba411f
commit b683474
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
@@ -386,7 +386,7 @@ $_standard-tokens: (
     @include token-utils.create-token-slot(--mat-focus-indicator-border-radius, shape);
   }
 
-  .mat-button-toggle-group-appearance-standard .mat-button-toggle {
+  .mat-button-toggle-group-appearance-standard:not(.mat-button-toggle-vertical) .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);
@@ -397,4 +397,16 @@ $_standard-tokens: (
       @include token-utils.create-token-slot(border-bottom-left-radius, shape);
     }
   }
+
+  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle {
+    &:last-of-type .mat-button-toggle-button::before {
+      @include token-utils.create-token-slot(border-bottom-right-radius, shape);
+      @include token-utils.create-token-slot(border-bottom-left-radius, shape);
+    }
+
+    &:first-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-top-left-radius, shape);
+    }
+  }
 }