Palette

.angular-cli.json

@@ -20,7 +20,8 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "styles.css"
+        "styles.css",
+        "theme.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -55,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
-    "component": {}
+    "component": {
+    }
   }
 }

package-lock.json

@@ -879,8 +879,7 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
       "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "asynckit": {
       "version": "0.4.0",
@@ -1115,7 +1114,6 @@
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
       "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
       "dev": true,
-      "optional": true,
       "requires": {
         "inherits": "2.0.3"
       }
@@ -2205,7 +2203,6 @@
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
       "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "lru-cache": "4.1.1",
         "which": "1.3.0"
@@ -3987,7 +3984,6 @@
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
       "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
       "dev": true,
-      "optional": true,
       "requires": {
         "globule": "1.2.0"
       }
@@ -4091,7 +4087,6 @@
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
       "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
       "dev": true,
-      "optional": true,
       "requires": {
         "glob": "7.1.2",
         "lodash": "4.17.4",
@@ -4682,8 +4677,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "indent-string": {
       "version": "2.1.0",
@@ -6138,8 +6132,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.7.0.tgz",
       "integrity": "sha1-2Vv3IeyHfgjbJ27T/G63j5CDrUY=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "ncname": {
       "version": "1.0.0",
@@ -6283,7 +6276,6 @@
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
       "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "fstream": "1.0.11",
         "glob": "7.1.2",
@@ -6305,7 +6297,6 @@
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
           "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
           "dev": true,
-          "optional": true,
           "requires": {
             "abbrev": "1.1.1"
           }
@@ -6314,8 +6305,7 @@
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -6395,7 +6385,6 @@
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.3.tgz",
       "integrity": "sha1-0JydEXlkEjnRuX/8YjH9zsU+FWg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "async-foreach": "0.1.3",
         "chalk": "1.1.3",
@@ -6422,7 +6411,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-styles": "2.2.1",
             "escape-string-regexp": "1.0.5",
@@ -6435,8 +6423,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -10176,7 +10163,6 @@
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
       "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
       "dev": true,
-      "optional": true,
       "requires": {
         "glob": "7.1.2",
         "lodash": "4.17.4",
@@ -10234,7 +10220,6 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "js-base64": "2.3.2",
         "source-map": "0.4.4"
@@ -10245,7 +10230,6 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "amdefine": "1.0.1"
           }
@@ -11189,7 +11173,6 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
       "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
       "dev": true,
-      "optional": true,
       "requires": {
         "readable-stream": "2.3.3"
       },
@@ -11198,15 +11181,13 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "readable-stream": {
           "version": "2.3.3",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
           "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "core-util-is": "1.0.2",
             "inherits": "2.0.3",
@@ -11222,7 +11203,6 @@
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
           "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "5.1.1"
           }
@@ -11497,7 +11477,6 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "block-stream": "0.0.9",
         "fstream": "1.0.11",
@@ -12888,7 +12867,6 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
       "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "camelcase": "3.0.0",
         "cliui": "3.2.0",
@@ -12909,8 +12887,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -12919,7 +12896,6 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
       "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
       "dev": true,
-      "optional": true,
       "requires": {
         "camelcase": "3.0.0"
       },
@@ -12928,8 +12904,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },

package.json

@@ -48,6 +48,7 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.5.3",
     "protractor": "~5.2.0",
     "ts-node": "~3.3.0",
     "tslint": "~5.7.0",

src/app/app.component.ts

@@ -6,7 +6,9 @@ import {DomSanitizer} from "@angular/platform-browser";
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: [
+    './app.component.css'
+  ]
 })
 export class AppComponent implements OnInit {
     constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer) {

src/app/default-layout/default-layout.component.css

@@ -19,7 +19,7 @@ app-default-layout {
 .footer {
   flex-shrink: 0;
   padding: 20px;
-  background-color: #e91e63;
+  background-color: #0097a7;
   color: white;
 }
 
@@ -30,6 +30,11 @@ app-default-layout {
   padding-bottom: 20px;
 }
 
+header {
+  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
+  z-index: 10;
+}
+
 main {
   height: 100%;
 }
@@ -44,7 +49,7 @@ main {
 
 .default-header {
   padding-left: 20px;
-  background-color: #e91e63;
+  background-color: #0097a7;
 }
 
 .buttons-bar {

src/index.html

@@ -23,7 +23,7 @@
   </script>
 
 </head>
-<body>
+<body class="">
   <app-root></app-root>
 </body>
 

src/styles.css

@@ -1,6 +1,6 @@
 /* @TODO: make icons self hosted */
 @import '~https://fonts.googleapis.com/icon?family=Material+Icons';
-@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
+/*@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';*/
 
 img.logo-header {
   width: 50px;

src/theme.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+
+// Include non-theme styles for core.
+@include mat-core();
+
+// Define a theme.
+$primary: mat-palette($mat-cyan, 700, 500, 900);
+$accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+
+$theme: mat-dark-theme($primary, $accent);
+
+// Include all theme styles for the components.
+@include angular-material-theme($theme);