From 5423fe6a3a9c8b208f6d98f5e7631b4ca00f2f5e Mon Sep 17 00:00:00 2001 From: Sasidharan SD Date: Tue, 14 Nov 2023 01:00:26 +0530 Subject: [PATCH] fix(material/expansion): fix mat-expansion-indicator is slightly off center fixes bug mat-expansion-indicator is slightly off center. Added flex to the mat-expansion indicator aligns the indicator center with the the sibling elements. Fixes #28037 --- .../expansion/expansion-panel-header.scss | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 2380200e0d07..f2b48c31ef19 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -138,20 +138,24 @@ } } -// Creates the expansion indicator arrow. Done using ::after -// rather than havingadditional nodes in the template. -.mat-expansion-indicator::after { - border-style: solid; - border-width: 0 2px 2px 0; - content: ''; - display: inline-block; - padding: 3px; - transform: rotate(45deg); - vertical-align: middle; +.mat-expansion-indicator { + display: flex; - @include token-utils.use-tokens( - tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { - @include token-utils.create-token-slot(color, header-indicator-color); + // Creates the expansion indicator arrow. Done using ::after + // rather than havingadditional nodes in the template. + &::after { + border-style: solid; + border-width: 0 2px 2px 0; + content: ''; + display: inline-block; + padding: 3px; + transform: rotate(45deg); + vertical-align: middle; + + @include token-utils.use-tokens( + tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) { + @include token-utils.create-token-slot(color, header-indicator-color); + } } }