From 45a0e56fd353a35029f20939961bfc15b1e17a6c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 24 May 2024 09:01:35 +0200 Subject: [PATCH] fix(material/menu): prevent divider styles from bleeding out Fixes that the styles for the menu divider were at the top level which means that they'll also affect dividers outside of the menu. Fixes #29106. --- src/material/menu/menu.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/material/menu/menu.scss b/src/material/menu/menu.scss index 567cfff85120..76c75a2305a0 100644 --- a/src/material/menu/menu.scss +++ b/src/material/menu/menu.scss @@ -63,17 +63,17 @@ mat-menu { @include cdk.high-contrast(active, off) { outline: solid 1px; } -} -.mat-divider { - // Use margin instead of padding since divider uses border-top for line - @include token-utils.use-tokens( - tokens-mat-menu.$prefix, - tokens-mat-menu.get-token-slots() - ) { - color: var(#{token-utils.get-token-variable(divider-color)}); - margin-bottom: var(#{token-utils.get-token-variable(divider-bottom-spacing)}); - margin-top: var(#{token-utils.get-token-variable(divider-top-spacing)}); + .mat-divider { + // Use margin instead of padding since divider uses border-top to render out the line. + @include token-utils.use-tokens( + tokens-mat-menu.$prefix, + tokens-mat-menu.get-token-slots() + ) { + color: var(#{token-utils.get-token-variable(divider-color)}); + margin-bottom: var(#{token-utils.get-token-variable(divider-bottom-spacing)}); + margin-top: var(#{token-utils.get-token-variable(divider-top-spacing)}); + } } }