From 7481183319117e44631f002f9b1d7673e689bf46 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 23 Jan 2025 11:20:15 +0100 Subject: [PATCH] fix(material/button-toggle): incorrect shape of focus indicator in vertical group Fixes that the first/last buttons in a vertical button group had the wrong shape. Fixes #30368. --- src/material/button-toggle/button-toggle.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index 778df32843af..1e02fbd24b25 100644 --- 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); + } + } }