diff --git a/package-lock.json b/package-lock.json
index e9ae999a1c1ddcc1c144b50b4caa96ca272075f2..13af54f77bd80171bb959dc26c5f8a96787b1799 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,6 +68,14 @@
"tslib": "1.9.0"
}
},
+ "@angular/cdk": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.3.tgz",
+ "integrity": "sha512-o95vQCJ1FpHLQj/ZfIrOya/rK0S7VwiY5vjEivpFnH25kHF5LNT4LTj6BOFkPbClMHTIM2wdKwWnuTfK0bg9WA==",
+ "requires": {
+ "tslib": "1.9.0"
+ }
+ },
"@angular/cli": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.2.tgz",
@@ -201,6 +209,14 @@
"integrity": "sha512-Tqd9ll6QBSKa2PKzhbyRiKfKZh4MOB6um3aiedC+m3IBB8zMgrY+EJbfP/SN52LsZdShEnLjuKcBZG0eqTjgEQ==",
"dev": true
},
+ "@angular/material": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.3.tgz",
+ "integrity": "sha512-v6IGxGWaeALgBH8+kt2Q9K32zmJQH193bWdCeWmtXk0vJlj3NTiWYy+vLoZQ8aPIAtOqCKCmhf5VrerkS6pgww==",
+ "requires": {
+ "tslib": "1.9.0"
+ }
+ },
"@angular/platform-browser": {
"version": "5.2.7",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.7.tgz",
@@ -4732,6 +4748,11 @@
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
"dev": true
},
+ "hammerjs": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+ "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+ },
"handle-thing": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
diff --git a/package.json b/package.json
index 981cc0bddaa5c6ced80944ba17c8622bb428a557..73938f80231f2993ab037d0ddfb22991de55b4f2 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,19 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "^5.2.0",
+ "@angular/animations": "^5.2.7",
+ "@angular/cdk": "^5.2.3",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
+ "@angular/material": "^5.2.3",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
+ "hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975afe8af84aa7aceeae19ab963015e1e0675..fc16c11f0c6cb5c2b073212a138150d123e4467f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
@@ -10,7 +11,8 @@ import { AppComponent } from './app.component';
AppComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/index.html b/src/index.html
index 8ea6aa4653fa9a11fe68368f3056ba75ee50dd83..5b215606d180660bb5073eef7f964f25211a8265 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
diff --git a/src/main.ts b/src/main.ts
index 91ec6da5f07886cf1d97b5d4212f4ddaa3eb2c9c..a7ea96c2dd5bfba26b56cb89bd11c537c629ba2a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
+import 'hammerjs';
+
if (environment.production) {
enableProdMode();
}
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0072ce3fc41812f8af910219f9eea3c3de..ecdf3ec2908ca44ff1b180b19689bd0615337b7e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,24 @@
-/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
+$arsnova-primary: mat-palette($mat-teal);
+$arsnova-accent: mat-palette($mat-blue-gray, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$arsnova-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$arsnova-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($arsnova-theme);