MODULE-TYPO

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

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

@@ -0,0 +1,9 @@
+$card-border-radius: 2px !default;
+
+md-card.md-THEME_NAME-theme {
+  border-radius: $card-border-radius;
+
+  .md-card-image {
+    border-radius: $card-border-radius $card-border-radius 0 0;
+  }
+}

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

@@ -0,0 +1,51 @@
+(function() {
+'use strict';
+
+/**
+ * @ngdoc module
+ * @name material.components.card
+ *
+ * @description
+ * Card components.
+ */
+angular.module('material.components.card', [
+  'material.core'
+])
+  .directive('mdCard', mdCardDirective);
+
+
+
+/**
+ * @ngdoc directive
+ * @name mdCard
+ * @module material.components.card
+ *
+ * @restrict E
+ *
+ * @description
+ * The `<md-card>` directive is a container element used within `<md-content>` containers.
+ *
+ * Cards have constant width and variable heights; where the maximum height is limited to what can
+ * fit within a single view on a platform, but it can temporarily expand as needed
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-card>
+ *  <img src="img/washedout.png" class="md-card-image">
+ *  <h2>Paracosm</h2>
+ *  <p>
+ *    The titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+ *  </p>
+ * </md-card>
+ * </hljs>
+ *
+ */
+function mdCardDirective($mdTheming) {
+  return {
+    restrict: 'E',
+    link: function($scope, $element, $attr) {
+      $mdTheming($element);
+    }
+  };
+}
+})();

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

@@ -0,0 +1,20 @@
+$card-margin: 8px !default;
+$card-box-shadow: $whiteframe-shadow-z1 !default;
+
+md-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: $card-box-shadow;
+
+  > img {
+    order: 0;
+    width: 100%;
+  }
+
+  md-card-content {
+    order: 1;
+    margin: $card-margin;
+  }
+}

UI/WebServerResources/scss/vendors/angular-material/components/card/card.spec.js

@@ -0,0 +1,16 @@
+describe('mdCard directive', function() {
+
+  beforeEach(module('material.components.card'));
+
+  it('should have the default theme class when the md-theme attribute is not defined', inject(function($compile, $rootScope) {
+    var card = $compile('<md-card></md-card>')($rootScope.$new());
+    $rootScope.$apply();
+    expect(card.hasClass('md-default-theme')).toBe(true);
+  }));
+
+  it('should have the correct theme class when the md-theme attribute is defined', inject(function($compile, $rootScope) {
+    var card = $compile('<md-card md-theme="green"></md-card>')($rootScope.$new());
+    $rootScope.$apply();
+    expect(card.hasClass('md-green-theme')).toBe(true);
+  }));
+});

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

@@ -0,0 +1,41 @@
+
+<div ng-controller="AppCtrl">
+
+  <md-content>
+
+    <md-card>
+      <img src="img/washedout.png" alt="Washed Out">
+      <md-card-content>
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </md-card-content>
+    </md-card>
+
+    <md-card>
+      <img src="img/washedout.png" alt="Washed Out">
+      <md-card-content>
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </md-card-content>
+    </md-card>
+
+    <md-card>
+      <img src="img/washedout.png" alt="Washed Out">
+      <md-card-content>
+        <h2>Paracosm</h2>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </md-card-content>
+    </md-card>
+
+
+  </md-content>
+</div>

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

@@ -0,0 +1,6 @@
+
+angular.module('cardDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+
+});

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

@@ -0,0 +1,4 @@
+
+md-card {
+  min-height: 150px;
+}