Create dividers on lists

index.html

@@ -37,6 +37,7 @@
           <md-list-item v-link="button">Button</md-list-item>
           <md-list-item v-link="button-toggle">Button Toggle</md-list-item>
           <md-list-item v-link="icon">Icon</md-list-item>
+          <md-list-item v-link="divider">Divider</md-list-item>
           <md-list-item v-link="ripple">Ripple</md-list-item>
           <md-list-item v-link="list">List</md-list-item>
           <md-list-item v-link="sidenav">Sidenav</md-list-item>

src/components/mdDivider/index.js

@@ -0,0 +1,5 @@
+import mdDivider from './mdDivider.vue';
+
+export default function install(Vue) {
+  Vue.component('md-divider', Vue.extend(mdDivider));
+}

src/components/mdDivider/mdDivider.scss

@@ -0,0 +1,14 @@
+@import '../../core/variables.scss';
+
+.md-divider {
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  display: block;
+  border: 0;
+  background-color: rgba(#000, .12);
+
+  &.md-inset {
+    margin-left: 72px;
+  }
+}

src/components/mdDivider/mdDivider.vue

@@ -0,0 +1,5 @@
+<template>
+  <hr class="md-divider">
+</template>
+
+<style lang="scss" src="./mdDivider.scss"></style>

src/components/mdList/mdList.scss

@@ -19,7 +19,6 @@
       }
 
       .md-list-item-container {
-        padding: 2px 16px;
         font-size: 13px;
 
         .md-avatar:first-child {
@@ -101,6 +100,10 @@
       min-height: 88px;
     }
 
+    .md-avatar {
+      margin: 0;
+    }
+
     .md-list-item-container {
       align-items: flex-start;
     }
@@ -123,7 +126,7 @@
     width: 100%;
     min-height: 0;
     margin: 0;
-    padding: 6px 16px;
+    padding: 0 16px;
     display: flex;
     position: relative;
     flex: 1 1 auto;
@@ -156,6 +159,13 @@
     }
   }
 
+  .md-divider {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+
   .md-icon,
   .md-avatar {
     margin: 0;
@@ -165,6 +175,11 @@
     }
   }
 
+  .md-avatar {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
   .md-icon {
     color: rgba(#000, .54);
   }

src/components/mdList/mdList.theme

@@ -1,7 +1,7 @@
 .THEME_NAME {
   .md-list,
   &.md-list {
-    background-color: BACKGROUND-COLOR-50;
+    background-color: BACKGROUND-COLOR-A100;
     color: BACKGROUND-CONTRAST;
   }
 }

src/docs/pages/Divider.vue

@@ -0,0 +1,17 @@
+<template>
+  <section>
+    <md-divider></md-divider>
+
+    <md-divider class="md-inset"></md-divider>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  section {
+    margin: 24px;
+  }
+
+  .md-divider {
+    margin-top: 24px;
+  }
+</style>

src/docs/pages/Home.vue

@@ -1,5 +1,31 @@
 <template>
   <section>
-    Home
+    <md-input-container>
+      <label>Username</label>
+      <input type="password" v-model="test" id="password">
+    </md-input-container>
+
+    <md-button class="md-icon-button" @click="togglePassword">
+      <md-icon>visibility</md-icon>
+    </md-button>
+
+    {{ test }}
   </section>
 </template>
+
+<script>
+  export default {
+    methods: {
+      togglePassword() {
+        let passwordField = document.querySelector('#password');
+        let type = passwordField.type;
+
+        if (type === 'password') {
+          passwordField.type = 'text';
+        } else {
+          passwordField.type = 'password';
+        }
+      }
+    }
+  };
+</script>

src/docs/pages/List.vue

@@ -23,6 +23,8 @@
 
           <md-list-item>
             <md-icon>error</md-icon> <span>Spam</span>
+
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -83,6 +85,8 @@
 
           <md-list-item>
             <md-icon>error</md-icon> <span>Spam</span>
+
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -149,6 +153,8 @@
               <span>(650) 555-1234</span>
               <span>Mobile</span>
             </div>
+
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -197,6 +203,8 @@
               <span>(650) 555-1234</span>
               <span>Mobile</span>
             </div>
+
+            <md-divider class="md-inset"></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -243,6 +251,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon class="md-primary">star</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -259,6 +269,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -275,6 +287,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -291,6 +305,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
         </md-list>
       </div>
@@ -315,6 +331,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon class="md-primary">star</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -331,6 +349,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -347,6 +367,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
 
           <md-list-item>
@@ -363,6 +385,8 @@
             <md-button class="md-icon-button md-list-action">
               <md-icon>star_border</md-icon>
             </md-button>
+
+            <md-divider></md-divider>
           </md-list-item>
         </md-list>
       </div>

src/docs/routes.js

@@ -8,6 +8,7 @@ import Avatar from './pages/Avatar';
 import BottomBar from './pages/BottomBar';
 import Buttons from './pages/Buttons';
 import ButtonToggle from './pages/ButtonToggle';
+import Divider from './pages/Divider';
 import Icon from './pages/Icon';
 import Ripple from './pages/Ripple';
 import List from './pages/List';
@@ -48,6 +49,10 @@ router.map({
     name: 'icon',
     component: Icon
   },
+  '/divider': {
+    name: 'divider',
+    component: Divider
+  },
   '/ripple': {
     name: 'ripple',
     component: Ripple

src/vue-material.js

@@ -3,6 +3,7 @@ import MdTheme from './components/mdTheme';
 import MdInkRipple from './components/mdInkRipple';
 import MdButton from './components/mdButton';
 import MdButtonToggle from './components/mdButtonToggle';
+import MdDivider from './components/mdDivider';
 import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
 import MdToolbar from './components/mdToolbar';
@@ -16,6 +17,7 @@ let options = {
   MdBottomBar,
   MdButton,
   MdButtonToggle,
+  MdDivider,
   MdIcon,
   MdInkRipple,
   MdList,