fix(material/button): fix outlined button line-height

angular · Nov 14, 2023 · 6deb2b0 · 6deb2b0
1 parent 13629b0
commit 6deb2b0
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
@@ -20,14 +20,15 @@
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
 
-
 @mixin _text-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-text-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-text-button.get-color-tokens($theme)
   );
@@ -37,12 +38,14 @@
 }
 
 @mixin _filled-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-filled-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-filled-button.get-color-tokens($theme)
   );
@@ -52,12 +55,14 @@
 }
 
 @mixin _protected-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-protected-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-protected-button.get-color-tokens($theme)
   );
@@ -67,12 +72,14 @@
 }
 
 @mixin _outlined-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-outlined-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
@@ -137,11 +144,13 @@
     @include mdc-helpers.disable-mdc-fallback-declarations {
       @include mdc-elevation-theme.elevation(2);
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         @include mdc-elevation-theme.elevation(4);
       }
 
-      &:active, &:focus:active {
+      &:active,
+      &:focus:active {
         @include mdc-elevation-theme.elevation(8);
       }
     }
@@ -169,7 +178,8 @@
     @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
 
-  .mat-mdc-raised-button {
+  .mat-mdc-raised-button,
+  .mat-mdc-outlined-button {
     line-height: inherit;
   }
 }