feat(card): improved to behave as spec

Added all functionality as seen in: http://www.google.com/design/spec/components/cards.html#cards-content-blocks *MISSING DOCUMENTATION* fixes #1900
angular · Nov 7, 2015 · d8d5517 · d8d5517
1 parent 1ae16cb
commit d8d5517
Show file tree

Hide file tree

Showing 8 changed files with 450 additions and 61 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -15,8 +15,8 @@ $button-fab-mini-line-height: rem(4.00) !default;
 
 $button-fab-toast-offset: $button-fab-height * 0.75 !default;
 
-$icon-button-height: rem(4.800) !default;
-$icon-button-width: rem(4.800) !default;
+$icon-button-height: rem(4.000) !default;
+$icon-button-width: rem(4.000) !default;
 $icon-button-margin: rem(0.600) !default;
 
 // Fix issue causing buttons in Firefox to be 2px bigger than they should
@@ -93,9 +93,8 @@ button.md-button::-moz-focus-inner {
     margin: 0 $icon-button-margin;
     height: $icon-button-height;
     min-width: 0;
-    line-height: $icon-button-height;
-    padding-left: 0;
-    padding-right: 0;
+    line-height: $icon-size;
+    padding: $baseline-grid;
     width: $icon-button-width;
     border-radius: $button-icon-border-radius;
     .md-ripple-container {

diff --git a/src/components/card/card-theme.scss b/src/components/card/card-theme.scss
@@ -7,4 +7,29 @@ md-card.md-THEME_NAME-theme {
   .md-card-image {
     border-radius: $card-border-radius $card-border-radius 0 0;
   }
+
+  md-card-header {
+    md-card-avatar {
+      background-color: '{{foreground-3}}';
+
+      md-icon {
+        color: '{{background-color}}';
+      }
+    }
+    md-card-header-text {
+      .md-subhead {
+        color: '{{foreground-2}}'
+      }
+    }
+  }
+
+  md-card-title {
+    md-card-title-text {
+      &:not(:only-child) {
+        .md-subhead {
+          color: '{{foreground-2}}';
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -9,6 +9,52 @@ md-card {
 
   box-shadow: $card-box-shadow;
 
+  md-card-header {
+    padding: $card-padding;
+    display: flex;
+    flex-direction: row;
+
+    &:first-child {
+      md-card-avatar {
+        margin-right: 12px;
+      }
+    }
+
+    &:last-child {
+      md-card-avatar {
+        margin-left: 12px;
+      }
+    }
+
+    md-card-avatar {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+
+      md-icon {
+        padding: 8px;
+      }
+
+      & + md-card-header-text {
+        max-height: 40px;
+
+        .md-title {
+          font-size: 14px;
+        }
+      }
+    }
+
+    md-card-header-text {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .md-subhead {
+        font-size: 14px;
+      }
+    }
+  }
+
   > img,
   > :not(md-card-content) img {
     display: flex;
@@ -17,21 +63,131 @@ md-card {
     height: auto;
   }
 
+  md-card-title {
+    padding: 3 * $card-padding / 2 $card-padding $card-padding;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+
+    & + md-card-content {
+      padding-top: 0;
+    }
+
+    md-card-title-text {
+      flex: 1;
+      flex-direction: column;
+      display: flex;
+
+      .md-subhead {
+        padding-top: 0;
+        font-size: 14px;
+      }
+
+      &:only-child {
+        .md-subhead {
+          padding-top: 3 * $card-padding / 4;
+        }
+      }
+    }
+
+    md-card-title-media {
+      margin-top: - $card-padding / 2;
+
+      .sm-media {
+        height: 80px;
+        width: 80px;
+      }
+      .md-media {
+        height: 112px;
+        width: 112px;
+      }
+      .lg-media {
+        height: 152px;
+        width: 152px;
+      }
+    }
+  }
+
   md-card-content {
     display: block;
     padding: $card-padding;
+
+    & > p {
+      margin: 0;
+    }
+
+    .xl-media {
+      height: 240px;
+      width: 240px;
+    }
   }
 
   .md-actions, md-card-actions {
-    margin: 0;
+    margin: $baseline-grid;
+
+    &.layout-column {
+      .md-button {
+        &:not(.md-icon-button) {
+          margin: $baseline-grid / 4 0;
+
+          &:first-of-type {
+            margin-top: 0;
+          }
+
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
 
-    .md-button {
-      margin-bottom: $baseline-grid;
-      margin-top: $baseline-grid;
-      margin-right: $baseline-grid * .5;
-      margin-left: $baseline-grid * .5;
+        &.md-icon-button {
+          margin-top: 3 * $baseline-grid / 4;
+          margin-bottom: 3 * $baseline-grid / 4;
+        }
+      }
+    }
+
+    md-card-icon-actions {
+      flex: 1;
+      justify-content: flex-start;
+      display: flex;
+      flex-direction: row;
+    }
+
+    &:not(.layout-column) .md-button {
+      &:not(.md-icon-button) {
+        margin: 0 $baseline-grid * .5;
+
+        &:first-of-type {
+          margin-left: 0;
+        }
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+
+      &.md-icon-button {
+        margin-left: 3 * $baseline-grid / 4;
+        margin-right: 3 * $baseline-grid / 4;
+
+        &:first-of-type {
+          margin-left: 3 * $baseline-grid / 2;
+        }
+
+        &:last-of-type {
+          margin-right: 3 * $baseline-grid / 2;
+        }
+      }
+
+      & + md-card-icon-actions {
+        flex: 1;
+        justify-content: flex-end;
+        display: flex;
+        flex-direction: row;
+      }
     }
   }
+
   md-card-footer {
     margin-top: auto;
     padding: $card-padding;