feat(card): Add theme mixins; remove content layouts

demos/card.scss

@@ -19,3 +19,167 @@
 @import "../packages/mdc-card/mdc-card";
 @import "../packages/mdc-checkbox/mdc-checkbox";
 @import "../packages/mdc-form-field/mdc-form-field";
+@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
+@import "../packages/mdc-list/mdc-list";
+@import "../packages/mdc-ripple/mixins";
+
+.hero {
+  height: auto;
+  padding: 24px;
+}
+
+.demo-card-collection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 24px;
+}
+
+.demo-card-toggles {
+  margin: 24px;
+  padding: 24px;
+  text-align: center;
+}
+
+//
+// Card container
+//
+
+.demo-card {
+  width: 350px;
+  margin: 48px;
+}
+
+.demo-card--photo-album {
+  width: 200px;
+}
+
+//
+// Images
+//
+
+.demo-card__media {
+  background-image: url("/images/1-1.jpg");
+}
+
+.demo-card__media--16-9 {
+  background-image: url("/images/16-9.jpg");
+}
+
+.demo-card__media-content--with-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.demo-card__media-title {
+  padding: 8px 16px;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
+  color: white;
+}
+
+//
+// Focusable child elements
+//
+
+.demo-card__ripple-surface {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius;
+  @include mdc-states;
+
+  &:not([data-mdc-ripple-is-unbounded]) {
+    position: relative; // IE and Edge ignore `overflow: hidden` if the element is positioned statically
+    overflow: hidden;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+//
+// Book card
+//
+
+.demo-card__primary {
+  padding: 1rem;
+}
+
+.demo-card__title {
+  margin: 0;
+}
+
+.demo-card__subtitle {
+  @include mdc-theme-prop(color, text-secondary-on-background);
+
+  margin: 0;
+}
+
+.demo-card__secondary {
+  @include mdc-theme-prop(color, text-secondary-on-background);
+
+  padding: 0 1rem 8px 1rem;
+}
+
+//
+// Headlines card
+//
+
+.demo-card-article-group-heading {
+  @include mdc-theme-prop(color, text-secondary-on-light);
+
+  padding: 8px 16px;
+}
+
+.demo-card-article {
+  padding: 16px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.demo-card-article__title {
+  margin: 0 0 4px 0;
+}
+
+.demo-card-article__snippet {
+  @include mdc-theme-prop(color, text-secondary-on-light);
+
+  margin: 0;
+}
+
+//
+// Photo card
+//
+
+.demo-card__actions--centered {
+  justify-content: center;
+}
+
+//
+// Music card
+//
+
+.demo-card__music-row {
+  display: flex;
+}
+
+.demo-card__media--music {
+  width: 110px;
+}
+
+.demo-card__music-info {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 16px;
+}
+
+.demo-card__action-buttons--text-only {
+  margin-left: 8px;
+}
+
+.demo-card__action-icon--star {
+  margin-left: 4px;
+  margin-right: 4px;
+  cursor: pointer;
+}

demos/theme/_theme-shared.scss

@@ -264,33 +264,16 @@ figure {
 
 .demo-card-wrapper {
   display: inline-block;
-  width: 350px;
   margin: 0 24px 24px 0;
   vertical-align: top;
 }
 
-.demo-card--with-avatar .mdc-card__primary {
-  position: relative;
-}
-
-.demo-card--with-avatar .demo-card__avatar {
-  position: absolute;
-  width: 2.5rem; // 40sp
-  height: 2.5rem; // 40sp
-  border-radius: 50%;
-  background: #bdbdbd;
-}
-
-.demo-card--with-avatar .mdc-card__title,
-.demo-card--with-avatar .mdc-card__subtitle {
-  margin-left: 56px;
+.demo-card__media {
+  background-image: url("/images/1-1.jpg");
 }
 
-.demo-card--small .mdc-card__media {
-  height: 10.938rem; // 175sp, for 1:1 ratio with 175sp demo card width
-  background-image: url(/images/1-1.jpg);
-  background-repeat: no-repeat;
-  background-size: cover;
+.demo-card__media--16-9 {
+  background-image: url("/images/16-9.jpg");
 }
 
 //

demos/theme/index.html

@@ -360,46 +360,35 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
 
         <div class="demo-card-wrapper">
           <div class="mdc-card">
-            <section class="mdc-card__primary">
-              <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
-              <h3 class="mdc-card__subtitle">Subtitle here</h3>
-            </section>
-            <section class="mdc-card__supporting-text">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </section>
-            <section class="mdc-card__actions">
-              <button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
-              <button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
-            </section>
-          </div>
-        </div>
-
-        <div class="demo-card-wrapper">
-          <div class="mdc-card demo-card--with-avatar">
-            <section class="mdc-card__primary">
-              <div class="demo-card__avatar"></div>
-              <h1 class="mdc-card__title">Title</h1>
-              <h3 class="mdc-card__subtitle">Subhead</h3>
-            </section>
-            <section class="mdc-card__supporting-text">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
-            </section>
-            <section class="mdc-card__actions">
-              <button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
-              <button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
-            </section>
-          </div>
-        </div>
-
-        <div class="demo-card-wrapper">
-          <div class="mdc-card demo-card--small">
-            <section class="mdc-card__media">
-              <h1 class="mdc-card__title mdc-card__title--large">Title</h1>
-            </section>
-            <section class="mdc-card__actions">
-              <button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
-            </section>
+            <div class="mdc-card__media mdc-card__media--16-9 demo-card__media"></div>
+            <div class="mdc-card__actions">
+              <div class="mdc-card__action-buttons">
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
+              </div>
+              <div class="mdc-card__action-icons">
+                <i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
+                   tabindex="0"
+                   role="button"
+                   aria-pressed="false"
+                   aria-label="Add to favorites"
+                   title="Add to favorites"
+                   data-toggle-on='{"content": "favorite", "label": "Remove from favorites"}'
+                   data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'>
+                  favorite_border
+                </i>
+                <i class="material-icons mdc-card__action mdc-card__action--icon mdc-ripple-surface"
+                   tabindex="0"
+                   role="button"
+                   data-mdc-ripple-is-unbounded
+                   title="Share">share</i>
+                <i class="material-icons mdc-card__action mdc-card__action--icon mdc-ripple-surface"
+                   tabindex="0"
+                   role="button"
+                   data-mdc-ripple-is-unbounded
+                   title="More options">more_vert</i>
+              </div>
+            </div>
           </div>
         </div>
       </section>