diff --git a/.angular-cli.json b/.angular-cli.json index a7f6e0cf..0ce55252 100644 --- a/.angular-cli.json +++ b/.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", - "component": {} + "styleExt": "scss", + "component": { + } } } diff --git a/package-lock.json b/package-lock.json index 9010d44c..c5d87a6f 100644 --- a/package-lock.json +++ b/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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": true } } }, diff --git a/package.json b/package.json index 744b45fd..740bd439 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e74ced1b..bd7a5359 100644 --- a/src/app/app.component.ts +++ b/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) { diff --git a/src/app/default-layout/default-layout.component.css b/src/app/default-layout/default-layout.component.css index 3d6acf14..c46385f6 100644 --- a/src/app/default-layout/default-layout.component.css +++ b/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 { diff --git a/src/index.html b/src/index.html index 92cfa2f7..c5fac758 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,7 @@ - + diff --git a/src/styles.css b/src/styles.css index fac89dbc..d6992769 100644 --- a/src/styles.css +++ b/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; diff --git a/src/theme.scss b/src/theme.scss new file mode 100644 index 00000000..0103be75 --- /dev/null +++ b/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);