feat(divider): add implementation of the divider component

This commit adds an implementation of the "divider" component which groups and separates content within lists and page layouts using strong visual and spatial distinctions. Demos and docs accompany the implementation.

Closes #194. Closes #250.

config/build.config.js

@@ -92,6 +92,7 @@ module.exports = {
       'src/components/toast/toast.js',
       'src/components/toolbar/toolbar.js',
       'src/components/whiteframe/whiteframe.js',
+      'src/components/divider/divider.js',
 
       //Services
       'src/services/decorators.js',

src/components/divider/README.MD

@@ -0,0 +1 @@
+Dividers, created with the `<material-divider>` directive.

src/components/divider/_divider.scss

@@ -1,5 +1,9 @@
 material-divider {
   display: block;
-  border-bottom: 1px solid #d2d2d2;
-  margin-top: 5px;
-}
+  border-top: 1px solid $color-divider;
+  margin: 0;
+
+  &[inset] {
+    margin-left: $baseline-grid * 10;
+  }
+}

src/components/divider/demo1/index.html

@@ -0,0 +1,51 @@
+<div ng-app="app" ng-controller="AppCtrl">
+
+  <material-toolbar class="material-theme-light">
+    <h1 class="material-toolbar-tools">
+      <span>Full Bleed</span>
+    </h1>
+  </material-toolbar>
+
+  <material-content>
+    <material-list>
+      <material-item ng-repeat="item in messages">
+        <material-item-content>
+          <div class="material-tile-content">
+            <h2>{{item.what}}</h2>
+            <h3>{{item.who}}</h3>
+            <p>
+              {{item.notes}}
+            </p>
+          </div>
+        </material-item-content>
+        <material-divider ng-if="!$last"></material-divider>
+      </material-item>
+    </material-list>
+  </material-content>
+
+  <material-toolbar class="material-theme-light">
+    <h1 class="material-toolbar-tools">
+      <span>Inset</span>
+    </h1>
+  </material-toolbar>
+
+  <material-content>
+    <material-list>
+      <material-item ng-repeat="item in messages">
+        <material-item-content>
+          <div class="material-tile-left">
+            <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
+          </div>
+          <div class="material-tile-content">
+            <h2>{{item.what}}</h2>
+            <h3>{{item.who}}</h3>
+            <p>
+              {{item.notes}}
+            </p>
+          </div>
+        </material-item-content>
+        <material-divider inset ng-if="!$last"></material-divider>
+      </material-item>
+    </material-list>
+  </material-content>
+</div>

src/components/divider/demo1/script.js

@@ -0,0 +1,34 @@
+angular.module('app', ['ngMaterial'])
+  .controller('AppCtrl', function($scope) {
+    $scope.messages = [{
+      face: '/img/list/60.jpeg',
+      what: 'Brunch this weekend?',
+      who: 'Min Li Chan',
+      when: '3:08PM',
+      notes: " I'll be in your neighborhood doing errands"
+    }, {
+      face: '/img/list/60.jpeg',
+      what: 'Brunch this weekend?',
+      who: 'Min Li Chan',
+      when: '3:08PM',
+      notes: " I'll be in your neighborhood doing errands"
+    }, {
+      face: '/img/list/60.jpeg',
+      what: 'Brunch this weekend?',
+      who: 'Min Li Chan',
+      when: '3:08PM',
+      notes: " I'll be in your neighborhood doing errands"
+    }, {
+      face: '/img/list/60.jpeg',
+      what: 'Brunch this weekend?',
+      who: 'Min Li Chan',
+      when: '3:08PM',
+      notes: " I'll be in your neighborhood doing errands"
+    }, {
+      face: '/img/list/60.jpeg',
+      what: 'Brunch this weekend?',
+      who: 'Min Li Chan',
+      when: '3:08PM',
+      notes: " I'll be in your neighborhood doing errands"
+    }];
+  });

src/components/divider/demo1/style.css

@@ -0,0 +1,6 @@
+.face {
+  border-radius: 30px;
+  border: 1px solid #ddd;
+  width: 48px;
+  margin: 16px;
+}

src/components/divider/divider.js

@@ -0,0 +1,37 @@
+/**
+ * @ngdoc module
+ * @name material.components.divider
+ * @description Divider module!
+ */
+angular.module('material.components.divider', [
+  'material.animations',
+  'material.services.aria'
+])
+  .directive('materialDivider', MaterialDividerDirective);
+
+function MaterialDividerController(){}
+
+/**
+ * @ngdoc directive
+ * @name materialDivider
+ * @module material.components.divider
+ * @restrict E
+ *
+ * @description
+ * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content.
+ *
+ * @param {boolean=} inset Add this attribute to activate the inset divider style.
+ * @usage
+ * <hljs lang="html">
+ * <material-divider></material-divider>
+ *
+ * <material-divider inset></material-divider>
+ * </hljs>
+ *
+ */
+function MaterialDividerDirective() {
+  return {
+    restrict: 'E',
+    controller: [MaterialDividerController]
+  };
+}

src/components/divider/module.json

@@ -0,0 +1,10 @@
+{
+  "module": "material.components.divider",
+  "name": "Divider",
+  "demos": {
+    "demo1": {
+      "name": "Divider Usage",
+      "files": ["demo1/*"]
+    }
+  }
+}

src/components/list/_list.scss

@@ -1,7 +1,12 @@
 material-list {
+
 }
 
 material-item {
+
+}
+
+material-item-content {
   @include flex-display();
   @include flex-align-items(center);
   @include flex-direction(row);
@@ -17,6 +22,7 @@ material-item {
  */
 .material-tile-left {
   min-width: 56px;
+  margin-right: -16px;
 }
 
 /**
@@ -25,9 +31,8 @@ material-item {
 .material-tile-content {
   @include flex(1);
 
-  padding: 15px 0 15px 0;
+  padding: $baseline-grid * 2;
 
-  border-bottom: 1px solid #eee;
   text-overflow: ellipsis;
 
   h2 {

src/components/list/demo1/index.html

@@ -5,16 +5,18 @@
     <material-list>
 
       <material-item ng-repeat="item in todos">
-        <div class="material-tile-left">
-            <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
-        </div>
-        <div class="material-tile-content">
-          <h2>{{item.what}}</h2>
-          <h3>{{item.who}}</h3>
-          <p>
-            {{item.notes}}
-          </p>
-        </div>
+        <material-item-content>
+          <div class="material-tile-left">
+              <img ng-src="{{item.face}}" class="face" alt="{{item.who}}">
+          </div>
+          <div class="material-tile-content">
+            <h2>{{item.what}}</h2>
+            <h3>{{item.who}}</h3>
+            <p>
+              {{item.notes}}
+            </p>
+          </div>
+        </material-item-content>
       </material-item>
 
     </material-list>

src/main.scss

@@ -31,4 +31,5 @@
 "components/toolbar/toolbar",
 "components/tabs/tabs",
 "components/list/list",
+"components/divider/divider",
 "components/whiteframe/whiteframe";

src/theme/_colors.scss

@@ -2,6 +2,13 @@
 // -----------------------------
 // http://www.google.com/design/spec/style/color.html
 
+// Text
+// ----------------------------
+
+$color-text: 									 rgba(0,0,0,.87);
+$color-text-secondary: 				 rgba(0,0,0,.54);
+$color-text-hint: 						 rgba(0,0,0,.26);
+$color-divider: 							 rgba(0,0,0,.12);
 
 // Red
 // ----------------------------