From 1aadfb6752053cca3de63704b2b04043ef2d662f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 14 Aug 2023 09:15:07 +0200 Subject: [PATCH] fix(material/progress-bar): alignment affected by parent text-align Fixes that the progress bar's alignment was affected by the parent's element's `text-align`. Fixes #27613. --- src/material/progress-bar/progress-bar.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/progress-bar/progress-bar.scss b/src/material/progress-bar/progress-bar.scss index d95748e39404..d884ae69d174 100644 --- a/src/material/progress-bar/progress-bar.scss +++ b/src/material/progress-bar/progress-bar.scss @@ -23,6 +23,13 @@ // Explicitly set to `block` since the browser defaults custom elements to `inline`. display: block; + // Explicitly set a `text-align` so that the content isn't affected by the parent (see #27613). + text-align: left; + + [dir='rtl'] & { + text-align: right; + } + // Inverts the progress bar horizontally in `query` mode. &[mode='query'] { transform: scaleX(-1);