fix(card): uneven action button margin

Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`. Fixes #13382.
angular · Dec 28, 2018 · 1b77d64 · 1b77d64
1 parent d22f48c
commit 1b77d64
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
@@ -6,6 +6,7 @@
 $mat-card-padding: 16px !default;
 $mat-card-border-radius: 4px !default;
 $mat-card-header-size: 40px !default;
+$mat-card-button-margin: 8px !default;
 
 .mat-card {
   @include mat-elevation-transition;
@@ -83,7 +84,7 @@ $mat-card-header-size: 40px !default;
 
 .mat-card-actions {
   .mat-button, .mat-raised-button {
-    margin: 0 8px;
+    margin: 0 $mat-card-button-margin;
   }
 }
 
@@ -201,7 +202,21 @@ $mat-card-header-size: 40px !default;
 .mat-card-actions .mat-button:first-child,
 .mat-card-actions .mat-raised-button:first-child {
   margin-left: 0;
+
+  [dir='rtl'] & {
+    margin-left: $mat-card-button-margin;
+    margin-right: 0;
+  }
+}
+
+.mat-card-actions .mat-button:last-child,
+.mat-card-actions .mat-raised-button:last-child {
   margin-right: 0;
+
+  [dir='rtl'] & {
+    margin-right: $mat-card-button-margin;
+    margin-left: 0;
+  }
 }
 
 // should be 12px space between titles and subtitles generally