diff --git a/demos/button.html b/demos/button.html index c754e1556b3..07294003844 100644 --- a/demos/button.html +++ b/demos/button.html @@ -201,6 +201,30 @@

Ripple Enabled

+
+ Stroked Button +
+ + + + + + + Link + +
+
+

CSS Only

Text Button @@ -273,6 +297,30 @@

CSS Only

+ +
+ Stroked Button +
+ + + + + + + Link + +
+
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 0bca94a52f1..3471dfc279c 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -71,6 +71,14 @@ semantically correct. ``` +#### Stroked Button + +```html + +``` + ### Button state #### Disabled @@ -138,6 +146,7 @@ The provided modifiers are: | --------------------- | ------------------------------------------------------- | | `mdc-button--raised` | A contained button that is elevated upon the surface. | | `mdc-button--unelevated` | A contained button that is flush with the surface. | +| `mdc-button--stroked` | A contained button that is flush with the surface and has a visible border. | | `mdc-button--dense` | Compresses the button text to make it slightly smaller. | | `mdc-button--compact` | Reduces the amount of horizontal padding in the button. | | `mdc-button--primary` | Colors the button with the primary color. | diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index 9b9b08dcdf6..877a4be5304 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/packages/mdc-button/mdc-button.scss @@ -94,6 +94,23 @@ } } +.mdc-button--stroked { + @include mdc-theme-prop(border-color, text-primary-on-light); + + border-width: 2px; + border-style: solid; + line-height: 32px; + + @include mdc-theme-dark(".mdc-button") { + @include mdc-theme-prop(border-color, text-primary-on-dark); + } + + // postcss-bem-linter: ignore + &.mdc-button--dense { + line-height: 27px; // To accommodate odd font size of dense button + } +} + .mdc-button--compact { padding: 0 8px; } @@ -134,6 +151,14 @@ @include mdc-theme-prop(background-color, $theme-style); @include mdc-theme-prop(color, text-primary-on-#{$theme-style}); } + // postcss-bem-linter: ignore + &.mdc-button--stroked { + @include mdc-theme-prop(border-color, $theme-style); + + @include mdc-theme-dark(".mdc-button") { + @include mdc-theme-prop(border-color, $theme-style); + } + } } } @@ -168,4 +193,15 @@ } } } + +.mdc-button--stroked { + fieldset:disabled &, + &:disabled { + border-color: rgba(black, .38); + + @include mdc-theme-dark(".mdc-button") { + @include mdc-theme-prop(border-color, text-disabled-on-dark); + } + } +} // postcss-bem-linter: end