diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 5afa68ab85a..031c8d7ce68 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -60,6 +60,11 @@ } @mixin mdc-button-stroke-width($stroke-width) { + // Note: Adjust padding to maintain consistent width with non-stroked buttons + $padding-value: max($mdc-button-horizontal-padding - $stroke-width, 0); + + padding-right: $padding-value; + padding-left: $padding-value; border-width: $stroke-width; // Note: line height is adjusted for stroke button because borders are not // considered as space available to text on the Web @@ -70,6 +75,13 @@ // Minus extra 1 to accommodate odd font size of dense button line-height: $mdc-dense-button-height - $stroke-width * 2 - 1; } + + &.mdc-button--compact { + $padding-compact-value: max($mdc-compact-button-horizontal-padding - $stroke-width, 0); + + padding-right: $padding-compact-value; + padding-left: $padding-compact-value; + } } @mixin mdc-button-base_() { @@ -82,7 +94,7 @@ box-sizing: border-box; min-width: 64px; height: $mdc-button-height; - padding: 0 16px; + padding: 0 $mdc-button-horizontal-padding; border: none; outline: none; text-align: center; @@ -171,7 +183,7 @@ } @mixin mdc-button--compact_() { - padding: 0 8px; + padding: 0 $mdc-compact-button-horizontal-padding; } @mixin mdc-button--dense_() { diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss index d608af4d99e..373c10ba75e 100644 --- a/packages/mdc-button/_variables.scss +++ b/packages/mdc-button/_variables.scss @@ -15,7 +15,9 @@ // $mdc-button-height: 36px; +$mdc-button-horizontal-padding: 16px; $mdc-dense-button-height: 32px; +$mdc-compact-button-horizontal-padding: 8px; $mdc-unfilled-button-ripple-opacity: .16; $mdc-filled-button-ripple-opacity: .32;