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 13, 2018 · 63bba7e · 63bba7e
1 parent e9466a4
commit 63bba7e
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;
+  }
 }
 
 .mat-card-title {