Create first spec of cards

docs/src/App.vue

@@ -39,6 +39,10 @@
                   <router-link exact to="/components/button-toggle">Button Toggle</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/card">Card</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/checkbox">Checkbox</router-link>
                 </md-list-item>

docs/src/pages/components/Card.vue

@@ -0,0 +1,255 @@
+<template>
+  <demo-page label="Components - Card">
+    <div slot="examples">
+      <demo-example label="Default">
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+          </md-card-content>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-2.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+          </md-card-content>
+        </md-card>
+
+        <md-card md-with-hover>
+          <md-card-header>
+            <md-avatar>
+              <img src="assets/avatar.png" alt="People">
+            </md-avatar>
+
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-2.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-header>
+            <div class="md-title">Title goes here</div>
+            <div class="md-subhead">Subtitle here</div>
+          </md-card-header>
+
+          <md-card-content>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-media>
+            <img src="assets/card-image-1.jpg" alt="People">
+          </md-card-media>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card>
+          <md-card-media-cover md-text-scrim>
+            <md-card-media>
+              <img src="assets/card-image-3.jpg" alt="People">
+            </md-card-media>
+
+            <md-card-area>
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+            </md-card-area>
+          </md-card-media-cover>
+        </md-card>
+
+        <md-card>
+          <md-card-media-cover md-solid>
+            <md-card-media>
+              <img src="assets/card-image-2.jpg" alt="People">
+            </md-card-media>
+
+            <md-card-area>
+              <md-card-header>
+                <div class="md-title">Title goes here</div>
+                <div class="md-subhead">Subtitle here</div>
+              </md-card-header>
+
+              <md-card-actions>
+                <md-button>Action</md-button>
+                <md-button>Action</md-button>
+              </md-card-actions>
+            </md-card-area>
+          </md-card-media-cover>
+        </md-card>
+
+        <md-card md-with-hover>
+          <md-card-area v-md-ink-ripple>
+            <md-card-header>
+              <md-avatar>
+                <img src="assets/avatar.png" alt="People">
+              </md-avatar>
+
+              <div class="md-title">Title goes here</div>
+              <div class="md-subhead">Subtitle here</div>
+            </md-card-header>
+
+            <md-card-media>
+              <img src="assets/card-image-1.jpg" alt="People">
+            </md-card-media>
+
+            <md-card-content>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
+            </md-card-content>
+          </md-card-area>
+
+          <md-card-actions>
+            <md-button>Action</md-button>
+            <md-button>Action</md-button>
+          </md-card-actions>
+        </md-card>
+
+        <md-card class="card-example" v-md-theme="'blue'">
+          <md-card-area md-inset>
+            <md-card-media>
+              <img src="assets/card-example.jpg" alt="Coffee House">
+            </md-card-media>
+
+            <md-card-header>
+              <h2 class="md-title">Coffee House</h2>
+              <div class="md-subhead">
+                <md-icon>location_on</md-icon>
+                <span>2 miles</span>
+              </div>
+            </md-card-header>
+
+            <md-card-content>
+              Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
+            </md-card-content>
+          </md-card-area>
+
+          <md-card-content>
+            <h3 class="md-subheading">Today's availability</h3>
+            <div class="card-reservation">
+              <md-icon>access_time</md-icon>
+              <md-button-toggle type="radio" class="md-button-group">
+                <md-button>5:30PM</md-button>
+                <md-button>7:30PM</md-button>
+                <md-button>9:00PM</md-button>
+              </md-button-toggle>
+            </div>
+          </md-card-content>
+
+          <md-card-actions>
+            <md-button class="md-primary">Reserve</md-button>
+          </md-card-actions>
+        </md-card>
+      </demo-example>
+    </div>
+
+    <div slot="code">
+
+    </div>
+
+    <div slot="api">
+
+    </div>
+  </demo-page>
+</template>
+
+<style lang="scss" scoped>
+  .md-card {
+    width: 300px;
+    margin: 0 4px 16px;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .card-example {
+    width: 340px;
+
+    .md-subhead {
+      .md-icon {
+        $size: 16px;
+
+        width: $size;
+        min-width: $size;
+        height: $size;
+        min-height: $size;
+        font-size: $size;
+        line-height: $size;
+      }
+    }
+
+    .card-reservation {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+
+      .md-icon {
+        color: rgba(#000, .54) !important;
+      }
+
+      .md-button {
+        border-radius: 2px !important;
+      }
+    }
+  }
+</style>

docs/src/routes.js

@@ -10,6 +10,7 @@ import Avatar from './pages/components/Avatar';
 import BottomBar from './pages/components/BottomBar';
 import Buttons from './pages/components/Buttons';
 import ButtonToggle from './pages/components/ButtonToggle';
+import Card from './pages/components/Card';
 import Checkbox from './pages/components/Checkbox';
 import Icon from './pages/components/Icon';
 import Input from './pages/components/Input';
@@ -82,6 +83,11 @@ const components = [
     name: 'components:button-toggle',
     component: ButtonToggle
   },
+  {
+    path: '/components/card',
+    name: 'components:card',
+    component: Card
+  },
   {
     path: '/components/checkbox',
     name: 'components:checkbox',

src/components/mdCard/index.js

@@ -0,0 +1,20 @@
+import mdCard from './mdCard.vue';
+import mdCardMedia from './mdCardMedia.vue';
+import mdCardMediaCover from './mdCardMediaCover.vue';
+import mdCardHeader from './mdCardHeader.vue';
+import mdCardContent from './mdCardContent.vue';
+import mdCardActions from './mdCardActions.vue';
+import mdCardArea from './mdCardArea.vue';
+import mdCardTheme from './mdCard.theme';
+
+export default function install(Vue) {
+  Vue.component('md-card', Vue.extend(mdCard));
+  Vue.component('md-card-media', Vue.extend(mdCardMedia));
+  Vue.component('md-card-media-cover', Vue.extend(mdCardMediaCover));
+  Vue.component('md-card-header', Vue.extend(mdCardHeader));
+  Vue.component('md-card-content', Vue.extend(mdCardContent));
+  Vue.component('md-card-actions', Vue.extend(mdCardActions));
+  Vue.component('md-card-area', Vue.extend(mdCardArea));
+
+  Vue.material.styles.push(mdCardTheme);
+}

src/components/mdCard/mdCard.scss

@@ -0,0 +1,170 @@
+@import '../../core/stylesheets/variables.scss';
+
+$card-radius: 2px;
+
+.md-card {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  border-radius: $card-radius;
+  box-shadow: $material-shadow-2dp;
+
+  &.md-with-hover {
+    cursor: pointer;
+    transition: $swift-ease-out;
+    transition-property: box-shadow;
+
+    &:hover {
+      z-index: 2;
+      box-shadow: $material-shadow-8dp;
+    }
+  }
+
+  .md-card-media {
+    position: relative;
+
+    + .md-card-header {
+      padding-top: 24px;
+    }
+
+    + .md-card-content:last-child {
+      padding-bottom: 16px;
+    }
+  }
+
+  .md-card-header {
+    padding: 16px;
+
+    + .md-card-content {
+      padding-top: 0;
+    }
+
+    + .md-card-actions:not(:last-child) {
+      padding: 0 8px;
+    }
+
+    .md-avatar {
+      margin-right: 16px;
+      float: left;
+
+      ~ .md-title {
+        font-size: 14px;
+      }
+
+      ~ .md-title,
+      ~ .md-subhead {
+        font-weight: 500;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .md-subhead,
+  .md-title,
+  .md-subheading {
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .md-subhead {
+    opacity: .54;
+    font-size: 14px;
+    letter-spacing: .01em;
+    line-height: 20px;
+  }
+
+  .md-title {
+    font-size: 24px;
+    letter-spacing: 0;
+    line-height: 32px;
+  }
+
+  .md-card-content {
+    padding: 16px;
+    font-size: 14px;
+    line-height: 22px;
+
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  .md-card-actions {
+    padding: 8px;
+    display: flex;
+    justify-content: flex-end;
+
+    .md-button {
+      margin: 0;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      + .md-button {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .md-card-area {
+    position: relative;
+  }
+
+  > .md-card-area {
+    &:not(.md-inset) {
+      border-bottom: 1px solid;
+    }
+
+    &.md-inset {
+      position: relative;
+
+      &:after {
+        height: 1px;
+        position: absolute;
+        right: 16px;
+        bottom: 0;
+        left: 16px;
+        content: " ";
+      }
+    }
+  }
+
+  .md-card-media-cover {
+    position: relative;
+    color: #fff;
+
+    &.md-text-scrim {
+      .md-backdrop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+      }
+    }
+
+    .md-card-area {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 2;
+    }
+
+    .md-card-header + .md-card-actions {
+      padding-top: 0;
+    }
+
+    .md-subhead {
+      opacity: 1;
+    }
+  }
+}

src/components/mdCard/mdCard.theme

@@ -0,0 +1,30 @@
+.THEME_NAME {
+  .md-card,
+  &.md-card {
+    > .md-card-area {
+      &:not(.md-inset) {
+        border-bottom-color: #{'BACKGROUND-CONTRAST-0.12'};
+      }
+
+      &.md-inset {
+        &:after {
+          background-color: #{'BACKGROUND-CONTRAST-0.12'};
+        }
+      }
+    }
+
+    .md-card-media-cover {
+      &.md-text-scrim {
+        .md-backdrop {
+          background: linear-gradient(to bottom, #{'BACKGROUND-CONTRAST-0.0'} 20%, #{'BACKGROUND-CONTRAST-0.275'} 66%, #{'BACKGROUND-CONTRAST-0.55'} 100%);
+        }
+      }
+
+      &.md-solid {
+        .md-card-area {
+          background-color: #{'BACKGROUND-CONTRAST-0.4'};
+        }
+      }
+    }
+  }
+}

src/components/mdCard/mdCard.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="md-card" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" src="./mdCard.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdWithHover: Boolean
+    },
+    computed: {
+      classes() {
+        return {
+          'md-with-hover': this.mdWithHover
+        };
+      }
+    }
+  };
+</script>

src/components/mdCard/mdCardActions.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-actions">
+    <slot></slot>
+  </div>
+</template>

src/components/mdCard/mdCardArea.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="md-card-area" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      mdInset: Boolean
+    },
+    computed: {
+      classes() {
+        return {
+          'md-inset': this.mdInset
+        };
+      }
+    }
+  };
+</script>

src/components/mdCard/mdCardContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-content">
+    <slot></slot>
+  </div>
+</template>

src/components/mdCard/mdCardHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-header">
+    <slot></slot>
+  </div>
+</template>

src/components/mdCard/mdCardMedia.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-card-media">
+    <slot></slot>
+  </div>
+</template>

src/components/mdCard/mdCardMediaCover.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="md-card-media-cover" :class="classes">
+    <slot></slot>
+    <div class="md-backdrop" :style="styles" v-if="mdTextScrim" ref="backdrop"></div>
+  </div>
+</template>
+
+<script>
+  const getImageAlpha = (image, onLoad) => {
+    let canvas = document.createElement('canvas');
+
+    image.onload = function() {
+      let colorSum = 0;
+      let ctx;
+      let imageData;
+      let imageMetadata;
+      let r;
+      let g;
+      let b;
+      let average;
+
+      canvas.width = this.width;
+      canvas.height = this.height;
+      ctx = canvas.getContext('2d');
+
+      ctx.drawImage(this, 0, 0);
+
+      imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      imageMetadata = imageData.data;
+
+      for (let x = 0, len = imageMetadata.length; x < len; x += 4) {
+        r = imageMetadata[x];
+        g = imageMetadata[x + 1];
+        b = imageMetadata[x + 2];
+
+        average = Math.floor((r + g + b) / 3);
+        colorSum += average;
+      }
+
+      onLoad(Math.floor(colorSum / (this.width * this.height)));
+    };
+  };
+
+  export default {
+    props: {
+      mdTextScrim: Boolean,
+      mdSolid: Boolean
+    },
+    data() {
+      return {
+        backdropBg: {}
+      };
+    },
+    computed: {
+      classes() {
+        return {
+          'md-text-scrim': this.mdTextScrim,
+          'md-solid': this.mdSolid
+        };
+      },
+      styles() {
+        return {
+          background: this.backdropBg
+        };
+      }
+    },
+    methods: {
+      applyScrimColor(darkness) {
+        if (this.$refs.backdrop) {
+          this.backdropBg = `linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, ${darkness / 2}) 66%, rgba(0, 0, 0, ${darkness}) 100%)`;
+        }
+      },
+      applySolidColor(darkness) {
+        let area = this.$el.querySelector('.md-card-area');
+
+        if (area) {
+          area.style.background = `rgba(0, 0, 0, ${darkness})`;
+        }
+      }
+    },
+    mounted() {
+      let image = this.$el.querySelector('img');
+
+      if (image && (this.mdTextScrim || this.mdSolid)) {
+        getImageAlpha(image, (lightness) => {
+          let limit = 256;
+          let darkness = Math.abs(limit - lightness) * 100 / limit;
+
+          if (this.mdTextScrim) {
+            this.applyScrimColor((darkness + 35) / 100);
+          } else if (this.mdSolid) {
+            this.applySolidColor((darkness + 20) / 100);
+          }
+        });
+      }
+    }
+  };
+</script>

src/core/stylesheets/variables.scss

@@ -5,7 +5,7 @@ $font-roboto: Roboto, Lato, sans-serif;
 
 
 
-/*  Transitions
+/*  Transitions - Based on Angular Material
    ========================================================================== */
 
 $swift-ease-out-duration: .4s !default;
@@ -34,7 +34,7 @@ $material-leave: all $material-leave-duration $material-leave-timing-function;
 
 
 
-/*  Elevation
+/*  Elevation - Based on Angular Material
    ========================================================================== */
 
 $shadow-key-umbra-opacity: .2 !default;

src/index.js

@@ -4,6 +4,7 @@ import mdBottomBar from './components/mdBottomBar';
 import mdButton from './components/mdButton';
 import mdButtonToggle from './components/mdButtonToggle';
 import mdCheckbox from './components/mdCheckbox';
+import mdCard from './components/mdCard';
 import mdDivider from './components/mdDivider';
 import mdIcon from './components/mdIcon';
 import mdInputContainer from './components/mdInputContainer';
@@ -25,6 +26,7 @@ let options = {
   mdButton,
   mdButtonToggle,
   mdCheckbox,
+  mdCard,
   mdDivider,
   mdIcon,
   mdInputContainer,