WIP Tweak icon margin differently for flat vs. contained

material-components · Mar 21, 2018 · 5c84f6c · 5c84f6c
1 parent d02d9d1
commit 5c84f6c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -126,7 +126,7 @@
 }
 
 @mixin mdc-button__icon_ {
-  @include mdc-rtl-reflexive-box(margin, right, 8px);
+  @include mdc-button__icon-margin_(-2px);
 
   display: inline-block;
   width: 18px;
@@ -142,8 +142,9 @@
   vertical-align: middle;
 }
 
-@mixin mdc-button__icon-contained_ {
-  @include mdc-rtl-reflexive-property(margin, -4px, 8px);
+@mixin mdc-button__icon-margin_($margin) {
+  // Sets margin on the side of the icon nearest the button edge to the given value; other side has constant margin
+  @include mdc-rtl-reflexive-property(margin, $margin, $mdc-button-icon-label-margin);
 }
 
 @mixin mdc-button--stroked_() {

diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
@@ -17,4 +17,5 @@
 $mdc-button-height: 36px;
 $mdc-button-horizontal-padding: 8px;
 $mdc-button-contained-horizontal-padding: 16px;
+$mdc-button-icon-label-margin: 8px;
 $mdc-dense-button-height: 32px;
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -46,8 +46,8 @@
 .mdc-button--raised,
 .mdc-button--stroked {
   .mdc-button__icon {
-    // Icons inside contained buttons have different styles due to increased button padding
-    @include mdc-button__icon-contained_;
+    // Contained buttons have a different icon-side margin due to increased overall button padding
+    @include mdc-button__icon-margin_(-4px);
   }
 }