diff --git a/demos/card.html b/demos/card.html index bc33708e5df..fe0447d4ca0 100644 --- a/demos/card.html +++ b/demos/card.html @@ -99,7 +99,7 @@

by Kurt Wagner

-
+
Headlines

diff --git a/demos/shape.html b/demos/shape.html index 4ea00301ec8..0da403ba42d 100644 --- a/demos/shape.html +++ b/demos/shape.html @@ -88,7 +88,7 @@

Stroked

Card

-
+
diff --git a/demos/shape.scss b/demos/shape.scss index 673476d471c..f013e58bacd 100644 --- a/demos/shape.scss +++ b/demos/shape.scss @@ -61,7 +61,7 @@ .card-container { @include mdc-shape-angled-corner($mdc-theme-background, 24px, 4px); - @include mdc-shape-angled-corner-stroke($mdc-card-stroke-width, $mdc-card-stroke-color); + @include mdc-shape-angled-corner-stroke($mdc-card-outline-width, $mdc-card-outline-color); } .demo-card { diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index d98afb77237..9547795fe56 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -171,7 +171,7 @@ elements: CSS Class | Description --- | --- `mdc-card` | Mandatory, for the card element -`mdc-card--stroked` | Removes the shadow and displays a hairline stroke instead +`mdc-card--outlined` | Removes the shadow and displays a hairline outline instead `mdc-card__primary-action` | The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`. Only applicable to cards that have a primary action that the main surface should trigger. `mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover` `mdc-card__media--square` | Automatically scales the media area's height to equal its width @@ -190,6 +190,6 @@ CSS Class | Description Mixin | Description --- | --- `mdc-card-fill-color($color)` | Sets the fill color of a card -`mdc-card-stroke($color, $thickness)` | Sets the color and thickness of a card's stroke (but does _not_ remove its shadow) +`mdc-card-outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow) `mdc-card-corner-radius($radius)` | Sets the corner radius of a card `mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss index 30a929cc3b1..6e91947d7e2 100644 --- a/packages/mdc-card/_mixins.scss +++ b/packages/mdc-card/_mixins.scss @@ -24,7 +24,7 @@ @include mdc-theme-prop(background-color, $color); } -@mixin mdc-card-stroke($color, $thickness: $mdc-card-stroke-width) { +@mixin mdc-card-outline($color, $thickness: $mdc-card-outline-width) { border: $thickness solid mdc-theme-prop-value($color); } diff --git a/packages/mdc-card/_variables.scss b/packages/mdc-card/_variables.scss index b81a9af1e6f..67f43a3d930 100644 --- a/packages/mdc-card/_variables.scss +++ b/packages/mdc-card/_variables.scss @@ -16,5 +16,5 @@ @import "@material/theme/mixins"; -$mdc-card-stroke-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%); -$mdc-card-stroke-width: 1px; +$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%); +$mdc-card-outline-width: 1px; diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss index 2686259f225..c8a75837809 100644 --- a/packages/mdc-card/mdc-card.scss +++ b/packages/mdc-card/mdc-card.scss @@ -30,9 +30,9 @@ @include mdc-card-container-layout_; } -.mdc-card--stroked { +.mdc-card--outlined { @include mdc-elevation(0); - @include mdc-card-stroke($mdc-card-stroke-color); + @include mdc-card-outline($mdc-card-outline-color); } //