MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/WebServerResources/scss/vendors/angular-material/components/divider/demoBasicUsage/index.html

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

UI/WebServerResources/scss/vendors/angular-material/components/divider/demoBasicUsage/script.js

@@ -0,0 +1,34 @@
+angular.module('dividerDemo1', ['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"
+    }];
+  });

UI/WebServerResources/scss/vendors/angular-material/components/divider/demoBasicUsage/style.css

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

UI/WebServerResources/scss/vendors/angular-material/components/divider/divider-theme.scss

@@ -0,0 +1,3 @@
+md-divider.md-THEME_NAME-theme {
+  border-top-color: '{{foreground-4}}';
+}

UI/WebServerResources/scss/vendors/angular-material/components/divider/divider.js

@@ -0,0 +1,41 @@
+(function() {
+'use strict';
+
+/**
+ * @ngdoc module
+ * @name material.components.divider
+ * @description Divider module!
+ */
+angular.module('material.components.divider', [
+  'material.core'
+])
+  .directive('mdDivider', MdDividerDirective);
+
+function MdDividerController(){}
+
+/**
+ * @ngdoc directive
+ * @name mdDivider
+ * @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=} md-inset Add this attribute to activate the inset divider style.
+ * @usage
+ * <hljs lang="html">
+ * <md-divider></md-divider>
+ *
+ * <md-divider md-inset></md-divider>
+ * </hljs>
+ *
+ */
+function MdDividerDirective($mdTheming) {
+  return {
+    restrict: 'E',
+    link: $mdTheming,
+    controller: [MdDividerController]
+  };
+}
+})();

UI/WebServerResources/scss/vendors/angular-material/components/divider/divider.scss

@@ -0,0 +1,9 @@
+md-divider {
+  display: block;
+  border-top: 1px solid;
+  margin: 0;
+
+  &[md-inset] {
+    margin-left: $baseline-grid * 9; // fix for vs-repeat
+  }
+}