Merge remote-tracking branch 'origin/master'

Backdrop added to FuseNavBar for mobile
Updated version to 1.1.0 since we have couple breaking changes!
2025-12-29 05:07:08 +00:00 · 2017-09-22 16:18:24 +03:00 · 2017-09-22 16:18:05 +03:00 · 2017-09-22 16:07:05 +03:00 · 2017-09-22 16:04:59 +03:00 · 2017-09-22 15:02:07 +03:00
209 changed files with 4266 additions and 3931 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -25,6 +25,7 @@
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
+                "hmr": "environments/environment.hmr.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,29 +1,32 @@
 {
  "name": "fuse2",
-  "version": "1.0.5",
+  "version": "1.1.0",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
-    "build": "ng build",
+    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
+    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
+    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
+    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "4.3.5",
+    "@angular/animations": "4.4.3",
    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "4.3.5",
-    "@angular/compiler": "4.3.5",
-    "@angular/core": "4.3.5",
+    "@angular/common": "4.4.3",
+    "@angular/compiler": "4.4.3",
+    "@angular/core": "4.4.3",
    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.3.5",
-    "@angular/http": "4.3.5",
+    "@angular/forms": "4.4.3",
+    "@angular/http": "4.4.3",
    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser": "4.3.5",
-    "@angular/platform-browser-dynamic": "4.3.5",
-    "@angular/router": "4.3.5",
+    "@angular/platform-browser": "4.4.3",
+    "@angular/platform-browser-dynamic": "4.4.3",
+    "@angular/router": "4.4.3",
    "@swimlane/ngx-charts": "6.0.2",
    "@swimlane/ngx-datatable": "9.3.1",
    "@swimlane/ngx-dnd": "3.0.0",
@@ -39,32 +42,34 @@
    "moment": "2.18.1",
    "ngx-color-picker": "4.3.1",
    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.5.6",
+    "ngx-perfect-scrollbar": "4.6.2",
+    "perfect-scrollbar": "0.8.1",
    "rxjs": "5.4.3",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
-    "@angular/cli": "^1.3.2",
-    "@angular/compiler-cli": "4.3.5",
-    "@angular/language-service": "4.3.5",
-    "@ngtools/webpack": "^1.6.2",
-    "@types/jasmine": "^2.5.54",
-    "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.88",
-    "codelyzer": "~3.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
+    "@angular/cli": "1.4.2",
+    "@angular/compiler-cli": "4.4.3",
+    "@angular/language-service": "4.4.3",
+    "@angularclass/hmr": "2.1.3",
+    "@ngtools/webpack": "1.7.1",
+    "@types/jasmine": "2.6.0",
+    "@types/jasminewd2": "2.0.2",
+    "@types/node": "6.0.88",
+    "codelyzer": "3.0.1",
+    "jasmine-core": "2.6.2",
+    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.1",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "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.1.2",
-    "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "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.1.2",
+    "ts-node": "3.0.4",
+    "tslint": "5.3.2",
+    "typescript": "2.3.3"
  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,7 +9,6 @@ import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
 import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
 import { PagesModule } from './main/content/pages/pages.module';
@@ -17,6 +16,7 @@ import { UIModule } from './main/content/ui/ui.module';
 import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
 import { ServicesModule } from './main/content/services/services.module';

@@ -69,8 +69,6 @@ const appRoutes: Routes = [

        InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),

-        PerfectScrollbarModule.forRoot(),
-
        FuseMainModule,

        ProjectModule,
@@ -83,7 +81,8 @@ const appRoutes: Routes = [
    ],
    providers   : [
        FuseSplashScreenService,
-        FuseConfigService
+        FuseConfigService,
+        FuseNavigationService
    ],
    bootstrap   : [
        AppComponent
--- a/src/app/core/animations.ts
+++ b/src/app/core/animations.ts
@@ -1,10 +1,56 @@
-import { sequence, trigger, stagger, animate, style, group, query, transition, keyframes, animateChild, state } from '@angular/animations';
+import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';

-// const query = (s, a, o = {optional: true}) => q(s, a, o);
+const customAnimation = animation([
+    style({
+        opacity  : '{{opacity}}',
+        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+], {
+    params: {
+        duration: '200ms',
+        delay   : '0ms',
+        opacity : '0',
+        scale   : '1',
+        x       : '0',
+        y       : '0',
+        z       : '0'
+    }
+});

-export class Animations
-{
-    public static fadeInOut = trigger('fadeInOut', [
+export const fuseAnimations = [
+
+    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+
+    trigger('animateStagger', [
+        state('50', style('*')),
+        state('100', style('*')),
+        state('200', style('*')),
+
+        transition('void => 50',
+            query('@*',
+                [
+                    stagger('50ms', [
+                        animateChild()
+                    ])
+                ])),
+        transition('void => 100',
+            query('@*',
+                [
+                    stagger('100ms', [
+                        animateChild()
+                    ])
+                ])),
+        transition('void => 200',
+            query('@*',
+                [
+                    stagger('200ms', [
+                        animateChild()
+                    ])
+                ]))
+    ]),
+
+    trigger('fadeInOut', [
        state('0', style({
            display: 'none',
            opacity: 0
@@ -15,9 +61,9 @@ export class Animations
        })),
        transition('1 => 0', animate('300ms ease-out')),
        transition('0 => 1', animate('300ms ease-in'))
-    ]);
+    ]),

-    public static slideInOut = trigger('slideInOut', [
+    trigger('slideInOut', [
        state('0', style({
            height : '0px',
            display: 'none'
@@ -28,9 +74,9 @@ export class Animations
        })),
        transition('1 => 0', animate('300ms ease-out')),
        transition('0 => 1', animate('300ms ease-in'))
-    ]);
+    ]),

-    public static slideInLeft = trigger('slideInLeft', [
+    trigger('slideInLeft', [
        state('void', style({
            transform: 'translateX(-100%)',
            display  : 'none'
@@ -41,9 +87,9 @@ export class Animations
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
-    ]);
+    ]),

-    public static slideInRight = trigger('slideInRight', [
+    trigger('slideInRight', [
        state('void', style({
            transform: 'translateX(100%)',
            display  : 'none'
@@ -54,9 +100,9 @@ export class Animations
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
-    ]);
+    ]),

-    public static slideInTop = trigger('slideInTop', [
+    trigger('slideInTop', [
        state('void', style({
            transform: 'translateY(-100%)',
            display  : 'none'
@@ -67,9 +113,9 @@ export class Animations
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
-    ]);
+    ]),

-    public static slideInBottom = trigger('slideInBottom', [
+    trigger('slideInBottom', [
        state('void',
            style({
                transform: 'translateY(100%)',
@@ -81,9 +127,9 @@ export class Animations
        })),
        transition('void => *', animate('300ms')),
        transition('* => void', animate('300ms'))
-    ]);
+    ]),

-    public static routerTransitionLeft = trigger('routerTransitionLeft', [
+    trigger('routerTransitionLeft', [

        transition('* => *', [
            query('fuse-content > :enter, fuse-content > :leave', [
@@ -108,7 +154,7 @@ export class Animations
                            transform: 'translateX(0)',
                            opacity  : 1
                        }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateX(-100%)',
                                opacity  : 0
@@ -116,7 +162,7 @@ export class Animations
                    ], {optional: true}),
                    query('fuse-content > :enter', [
                        style({transform: 'translateX(100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateX(0%)',
                                opacity  : 1
@@ -127,9 +173,9 @@ export class Animations
                query('fuse-content > :enter', animateChild(), {optional: true})
            ])
        ])
-    ]);
+    ]),

-    public static routerTransitionRight = trigger('routerTransitionRight', [
+    trigger('routerTransitionRight', [

        transition('* => *', [
            query('fuse-content > :enter, fuse-content > :leave', [
@@ -154,7 +200,7 @@ export class Animations
                            transform: 'translateX(0)',
                            opacity  : 1
                        }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateX(100%)',
                                opacity  : 0
@@ -162,7 +208,7 @@ export class Animations
                    ], {optional: true}),
                    query('fuse-content > :enter', [
                        style({transform: 'translateX(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateX(0%)',
                                opacity  : 1
@@ -173,9 +219,9 @@ export class Animations
                query('fuse-content > :enter', animateChild(), {optional: true})
            ])
        ])
-    ]);
+    ]),

-    public static routerTransitionUp = trigger('routerTransitionUp', [
+    trigger('routerTransitionUp', [

        transition('* => *', [
            query('fuse-content > :enter, fuse-content > :leave', [
@@ -193,35 +239,33 @@ export class Animations
                    opacity  : 0
                })
            ], {optional: true}),
-            sequence([
-                group([
-                    query('fuse-content > :leave', [
+            group([
+                query('fuse-content > :leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity  : 1
+                    }),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                        style({
-                            transform: 'translateY(0)',
+                            transform: 'translateY(-100%)',
+                            opacity  : 0
+                        }))
+                ], {optional: true}),
+                query('fuse-content > :enter', [
+                    style({transform: 'translateY(100%)'}),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        style({
+                            transform: 'translateY(0%)',
                            opacity  : 1
-                        }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                            style({
-                                transform: 'translateY(-100%)',
-                                opacity  : 0
-                            }))
-                    ], {optional: true}),
-                    query('fuse-content > :enter', [
-                        style({transform: 'translateY(100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                            style({
-                                transform: 'translateY(0%)',
-                                opacity  : 1
-                            }))
-                    ], {optional: true})
-                ]),
-                query('fuse-content > :leave', animateChild(), {optional: true}),
-                query('fuse-content > :enter', animateChild(), {optional: true})
-            ])
+                        }))
+                ], {optional: true})
+            ]),
+            query('fuse-content > :leave', animateChild(), {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true})
        ])
-    ]);
+    ]),

-    public static routerTransitionDown = trigger('routerTransitionDown', [
+    trigger('routerTransitionDown', [

        transition('* => *', [
            query('fuse-content > :enter, fuse-content > :leave', [
@@ -246,7 +290,7 @@ export class Animations
                            transform: 'translateY(0)',
                            opacity  : 1
                        }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateY(100%)',
                                opacity  : 0
@@ -254,7 +298,7 @@ export class Animations
                    ], {optional: true}),
                    query('fuse-content > :enter', [
                        style({transform: 'translateY(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                            style({
                                transform: 'translateY(0%)',
                                opacity  : 1
@@ -265,11 +309,11 @@ export class Animations
                query('fuse-content > :enter', animateChild(), {optional: true})
            ])
        ])
-    ]);
+    ]),

-    public static routerTransitionFade = trigger('routerTransitionFade', [
+    trigger('routerTransitionFade', [

-        transition('* => *', [
+        transition('* => *', group([

            query('fuse-content > :enter, fuse-content > :leave ', [
                style({
@@ -280,33 +324,32 @@ export class Animations
                    right   : 0
                })
            ], {optional: true}),
+
            query('fuse-content > :enter', [
                style({
                    opacity: 0
                })
            ], {optional: true}),
-            // sequence([
-                query('fuse-content > :leave', [
-                    style({
-                        opacity: 1
-                    }),
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                        style({
-                            opacity: 0
-                        }))
-                ], {optional: true}),
-                query('fuse-content > :enter', [
+            query('fuse-content > :leave', [
+                style({
+                    opacity: 1
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                    style({
                        opacity: 0
-                    }),
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                        style({
-                            opacity: 1
-                        }))
-                ], {optional: true}),
-            // ]),
+                    }))
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    opacity: 0
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    style({
+                        opacity: 1
+                    }))
+            ], {optional: true}),
            query('fuse-content > :enter', animateChild(), {optional: true}),
            query('fuse-content > :leave', animateChild(), {optional: true})
-        ])
-    ]);
-}
+        ]))
+    ])
+];
--- a/src/app/core/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.html
@@ -45,7 +45,7 @@

            <div fxLayout="row" fxLayoutWrap
                 fxLayoutAlign="start start"
-                 class="colors" perfect-scrollbar>
+                 class="colors" fusePerfectScrollbar>
                <div class="color"
                     [ngClass]="'md-'+color.key+'-bg'"
                     *ngFor="let color of (colors | keys)"
@@ -63,7 +63,7 @@
             [@slideInRight]>
            <div fxLayout="row" fxLayoutWrap
                 fxLayoutAlign="start start"
-                 class="colors" perfect-scrollbar>
+                 class="colors" fusePerfectScrollbar>
                <div class="color"
                     *ngFor="let hue of hues"
                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
--- a/src/app/core/components/material-color-picker/material-color-picker.component.ts
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MatColors } from '../../matColors';
-import { Animations } from '../../animations';
+import { fuseAnimations } from '../../animations';

@Component({
    selector     : 'fuse-material-color-picker',
    templateUrl  : './material-color-picker.component.html',
    styleUrls    : ['./material-color-picker.component.scss'],
-    animations   : [Animations.slideInLeft, Animations.slideInRight],
+    animations   : fuseAnimations,
    encapsulation: ViewEncapsulation.None
 })
 export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -9,9 +9,8 @@
    <div class="{{fuseSettings.colorClasses.navbar}}">

        <ng-container *ngFor="let item of item.children">
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
        </ng-container>

    </div>
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { Animations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations';
 import { FuseConfigService } from '../../../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';

@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
    selector   : 'fuse-nav-horizontal-collapse',
    templateUrl: './nav-horizontal-collapse.component.html',
    styleUrls  : ['./nav-horizontal-collapse.component.scss'],
-    animations : [Animations.slideInOut]
+    animations : fuseAnimations
 })
 export class FuseNavHorizontalCollapseComponent implements OnDestroy
 {
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -1,27 +1,32 @@
-<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
+<div id="main-navigation" class="nav"
+     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">

+    <!-- Vertical Navigation Layout -->
    <ng-container *ngIf="layout === 'vertical'">

-        <ng-container *ngFor="let item of verticalNavigation">
+        <ng-container *ngFor="let item of navigationModel">

-            <fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
-            <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
+            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>

        </ng-container>

    </ng-container>
+    <!-- / Vertical Navigation Layout -->

+    <!-- Horizontal Navigation Layout -->
    <ng-container *ngIf="layout === 'horizontal'">

-        <ng-container *ngFor="let item of horizontalNavigation">
+        <ng-container *ngFor="let item of navigationModel">

+            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>

        </ng-container>

    </ng-container>
+    <!-- / Horizontal Navigation Layout -->

 </div>
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationService } from './navigation.service';
+import { Subscription } from 'rxjs/Subscription';

@Component({
    selector     : 'fuse-navigation',
@@ -7,17 +8,26 @@ import { FuseNavigationService } from './navigation.service';
    styleUrls    : ['./navigation.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent
+export class FuseNavigationComponent implements OnDestroy
 {
-    verticalNavigation: any[];
-    horizontalNavigation: any[];
+    navigationModel: any[];
+    navigationModelChangeSubscription: Subscription;

    @Input('layout') layout = 'vertical';

-    constructor(private navigationService: FuseNavigationService)
+    constructor(private fuseNavigationService: FuseNavigationService)
    {
-        this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
-        this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
+        this.navigationModelChangeSubscription =
+            this.fuseNavigationService.onNavigationModelChange
+                .subscribe((navigationModel) => {
+                    this.navigationModel = navigationModel;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        console.warn('destroyed');
+        this.navigationModelChangeSubscription.unsubscribe();
    }

 }
--- a/src/app/core/components/navigation/navigation.module.ts
+++ b/src/app/core/components/navigation/navigation.module.ts
@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
 import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
-import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
+import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
 import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
 import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';

@@ -18,7 +18,7 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
    ],
    declarations: [
        FuseNavigationComponent,
-        FuseNavVerticalSubheaderComponent,
+        FuseNavVerticalGroupComponent,
        FuseNavVerticalItemComponent,
        FuseNavVerticalCollapseComponent,
        FuseNavHorizontalItemComponent,
--- a/src/app/core/components/navigation/navigation.service.ts
+++ b/src/app/core/components/navigation/navigation.service.ts
@@ -1,25 +1,43 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { FuseNavigation } from '../../../navigation.model';
+import { NavigationModel } from '../../../navigation.model';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
 export class FuseNavigationService
 {
    onNavCollapseToggled = new EventEmitter<any>();
-    navigation: FuseNavigation;
+    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
+    navigationModel: NavigationModel;
    flatNavigation: any[] = [];

    constructor()
    {
-        this.navigation = new FuseNavigation();
+        this.navigationModel = new NavigationModel();
+        this.onNavigationModelChange.next(this.navigationModel.model);
    }

    /**
-     * Get navigation array
+     * Get navigation model
     * @returns {any[]}
     */
-    getNavigation(item)
+    getNavigationModel()
    {
-        return this.navigation[item];
+        return this.navigationModel.model;
+    }
+
+    /**
+     * Set the navigation model
+     * @param model
+     */
+    setNavigationModel(model)
+    {
+        // console.log(model);
+
+        this.navigationModel = model;
+
+        console.log(this.navigationModel);
+
+        this.onNavigationModelChange.next(this.navigationModel.model);
    }

    /**
@@ -31,7 +49,7 @@ export class FuseNavigationService
    {
        if ( !navigationItems )
        {
-            navigationItems = this.navigation;
+            navigationItems = this.navigationModel.model;
        }

        for ( const navItem of navigationItems )
@@ -41,7 +59,7 @@ export class FuseNavigationService
                continue;
            }

-            if ( navItem.type === 'nav-item' )
+            if ( navItem.type === 'item' )
            {
                this.flatNavigation.push({
                    title: navItem.title,
@@ -53,7 +71,7 @@ export class FuseNavigationService
                continue;
            }

-            if ( navItem.type === 'nav-collapse' )
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
            {
                this.getFlatNavigation(navItem.children);
            }
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -5,7 +5,7 @@
 </a>
 <div class="children" [@slideInOut]="isOpen">
    <ng-container *ngFor="let item of item.children">
-        <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-        <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
    </ng-container>
 </div>
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -1,13 +1,13 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { Animations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations';

@Component({
    selector   : 'fuse-nav-vertical-collapse',
    templateUrl: './nav-vertical-collapse.component.html',
    styleUrls  : ['./nav-vertical-collapse.component.scss'],
-    animations : [Animations.slideInOut]
+    animations : fuseAnimations
 })
 export class FuseNavVerticalCollapseComponent implements OnInit
 {
@@ -15,21 +15,20 @@ export class FuseNavVerticalCollapseComponent implements OnInit
    @HostBinding('class') classes = 'nav-collapse nav-item';
    @HostBinding('class.open') public isOpen = false;

-    constructor(private navigationService: FuseNavigationService, private router: Router)
+    constructor(
+        private navigationService: FuseNavigationService,
+        private router: Router
+    )
    {
-        /**
-         * When navigation changed
-         */
+        // Listen for route changes
        router.events.subscribe(
            (event) => {
                if ( event instanceof NavigationEnd )
                {
-                    /**
-                     * Check if the url is child of the collapse
-                     */
+                    // Check if the url can be found in
+                    // one of the children of this item
                    if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
                    {
-                        // console.log(this.item);
                        this.expand();
                    }
                    else
@@ -40,47 +39,53 @@ export class FuseNavVerticalCollapseComponent implements OnInit
            }
        );

-        /**
-         * Whenever a navigation collapse item toggled
-         */
-        this.navigationService.onNavCollapseToggled.subscribe(
-            (clickedItem) => {
-                if ( clickedItem.children )
-                {
-                    /**
-                     * if clicked collapse is child of this collapse
-                     * return
-                     */
-                    if ( this.item.children.indexOf(clickedItem) !== -1 )
+        // Listen for collapsing of any navigation item
+        this.navigationService.onNavCollapseToggled
+            .subscribe(
+                (clickedItem) => {
+                    if ( clickedItem.children )
                    {
-                        return;
-                    }
-                    /**
-                     * If collapsed item is not related with this collapse
-                     * collapse
-                     */
-                    if ( this.item !== clickedItem )
-                    {
-                        this.collapse();
+                        // Check if the clicked item is one
+                        // of the children of this item
+                        if ( this.isChildrenOf(this.item, clickedItem) )
+                        {
+                            return;
+                        }
+
+                        // Check if the url can be found in
+                        // one of the children of this item
+                        if ( this.isUrlInChildren(this.item, this.router.url) )
+                        {
+                            return;
+                        }
+
+                        // If the clicked item is not this item, collapse...
+                        if ( this.item !== clickedItem )
+                        {
+                            this.collapse();
+                        }
                    }
                }
-            }
-        );
+            );
    }

    /**
-     * Toggle Collapse
+     * Toggle collapse
+     *
     * @param ev
     */
    toggleOpen(ev)
    {
        ev.preventDefault();
+
        this.isOpen = !this.isOpen;
+
+        // Navigation collapse toggled...
        this.navigationService.onNavCollapseToggled.emit(this.item);
    }

    /**
-     * Expand
+     * Expand the collapsable navigation
     */
    expand()
    {
@@ -88,11 +93,12 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        {
            return;
        }
+
        this.isOpen = true;
    }

    /**
-     * Collapse
+     * Collapse the collapsable navigation
     */
    collapse()
    {
@@ -104,29 +110,60 @@ export class FuseNavVerticalCollapseComponent implements OnInit
    }

    /**
-     * Checking the url is in children
-     * @param arr
-     * @param url
-     * @returns {any}
+     * Check if the given parent has the
+     * given item in one of its children
+     *
+     * @param parent
+     * @param item
+     * @return {any}
     */
-    isUrlInChildren(arr, url)
+    isChildrenOf(parent, item)
    {
-        if ( !arr.children )
+        if ( !parent.children )
        {
            return false;
        }

-        for ( let i = 0; i < arr.children.length; i++ )
+        if ( parent.children.indexOf(item) !== -1 )
        {
-            if ( arr.children[i].children )
+            return true;
+        }
+
+        for ( const children of parent.children )
+        {
+            if ( children.children )
            {
-                if ( this.isUrlInChildren(arr.children[i], url) )
+                return this.isChildrenOf(children, item);
+            }
+        }
+    }
+
+    /**
+     * Check if the given url can be found
+     * in one of the given parent's children
+     *
+     * @param parent
+     * @param url
+     * @returns {any}
+     */
+    isUrlInChildren(parent, url)
+    {
+        if ( !parent.children )
+        {
+            return false;
+        }
+
+        for ( let i = 0; i < parent.children.length; i++ )
+        {
+            if ( parent.children[i].children )
+            {
+                if ( this.isUrlInChildren(parent.children[i], url) )
                {
                    return true;
                }
            }

-            if ( arr.children[i].url === url )
+            if ( parent.children[i].url === url )
            {
                return true;
            }
@@ -135,11 +172,6 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        return false;
    }

-    public isCollapsed(): boolean
-    {
-        return this.isOpen;
-    }
-
    ngOnInit()
    {
    }
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
@@ -0,0 +1,10 @@
+<div class="group-title">
+    <span class="hint-text">{{ item.title }}</span>
+</div>
+<div class="group-items">
+    <ng-container *ngFor="let item of item.children">
+        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+    </ng-container>
+</div>
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
@@ -0,0 +1,23 @@
+:host {
+
+    .folded:not(.folded-open) & {
+
+        > .group-title {
+            align-items: center;
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                min-width: 1.6rem;
+                border-top: 2px solid;
+                opacity: 0.2;
+            }
+        }
+    }
+}
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
@@ -0,0 +1,21 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-vertical-group',
+    templateUrl: './nav-vertical-group.component.html',
+    styleUrls  : ['./nav-vertical-group.component.scss']
+})
+export class FuseNavVerticalGroupComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-group';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
+++ b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
@@ -1 +0,0 @@
-<span class="hint-text">{{ item.title }}</span>
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
+++ b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
@@ -1,20 +0,0 @@
-
-:host {
-
-    .folded:not(.folded-open) & {
-
-        &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            min-width: 1.6rem;
-            border-top: 2px solid;
-            opacity: 0.2;
-        }
-
-        > span {
-            opacity: 0;
-            transition: opacity 200ms ease;
-        }
-    }
-}
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
@@ -1,21 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-vertical-subheader',
-    templateUrl: './nav-vertical-subheader.component.html',
-    styleUrls  : ['./nav-vertical-subheader.component.scss']
-})
-export class FuseNavVerticalSubheaderComponent implements OnInit
-{
-    @HostBinding('class') classes = 'nav-subheader';
-    @Input() item: any;
-
-    constructor()
-    {
-    }
-
-    ngOnInit()
-    {
-    }
-
-}
--- a/src/app/core/components/shortcuts/shortcuts.component.html
+++ b/src/app/core/components/shortcuts/shortcuts.component.html
@@ -47,7 +47,7 @@
            </md-input-container>

            <md-divider></md-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
+            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>

                <md-list-item *ngFor="let shortcutItem of shortcutItems"
                              (click)="toggleShortcut($event, shortcutItem)">
@@ -68,7 +68,7 @@
                </md-list-item>
            </md-nav-list>

-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
+            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
                              (click)="toggleShortcut($event, navigationItem)">
                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -4,103 +4,95 @@

 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>

-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">

    <button md-icon-button class="close-button" (click)="closeBar()">
        <md-icon>close</md-icon>
    </button>

-    <md-list>
-        <h3 md-subheader>Navigation:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8" value="top">Top</md-radio-button>
-                <md-radio-button class="mr-8" value="left">Left</md-radio-button>
-                <md-radio-button class="mr-8" value="right">Right</md-radio-button>
-                <md-radio-button class="mr-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">

-        <h3 md-subheader>Toolbar:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3>Navigation:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>

-        <h3 md-subheader>Footer:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Toolbar:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>

-        <h3 md-subheader>Layout Mode:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8" value="boxed">Boxed</md-radio-button>
-                <md-radio-button class="mr-8" value="fullwidth">Fullwidth</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Footer:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
+
+        <h3 class="mt-24">Layout Mode:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
+        </md-radio-group>

        <md-divider></md-divider>

-        <h3 md-subheader>Colors:</h3>
+        <h3>Colors:</h3>
+        <div class="colors">

-        <md-list-item class="mb-8">
            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Toolbar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
            </div>
-        </md-list-item>

-        <md-list-item class="mb-8">
            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Navigation Bar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
            </div>
-        </md-list-item>

-        <md-list-item class="mb-8">
            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Footer Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
            </div>
-        </md-list-item>
+
+        </div>

        <md-divider></md-divider>

-        <h3 md-subheader>Animation:</h3>
+        <h3>Router Animation:</h3>
+        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <md-option value="none">
+                None
+            </md-option>
+            <md-option value="slideUp">
+                Slide up
+            </md-option>
+            <md-option value="slideDown">
+                Slide down
+            </md-option>
+            <md-option value="slideRight">
+                Slide right
+            </md-option>
+            <md-option value="slideLeft">
+                Slide left
+            </md-option>
+            <md-option value="fadeIn">
+                Fade in
+            </md-option>
+        </md-select>

-        <md-list-item>
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Router Animation</h4>
-                <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-                    <md-option value="none">
-                        None
-                    </md-option>
-                    <md-option value="slideUp">
-                        Slide up
-                    </md-option>
-                    <md-option value="slideDown">
-                        Slide down
-                    </md-option>
-                    <md-option value="slideRight">
-                        Slide right
-                    </md-option>
-                    <md-option value="slideLeft">
-                        Slide left
-                    </md-option>
-                    <md-option value="fadeIn">
-                        Fade in
-                    </md-option>
-                </md-select>
-            </div>
-        </md-list-item>
+    </div>

-    </md-list>
 </div>
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -15,6 +15,10 @@
    right: 0;
    top: 160px;

+    &.bar-closed .theme-options-panel {
+        display: none;
+    }
+
    .theme-options-panel {
        position: absolute;
        right: 0;
@@ -22,12 +26,38 @@
        width: 360px;
        transform: translate3d(100%, 0, 0);
        z-index: 999;
+        max-height: calc(100vh - 200px);
+        padding: 24px;
+        overflow: auto;
+
+        @include media-breakpoint-down('xs') {
+            top: -120px;
+            max-height: calc(100vh - 100px);
+            width: 90vw;
+        }

        .close-button {
            position: absolute;
            top: 8px;
            right: 8px;
        }
+
+        h3 {
+            font-size: 14px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.54);
+        }
+
+        .mat-divider{
+            display: block !important;
+            width: 100%;
+            margin: 24px 0 16px 0;
+        }
+
+        .colors {
+            display: block !important;
+            width: 100%;
+        }
    }

    .theme-options-panel-overlay {
@@ -40,6 +70,10 @@
        bottom: 0;
        z-index: 998;

+        @include media-breakpoint-down('sm') {
+            background: rgba(0, 0, 0, 0.37);
+        }
+
        &.hidden {
            display: none;
        }
--- a/src/app/core/components/theme-options/theme-options.component.ts
+++ b/src/app/core/components/theme-options/theme-options.component.ts
@@ -1,14 +1,14 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
-import { Animations } from '../../animations';
+import { fuseAnimations } from '../../animations';

@Component({
    selector   : 'fuse-theme-options',
    templateUrl: './theme-options.component.html',
    styleUrls  : ['./theme-options.component.scss'],
-    animations : [Animations.fadeInOut]
+    animations : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
@@ -18,10 +18,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy

    public player: AnimationPlayer;
    fuseSettings: any;
-    barClosed: boolean;

    onSettingsChanged: Subscription;

+    @HostBinding('class.bar-closed') barClosed: boolean;
+
    constructor(
        private animationBuilder: AnimationBuilder,
        private fuseConfig: FuseConfigService,
@@ -53,8 +54,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy

    closeBar()
    {
-        this.barClosed = true;
-
        this.player =
            this.animationBuilder
                .build([
@@ -63,6 +62,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                ]).create(this.panel.nativeElement);

        this.player.play();
+
+        this.player.onDone(() => {
+            this.barClosed = true;
+        });
    }

    openBar()
--- a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
+++ b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
@@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
        {
            setTimeout(() => {
                this.viewContainer.createEmbeddedView(this.templateRef);
-            }, 0);
+            }, 350);
            this.isCreated = true;
        }
        else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
--- a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -0,0 +1,173 @@
+import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import * as Ps from 'perfect-scrollbar';
+import { FuseConfigService } from '../../services/config.service';
+import { Subscription } from 'rxjs/Subscription';
+import { Platform } from '@angular/cdk/platform';
+
+@Directive({
+    selector: '[fusePerfectScrollbar]'
+})
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+{
+    onSettingsChanged: Subscription;
+    isDisableCustomScrollbars = false;
+    isMobile = false;
+    isInitialized = true;
+
+    constructor(
+        private element: ElementRef,
+        private zone: NgZone,
+        private fuseConfig: FuseConfigService,
+        private platform: Platform
+    )
+    {
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
+                .subscribe(
+                    (settings) => {
+                        this.isDisableCustomScrollbars = !settings.customScrollbars;
+                    }
+                );
+
+        if ( this.platform.ANDROID || this.platform.IOS )
+        {
+            this.isMobile = true;
+        }
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    ngAfterViewInit()
+    {
+        if ( this.isMobile || this.isDisableCustomScrollbars )
+        {
+            this.isInitialized = false;
+            return;
+        }
+
+        this.zone.runOutsideAngular(() => {
+
+            // Initialize the perfect-scrollbar
+            Ps.initialize(this.element.nativeElement);
+        });
+    }
+
+    ngOnDestroy()
+    {
+        if ( !this.isInitialized )
+        {
+            return;
+        }
+
+        this.onSettingsChanged.unsubscribe();
+
+        // Destroy the perfect-scrollbar
+        Ps.destroy(this.element.nativeElement);
+    }
+
+    update()
+    {
+        if ( !this.isInitialized )
+        {
+            return;
+        }
+
+        // Update the perfect-scrollbar
+        Ps.update(this.element.nativeElement);
+    }
+
+    destroy()
+    {
+        this.ngOnDestroy();
+    }
+
+    scrollToX(x: number, speed?: number)
+    {
+        this.animateScrolling('scrollLeft', x, speed);
+    }
+
+    scrollToY(y: number, speed?: number)
+    {
+        this.animateScrolling('scrollTop', y, speed);
+    }
+
+    scrollToTop(offset?: number, speed?: number)
+    {
+        this.animateScrolling('scrollTop', (offset || 0), speed);
+    }
+
+    scrollToLeft(offset?: number, speed?: number)
+    {
+        this.animateScrolling('scrollLeft', (offset || 0), speed);
+    }
+
+    scrollToRight(offset?: number, speed?: number)
+    {
+        const width = this.element.nativeElement.scrollWidth;
+
+        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
+    }
+
+    scrollToBottom(offset?: number, speed?: number)
+    {
+        const height = this.element.nativeElement.scrollHeight;
+
+        this.animateScrolling('scrollTop', height - (offset || 0), speed);
+    }
+
+    animateScrolling(target: string, value: number, speed?: number)
+    {
+        if ( !speed )
+        {
+            this.element.nativeElement[target] = value;
+
+            // PS has weird event sending order, this is a workaround for that
+            this.update();
+
+            this.update();
+        }
+        else if ( value !== this.element.nativeElement[target] )
+        {
+            let newValue = 0;
+            let scrollCount = 0;
+
+            let oldTimestamp = performance.now();
+            let oldValue = this.element.nativeElement[target];
+
+            const cosParameter = (oldValue - value) / 2;
+
+            const step = (newTimestamp) => {
+                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
+
+                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
+
+                // Only continue animation if scroll position has not changed
+                if ( this.element.nativeElement[target] === oldValue )
+                {
+                    if ( scrollCount >= Math.PI )
+                    {
+                        this.element.nativeElement[target] = value;
+
+                        // PS has weird event sending order, this is a workaround for that
+                        this.update();
+
+                        this.update();
+                    }
+                    else
+                    {
+                        this.element.nativeElement[target] = oldValue = newValue;
+
+                        oldTimestamp = newTimestamp;
+
+                        window.requestAnimationFrame(step);
+                    }
+                }
+            };
+
+            window.requestAnimationFrame(step);
+        }
+    }
+}
--- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
+++ b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseMatchMedia } from '../../services/match-media.service';
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs/Subscription';
@Directive({
    selector: '[fuseMdSidenavHelper]'
 })
-export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
+export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
 {
    matchMediaSubscription: Subscription;

@@ -38,6 +38,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                this.mdSidenav.mode = 'side';
                this.mdSidenav.open();
            });
+            this.stopTransition = false;
        }
        else
        {
@@ -46,6 +47,10 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                this.mdSidenav.mode = 'over';
                this.mdSidenav.close();
            });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
        }

        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -69,13 +74,6 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe

    }

-    ngAfterViewInit()
-    {
-        setTimeout(() => {
-            this.stopTransition = false;
-        }, 0);
-    }
-
    ngOnDestroy()
    {
        this.matchMediaSubscription.unsubscribe();
--- a/src/app/core/fuseUtils.ts
+++ b/src/app/core/fuseUtils.ts
@@ -1,6 +1,5 @@
 export class FuseUtils
 {
-
    public static filterArrayByString(mainArr, searchText)
    {
        if ( searchText === '' )
@@ -17,7 +16,6 @@ export class FuseUtils

    public static searchInObj(itemObj, searchText)
    {
-
        for ( const prop in itemObj )
        {
            if ( !itemObj.hasOwnProperty(prop) )
@@ -29,7 +27,7 @@ export class FuseUtils

            if ( typeof value === 'string' )
            {
-                if ( this.searchInSting(value, searchText) )
+                if ( this.searchInString(value, searchText) )
                {
                    return true;
                }
@@ -41,7 +39,6 @@ export class FuseUtils
                {
                    return true;
                }
-
            }

            if ( typeof value === 'object' )
@@ -60,7 +57,7 @@ export class FuseUtils
        {
            if ( typeof value === 'string' )
            {
-                if ( this.searchInSting(value, searchText) )
+                if ( this.searchInString(value, searchText) )
                {
                    return true;
                }
@@ -76,7 +73,7 @@ export class FuseUtils
        }
    }

-    public static searchInSting(value, searchText)
+    public static searchInString(value, searchText)
    {
        return value.toLowerCase().includes(searchText);
    }
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';

 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -13,11 +12,11 @@ import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
-import { FuseNavigationService } from '../components/navigation/navigation.service';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
 import { Md2Module } from 'md2';
@@ -31,6 +30,7 @@ import { CookieService } from 'ngx-cookie-service';
        FuseCountdownComponent,
        FuseHljsComponent,
        FuseIfOnDomDirective,
+        FusePerfectScrollbarDirective,
        FuseMaterialColorPickerComponent
    ],
    imports        : [
@@ -39,7 +39,6 @@ import { CookieService } from 'ngx-cookie-service';
        CommonModule,
        FormsModule,
        FusePipesModule,
-        PerfectScrollbarModule,
        ReactiveFormsModule,
        ColorPickerModule,
        NgxDnDModule,
@@ -56,7 +55,7 @@ import { CookieService } from 'ngx-cookie-service';
        FusePipesModule,
        FuseCountdownComponent,
        FuseHljsComponent,
-        PerfectScrollbarModule,
+        FusePerfectScrollbarDirective,
        ReactiveFormsModule,
        ColorPickerModule,
        NgxDnDModule,
@@ -70,7 +69,6 @@ import { CookieService } from 'ngx-cookie-service';
    ],
    providers      : [
        CookieService,
-        FuseNavigationService,
        FuseMatchMedia,
        FuseNavbarVerticalService,
        FuseMdSidenavHelperService
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -2,8 +2,8 @@
@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
-// Perfect Scrollbar
-@import "~perfect-scrollbar/src/css/main";
+// Perfect scrollbar
+@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
 // Fuse
@import "fuse";

--- a/src/app/core/scss/partials/_angular-material-fix.scss
+++ b/src/app/core/scss/partials/_angular-material-fix.scss
@@ -4,3 +4,38 @@
        border-radius: 50%;
    }
 }
+
+md-sidenav-container {
+
+    md-sidenav {
+
+        &[md-is-locked-open].md-stop-transition {
+            transition: none !important;
+            transform: translate3d(0, 0, 0) !important;
+            opacity: 0;
+
+            ~ .mat-sidenav-content,
+            ~ .mat-drawer-content {
+                transition: none !important;
+            }
+        }
+
+        &.mat-sidenav-opened {
+
+            &.mat-drawer-side {
+
+                ~ .mat-sidenav-content,
+                ~ .mat-drawer-content {
+                    transition: none !important;
+                    transform: translate3d(0, 0, 0) !important;
+                }
+            }
+        }
+
+        &.mat-drawer-end {
+        }
+    }
+
+    .mat-drawer-content {
+    }
+}
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -11,6 +11,21 @@
        white-space: nowrap;
    }

+    .nav-group {
+
+        > .group-title {
+            position: relative;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            font-weight: 500;
+            padding-left: 24px;
+            margin-top: 8px;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+    }
+
    .nav-item {

        .nav-link {
@@ -119,6 +134,31 @@
        }
    }

+    > .nav-group {
+
+        > .group-items {
+
+            > .nav-collapse {
+                background: transparent;
+                transition: background 200ms ease-in-out;
+
+                &.open {
+                    background: rgba(0, 0, 0, 0.12);
+                }
+            }
+        }
+    }
+
+    &.vertical {
+
+        .nav-group {
+
+            .group-title {
+                text-transform: uppercase;
+            }
+        }
+    }
+
    &.horizontal {
        display: flex;
        flex-direction: row;
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -137,19 +137,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                    @include mat-elevation(7);

                    &.md-is-locked-open {
-                        position: relative;
                        background: none;
                        box-shadow: none;
                    }

-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-                            transition: none;
-                        }
-                    }
-
                    .header {
                        height: $carded-header-height;
                        min-height: $carded-header-height;
@@ -233,7 +224,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');

                        ~ .mat-sidenav-content,
                        ~ .mat-drawer-content {
-                            margin-left: 0 !important;

                            .center {
                                margin-left: 0;
@@ -257,7 +247,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');

                        ~ .mat-sidenav-content,
                        ~ .mat-drawer-content {
-                            margin-right: 0 !important;

                            .center {
                                margin-right: 0;
@@ -284,6 +273,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
        }

        // Fullwidth
+        &.fullwidth {
+            overflow: auto;
+        }
+
        &.fullwidth,
        &.inner-sidenav {
            min-height: 100%;
@@ -309,10 +302,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                    > .mat-drawer-content {
                        flex: 1 0 auto;
                        max-height: none;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                    }
                }
            }
@@ -352,6 +341,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
            > md-sidenav-container {
                display: flex;
                flex-direction: column;
+                //flex-direction: row;
                flex: 1;
                background: none;
                z-index: 2;
@@ -372,14 +362,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                        background: transparent;
                    }

-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-                            transition: none;
-                        }
-                    }
-
                    .sidenav-content {
                        height: 100%;
                    }
@@ -467,7 +449,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
        &.simple {

            &.fullwidth {
-                overflow: visible;

                > .content {
                    flex: 1 0 auto;
@@ -483,10 +464,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                    > .mat-sidenav-content,
                    > .mat-drawer-content {
                        flex: 1 0 auto;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                    }
                }
            }
--- a/src/app/core/scss/partials/_scrollbars.scss
+++ b/src/app/core/scss/partials/_scrollbars.scss
@@ -1,20 +1,23 @@
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-    background-color: rgba(0, 0, 0, 0);
-}
+body:not(.is-mobile) {

-::-webkit-scrollbar:hover {
-    background-color: rgba(0, 0, 0, 0.12);
-}
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+        background-color: rgba(0, 0, 0, 0);
+    }

-::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-    border-radius: 24px;
-}
+    ::-webkit-scrollbar:hover {
+        background-color: rgba(0, 0, 0, 0.12);
+    }

-::-webkit-scrollbar-thumb:active {
-    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-    border-radius: 24px;
+    ::-webkit-scrollbar-thumb {
+        border: 2px solid transparent;
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
+        border-radius: 24px;
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+        border-radius: 24px;
+    }
 }
--- a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
+++ b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
@@ -1,4 +1,5 @@
 .ps {
+    position: relative;

    > .ps__scrollbar-y-rail {
        z-index: 99999;
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -30,7 +30,7 @@ export class FuseConfigService
            colorClasses    : {
                toolbar: 'md-white-500-bg',
                navbar : 'md-fuse-dark-500-bg',
-                footer : 'md-fuse-dark-800-bg'
+                footer : 'md-fuse-dark-700-bg'
            },
            customScrollbars: true,
            routerAnimation : 'fadeIn'
--- a/src/app/main/content/apps/calendar/calendar.component.html
+++ b/src/app/main/content/apps/calendar/calendar.component.html
@@ -1,7 +1,7 @@
-<div id="calendar" class="page-layout simple fullwidth" perfect-scrollbar>
+<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>

    <!-- HEADER -->
-    <div class="header" [ngClass]="viewDate | date:'MMM'">
+    <div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">

        <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">

@@ -9,9 +9,9 @@

                <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">

-                    <md-icon class="logo-icon">today</md-icon>
+                    <md-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</md-icon>

-                    <span class="logo-text">Calendar</span>
+                    <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>

                </div>

@@ -50,7 +50,8 @@
            <!-- / TOOLBAR -->

            <!-- HEADER BOTTOM -->
-            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center">
+            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
+                 *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">

                <button md-button class="mat-icon-button arrow"
                        mwlCalendarPreviousView
@@ -78,7 +79,8 @@
        </div>

        <!-- ADD EVENT BUTTON -->
-        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event">
+        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
+                *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
            <md-icon>add</md-icon>
        </button>
        <!-- / ADD EVENT BUTTON -->
@@ -86,7 +88,7 @@
    <!-- / HEADER -->

    <!-- CONTENT -->
-    <div class="content" perfect-scrollbar>
+    <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
        <div [ngSwitch]="view">
            <mwl-calendar-month-view
                *ngSwitchCase="'month'"
--- a/src/app/main/content/apps/calendar/calendar.component.scss
+++ b/src/app/main/content/apps/calendar/calendar.component.scss
@@ -26,8 +26,8 @@
    }

    .cal-open-day-events {
-        background: whitesmoke;
-        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
+        background: #455A64;
+        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
        padding: 0;
        display: flex;
        flex-direction: column;
@@ -44,11 +44,11 @@
            transition: box-shadow 300ms ease;

            &:first-of-type {
-                margin-top: 24px;
+                margin-top: 16px;
            }

            &:last-of-type {
-                margin-bottom: 24px;
+                margin-bottom: 16px;
            }

            &:hover {
@@ -184,12 +184,13 @@

 #calendar {
    background: #FFFFFF;
+    overflow-x: hidden;
+    overflow-y: auto;

    .header {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
-        padding: 24px;
        position: relative;
        background-size: 100% auto;
        background-position: 0 50%;
@@ -197,6 +198,12 @@
        background-color: #FAFAFA;
        color: #FFFFFF;

+        @include media-breakpoint(xs) {
+            height: 164px;
+            min-height: 164px;
+            max-height: 164px;
+        }
+
        &:before {
            content: '';
            position: absolute;
--- a/src/app/main/content/apps/calendar/calendar.component.ts
+++ b/src/app/main/content/apps/calendar/calendar.component.ts
@@ -1,5 +1,5 @@
 import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
@@ -13,13 +13,14 @@ import {
    CalendarMonthViewDay
 } from 'angular-calendar';
 import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';
+import { fuseAnimations } from '../../../../core/animations';

@Component({
-    selector       : 'fuse-calendar',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl    : './calendar.component.html',
-    styleUrls      : ['./calendar.component.scss'],
-    encapsulation  : ViewEncapsulation.None
+    selector     : 'fuse-calendar',
+    templateUrl  : './calendar.component.html',
+    styleUrls    : ['./calendar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseCalendarComponent implements OnInit
 {
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.html
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html
@@ -1,95 +1,98 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="title dialog-title">{{dialogTitle}}</span>
-        <button md-button class="mat-icon-button"
-                (click)="dialogRef.close()"
-                aria-label="Close dialog">
-            <md-icon>close</md-icon>
-        </button>
-    </div>
-</md-toolbar>
-
-<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
-
-    <form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
-
-        <md-input-container>
-            <input mdInput
-                   name="title"
-                   formControlName="title"
-                   placeholder="Title"
-                   required>
-        </md-input-container>
-
-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
-            <md-slide-toggle
-                name="allDay"
-                formControlName="allDay"
-                class="mr-24"
-                aria-label="All day">
-                All Day
-            </md-slide-toggle>
+<div class="dialog-content-wrapper">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+            <span class="title dialog-title">{{dialogTitle}}</span>
+            <button md-button class="mat-icon-button"
+                    (click)="dialogRef.close()"
+                    aria-label="Close dialog">
+                <md-icon>close</md-icon>
+            </button>
        </div>
+    </md-toolbar>

-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
-            <md-input-container class="mr-24">
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+
+        <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
+
+            <md-input-container class="w-100-p">
                <input mdInput
-                       name="primary color"
-                       formControlName="primary"
-                       placeholder="Primary color"
-                       [(colorPicker)]="event.color.primary"
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.primary"
-                       (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
+                       name="title"
+                       formControlName="title"
+                       placeholder="Title"
+                       required>
            </md-input-container>
-            <md-input-container>
+
+            <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
+                <md-slide-toggle
+                    name="allDay"
+                    formControlName="allDay"
+                    class="mr-24"
+                    aria-label="All day">
+                    All Day
+                </md-slide-toggle>
+            </div>
+
+            <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
+                <md-input-container class="mr-24" fxFlex>
+                    <input mdInput
+                           name="primary color"
+                           formControlName="primary"
+                           placeholder="Primary color"
+                           [(colorPicker)]="event.color.primary"
+                           cpWidth="290px"
+                           [cpPresetColors]="presetColors"
+                           [style.background]="event.color.primary"
+                           (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
+                </md-input-container>
+                <md-input-container fxFlex>
+                    <input mdInput
+                           name="secondary color"
+                           formControlName="secondary"
+                           placeholder="Secondary color"
+                           [(colorPicker)]="event.color.secondary"
+                           cpWidth="290px"
+                           [cpPresetColors]="presetColors"
+                           [style.background]="event.color.secondary"
+                           (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
+                </md-input-container>
+            </div>
+
+            <div fxFlex="1 0 auto" fxLayout="row">
+
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
+                    <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #startDatePicker></md-datepicker>
+                </md-form-field>
+
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                    <input mdInput placeholder="Start Time">
+                </md-input-container>
+
+            </div>
+
+            <div fxFlex="1 0 auto" fxLayout="row">
+
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
+                    <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #endDatePicker></md-datepicker>
+                </md-form-field>
+
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                    <input mdInput placeholder="End Time">
+                </md-input-container>
+
+            </div>
+
+            <md-input-container formGroupName="meta" class="w-100-p">
                <input mdInput
-                       name="secondary color"
-                       formControlName="secondary"
-                       placeholder="Secondary color"
-                       [(colorPicker)]="event.color.secondary"
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.secondary"
-                       (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
-            </md-input-container>
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
-                <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
-                <md-datepicker #startDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-datepicker #startDatePicker></md-datepicker>
-
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
-                <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
-                <md-datepicker #endDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-input-container class="no-errors-spacer" flex md-no-float>
-                <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
+                       name="location"
+                       formControlName="location"
+                       placeholder="Location">
            </md-input-container>

-        </div>
-
-        <md-input-container formGroupName="meta">
-            <input mdInput
-                   name="location"
-                   formControlName="location"
-                   placeholder="Location">
-        </md-input-container>
-
-        <md-input-container formGroupName="meta">
+            <md-input-container formGroupName="meta" class="w-100-p">

            <textarea mdInput
                      formControlName="notes"
@@ -97,39 +100,39 @@
                      md-maxlength="250"
                      max-rows="4">
            </textarea>
-        </md-input-container>
+            </md-input-container>

-    </form>
-
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-
-    <button *ngIf="action !=='edit'"
-            md-raised-button
-            (click)="dialogRef.close(eventForm)"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-raised-button
-            (click)="dialogRef.close(['save',eventForm])"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',eventForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
+        </form>

+    </div>
+
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+
+        <button *ngIf="action !=='edit'"
+                md-raised-button
+                (click)="dialogRef.close(eventForm)"
+                class="save-button mat-accent"
+                [disabled]="eventForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
+
+        <button *ngIf="action ==='edit'"
+                md-raised-button
+                (click)="dialogRef.close(['save',eventForm])"
+                class="save-button mat-accent"
+                [disabled]="eventForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
+
+        <button *ngIf="action ==='edit'"
+                md-button
+                class="mat-icon-button"
+                (click)="dialogRef.close(['delete',eventForm])"
+                aria-label="Delete"
+                md-tooltip="Delete">
+            <md-icon>delete</md-icon>
+        </button>
+    </div>
 </div>
--- a/src/app/main/content/apps/calendar/event-form/event-form.component.scss
+++ b/src/app/main/content/apps/calendar/event-form/event-form.component.scss
@@ -2,11 +2,12 @@

    .mat-dialog-container {
        padding: 0;
-        width: 720px;
+        width: 480px;
+    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
    }
 }
-
-:host {
-    display: flex;
-    flex-direction: column;
-}
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.html
+++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.html
@@ -1,14 +1,15 @@
 <div fxFlex fxLayout="column" fxLayoutAlign="center center">

-    <div class="big-circle mat-elevation-z1" fxLayout="column" fxLayoutAlign="center center">
+    <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
+         *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">

        <md-icon class="s-64 s-md-128">chat</md-icon>

    </div>

-    <span class="app-title my-24">Chat App</span>
+    <span class="app-title my-24" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>

-    <span fxHide fxShow.gt-md class="app-message">Select contact to start the chat!..</span>
+    <span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>

    <button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav">
        Select contact to start the chat!..
--- a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
+++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.ts
@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-chat-start',
    templateUrl: './chat-start.component.html',
-    styleUrls  : ['./chat-start.component.scss']
+    styleUrls  : ['./chat-start.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseChatStartComponent implements OnInit
 {
--- a/src/app/main/content/apps/chat/chat-view/chat-view.component.html
+++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.html
@@ -57,7 +57,7 @@
    <!-- / CHAT TOOLBAR -->

    <!-- CHAT CONTENT -->
-    <div id="chat-content" fxFlex perfect-scrollbar>
+    <div id="chat-content" fxFlex fusePerfectScrollbar>

        <!-- CHAT MESSAGES -->
        <div class="chat-messages">
--- a/src/app/main/content/apps/chat/chat-view/chat-view.component.ts
+++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.ts
@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
 import { ChatService } from '../chat.service';
 import { NgForm } from '@angular/forms';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { FusePerfectScrollbarDirective } from '../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

@Component({
    selector   : 'fuse-chat-view',
@@ -16,7 +16,7 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit
    contact: any;
    replyInput: any;
    selectedChat: any;
-    @ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
+    @ViewChild(FusePerfectScrollbarDirective) directiveScroll: FusePerfectScrollbarDirective;
    @ViewChildren('replyInput') replyInputField;
    @ViewChild('replyForm') replyForm: NgForm;

@@ -72,11 +72,12 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit
        speed = speed || 400;
        if ( this.directiveScroll )
        {
+            this.directiveScroll.update();
+
            setTimeout(() => {
                this.directiveScroll.scrollToBottom(0, speed);
            });
        }
-
    }

    reply(event)
--- a/src/app/main/content/apps/chat/chat.component.scss
+++ b/src/app/main/content/apps/chat/chat.component.scss
@@ -28,7 +28,7 @@
                > .mat-sidenav-content,
                > .mat-drawer-content {
                    display: flex;
-                    flex: 1 0 auto;
+                    flex: 1 1 auto;
                    min-height: 100%;
                    height: auto;
                }
--- a/src/app/main/content/apps/chat/chat.component.ts
+++ b/src/app/main/content/apps/chat/chat.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ChatService } from './chat.service';
+import { fuseAnimations } from '../../../../core/animations';

@Component({
    selector     : 'fuse-chat',
    templateUrl  : './chat.component.html',
    styleUrls    : ['./chat.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseChatComponent implements OnInit
 {
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
@@ -98,10 +98,10 @@
 <!-- / SIDENAV HEADER -->

 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content" perfect-scrollbar fxFlex>
+<div class="sidenav-content" fusePerfectScrollbar fxFlex>

    <!-- CHATS CONTENT -->
-    <div>
+    <div *fuseIfOnDom [@animateStagger]="{value:'50'}">

        <!-- CHATS LIST-->
        <div class="chat-list" fxLayout="column">
@@ -112,7 +112,8 @@

            <button md-button class="contact"
                    *ngFor="let chat of user.chatList | filter: searchText"
-                    (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}">
+                    (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"
+                    [@animate]="{value:'*',params:{y:'100%'}}">

                <div fxLayout="row" fxLayoutAlign="start center">

@@ -150,9 +151,9 @@
            </div>

            <button md-button class="contact"
-                    ng-show="chatSearch"
                    *ngFor="let contact of contacts| filter: searchText"
-                    (click)="getChat(contact.id)">
+                    (click)="getChat(contact.id)"
+                    [@animate]="{value:'*',params:{y:'100%'}}">

                <div fxLayout="row" fxLayoutAlign="start center">
                    <div class="avatar-wrapper" fxFlex="0 1 auto">
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { ChatService } from '../../../chat.service';
 import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { ObservableMedia } from '@angular/flex-layout';
+import { fuseAnimations } from '../../../../../../../core/animations';

@Component({
    selector   : 'fuse-chat-chats-sidenav',
    templateUrl: './chats.component.html',
-    styleUrls  : ['./chats.component.scss']
+    styleUrls  : ['./chats.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseChatChatsSidenavComponent implements OnInit
 {
--- a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/left.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Animations } from '../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../core/animations';
 import { ChatService } from '../../chat.service';

@Component({
    selector   : 'fuse-chat-left-sidenav',
    templateUrl: './left.component.html',
    styleUrls  : ['./left.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseChatLeftSidenavComponent implements OnInit
 {
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
@@ -29,7 +29,7 @@
 </div>

 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" perfect-scrollbar fxFlex>
+<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>

    <!-- USER MOOD -->
    <md-card>
--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
@@ -31,7 +31,7 @@
 </div>

 <!-- SIDENAV CONTENT -->
-<div class="sidenav-content p-16" perfect-scrollbar fxFlex *ngIf="contact">
+<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">

    <!-- CONTACT MOOD -->
    <md-card>
--- a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/right/right.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Animations } from '../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../core/animations';
 import { ChatService } from '../../chat.service';

@Component({
    selector   : 'fuse-chat-right-sidenav',
    templateUrl: './right.component.html',
    styleUrls  : ['./right.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseChatRightSidenavComponent implements OnInit
 {
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
@@ -1,126 +1,128 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="title dialog-title">{{dialogTitle}}</span>
-        <button md-button class="mat-icon-button"
-                (click)="dialogRef.close()"
-                aria-label="Close dialog">
-            <md-icon>close</md-icon>
-        </button>
+<div class="dialog-content-wrapper">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+            <span class="title dialog-title">{{dialogTitle}}</span>
+            <button md-button class="mat-icon-button"
+                    (click)="dialogRef.close()"
+                    aria-label="Close dialog">
+                <md-icon>close</md-icon>
+            </button>
+        </div>
+
+        <md-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
+            <img [src]="contact.avatar" class=" avatar contact-avatar huge"
+                 [alt]="contact.name"/>
+            <div class="contact-name">{{contact.name}}</div>
+        </md-toolbar-row>
+    </md-toolbar>
+
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+
+        <form [formGroup]="contactForm">
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">account_circle</md-icon>
+                <md-input-container fxFlex>
+                    <input name="name" formControlName="name" placeholder="Name" mdInput required>
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12"></md-icon>
+                <md-input-container fxFlex>
+                    <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">star</md-icon>
+                <md-input-container fxFlex>
+                    <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">phone</md-icon>
+                <md-input-container fxFlex>
+                    <input formControlName="phone" mdInput placeholder="Phone number">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">email</md-icon>
+                <md-input-container fxFlex>
+                    <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">domain</md-icon>
+                <md-input-container fxFlex>
+                    <input name="company" formControlName="company" mdInput placeholder="Company">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">work</md-icon>
+                <md-input-container fxFlex>
+                    <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
+                    <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #birthdayDatePicker></md-datepicker>
+                </md-form-field>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">home</md-icon>
+                <md-input-container fxFlex>
+                    <input name="address" formControlName="address" mdInput placeholder="Address">
+                </md-input-container>
+            </div>
+
+            <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">note</md-icon>
+                <md-input-container fxFlex>
+                    <textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+                </md-input-container>
+            </div>
+
+        </form>
+
    </div>

-    <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
-        <img [src]="contact.avatar" class=" avatar contact-avatar huge"
-             [alt]="contact.name"/>
-        <div class="contact-name">{{contact.name}}</div>
-    </md-toolbar-row>
-</md-toolbar>
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">

-<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
+        <button *ngIf="action !=='edit'"
+                md-raised-button
+                (click)="dialogRef.close(contactForm)"
+                class="save-button mat-accent"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>

-    <form [formGroup]="contactForm">
+        <button *ngIf="action ==='edit'"
+                md-raised-button
+                (click)="dialogRef.close(['save',contactForm])"
+                class="save-button mat-accent"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>

-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">account_circle</md-icon>
-            <md-input-container fxFlex>
-                <input name="name" formControlName="name" placeholder="Name" mdInput required>
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12"></md-icon>
-            <md-input-container fxFlex>
-                <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">star</md-icon>
-            <md-input-container fxFlex>
-                <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">phone</md-icon>
-            <md-input-container fxFlex>
-                <input formControlName="phone" mdInput placeholder="Phone number">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">email</md-icon>
-            <md-input-container fxFlex>
-                <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">domain</md-icon>
-            <md-input-container fxFlex>
-                <input name="company" formControlName="company" mdInput placeholder="Company">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">work</md-icon>
-            <md-input-container fxFlex>
-                <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-form-field class="mr-24" fxFlex>
-                <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
-                <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
-                <md-datepicker #birthdayDatePicker></md-datepicker>
-            </md-form-field>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">home</md-icon>
-            <md-input-container fxFlex>
-                <input name="address" formControlName="address" mdInput placeholder="Address">
-            </md-input-container>
-        </div>
-
-        <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">note</md-icon>
-            <md-input-container fxFlex>
-                <textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
-            </md-input-container>
-        </div>
-
-    </form>
-
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-
-    <button *ngIf="action !=='edit'"
-            md-raised-button
-            (click)="dialogRef.close(contactForm)"
-            class="save-button mat-accent"
-            [disabled]="contactForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-raised-button
-            (click)="dialogRef.close(['save',contactForm])"
-            class="save-button mat-accent"
-            [disabled]="contactForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',contactForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
+        <button *ngIf="action ==='edit'"
+                md-button
+                class="mat-icon-button"
+                (click)="dialogRef.close(['delete',contactForm])"
+                aria-label="Delete"
+                md-tooltip="Delete">
+            <md-icon>delete</md-icon>
+        </button>

+    </div>
 </div>
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@@ -3,14 +3,20 @@
    .mat-dialog-container {
        padding: 0;
        width: 400px;
+        overflow: hidden;
+
+        .mat-toolbar {
+            min-height: initial;
+        }

        .toolbar-bottom {
-            height: 200px;
+            height: auto;
        }
    }
-}

-:host {
-    display: flex;
-    flex-direction: column;
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html
@@ -1,5 +1,5 @@
-<md-table #table [dataSource]="dataSource">
-
+<md-table #table [dataSource]="dataSource"
+          [@animateStagger]="{value:'50'}">
    <!-- Checkbox Column -->
    <ng-container cdkColumnDef="checkbox">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
@@ -95,15 +95,12 @@

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let contact; columns: displayedColumns;"
+            class="contact"
            (click)="editContact(contact)"
            [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
-            md-ripple>
+            md-ripple
+            [@animate]="{value:'*',params:{y:'100%'}}">
    </md-row>
 </md-table>


-<!-- ADD CONTACT BUTTON -->
-<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact">
-    <md-icon>person_add</md-icon>
-</button>
-<!-- / ADD CONTACT BUTTON -->
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@@ -8,7 +8,7 @@
        box-shadow: none;

        .mat-column-checkbox {
-            flex: 0 1 64px;
+            flex: 0 1 48px;
        }

        .mat-column-avatar {
@@ -22,6 +22,7 @@
        .mat-row {
            position: relative;
            cursor: pointer;
+            padding-right: 8px;

            .mat-cell {
                min-width: 0;
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
@@ -6,11 +6,13 @@ import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { FormGroup } from '@angular/forms';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-contacts-contact-list',
    templateUrl: './contact-list.component.html',
-    styleUrls  : ['./contact-list.component.scss']
+    styleUrls  : ['./contact-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseContactsContactListComponent implements OnInit
 {
@@ -61,28 +63,6 @@ export class FuseContactsContactListComponent implements OnInit
        this.dataSource = new FilesDataSource(this.contactsService);
    }

-    newContact()
-    {
-        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
-            panelClass: 'contact-form-dialog',
-            data      : {
-                action: 'new'
-            }
-        });
-
-        this.dialogRef.afterClosed()
-            .subscribe((response: FormGroup) => {
-                if ( !response )
-                {
-                    return;
-                }
-
-                this.contactsService.updateContact(response.getRawValue());
-
-            });
-
-    }
-
    editContact(contact)
    {
        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/src/app/main/content/apps/contacts/contacts.component.html
@@ -1,7 +1,7 @@
-<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" perfect-scrollbar>
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav">

    <!-- HEADER -->
-    <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
+    <div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
         fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">

        <!-- APP TITLE -->
@@ -14,8 +14,8 @@
            </button>

            <div class="logo" fxLayout="row" fxLayoutAlign="start center">
-                <md-icon class="logo-icon mr-16">account_box</md-icon>
-                <span class="logo-text h1">Contacts</span>
+                <md-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</md-icon>
+                <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
            </div>

        </div>
@@ -43,15 +43,15 @@

        <!-- SIDENAV -->
        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
-                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
+                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm">

-            <fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
+            <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>

        </md-sidenav>
        <!-- / SIDENAV -->

        <!-- CENTER -->
-        <div class="center p-24 pr-sm-92" perfect-scrollbar>
+        <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>

            <!-- CONTENT -->
            <div class="content md-white-bg mat-elevation-z4">
@@ -67,3 +67,10 @@
    </md-sidenav-container>

 </div>
+
+<!-- ADD CONTACT BUTTON -->
+<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
+        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
+    <md-icon>person_add</md-icon>
+</button>
+<!-- / ADD CONTACT BUTTON -->
--- a/src/app/main/content/apps/contacts/contacts.component.scss
+++ b/src/app/main/content/apps/contacts/contacts.component.scss
@@ -4,3 +4,10 @@
        overflow: hidden;
    }
 }
+#add-contact-button {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    padding: 0;
+    z-index: 99;
+}
--- a/src/app/main/content/apps/contacts/contacts.component.ts
+++ b/src/app/main/content/apps/contacts/contacts.component.ts
@@ -1,25 +1,53 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
-import { Animations } from '../../../../core/animations';
-import { FormControl } from '@angular/forms';
+import { fuseAnimations } from '../../../../core/animations';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
+import { MdDialog } from '@angular/material';

@Component({
    selector     : 'fuse-contacts',
    templateUrl  : './contacts.component.html',
    styleUrls    : ['./contacts.component.scss'],
    encapsulation: ViewEncapsulation.None,
-    animations   : [Animations.slideInTop]
+    animations   : fuseAnimations
 })
 export class FuseContactsComponent implements OnInit
 {
    hasSelectedContacts: boolean;
    searchInput: FormControl;
+    dialogRef: any;

-    constructor(private contactsService: ContactsService)
+    constructor(
+        private contactsService: ContactsService,
+        public dialog: MdDialog
+    )
    {
        this.searchInput = new FormControl('');
    }

+    newContact()
+    {
+        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
+            panelClass: 'contact-form-dialog',
+            data      : {
+                action: 'new'
+            }
+        });
+
+        this.dialogRef.afterClosed()
+            .subscribe((response: FormGroup) => {
+                if ( !response )
+                {
+                    return;
+                }
+
+                this.contactsService.updateContact(response.getRawValue());
+
+            });
+
+    }
+
    ngOnInit()
    {

--- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
+++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
@@ -1,13 +1,13 @@
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">

-    <div class="close-button-wrapper" fxFlex="220px" (click)="deselectAll()">
+    <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
        <button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center">
            <md-icon class="mr-8">arrow_back</md-icon>
            <span class="text-uppercase">Back</span>
        </button>
    </div>

-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutAlign.gt-sm="space-between center">

        <div>
            <span class="selected-contacts-count">
--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html
@@ -13,7 +13,7 @@
        <!-- / SIDENAV HEADER -->

        <!-- SIDENAV CONTENT -->
-        <div class="content py-16" perfect-scrollbar>
+        <div class="content py-16" fusePerfectScrollbar>

            <div class="nav">

--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
@@ -11,7 +11,7 @@
        flex-direction: column;
        padding: 0;

-        @include media-breakpoint(gt-md) {
+        @include media-breakpoint(gt-sm) {
            padding: 24px 4px 24px 24px;
        }

@@ -21,7 +21,7 @@
            flex: 0 1 auto;
            padding: 0;

-            @include media-breakpoint(gt-md) {
+            @include media-breakpoint(gt-sm) {
                @include mat-elevation(4);
            }

--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -1,16 +1,16 @@
-<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row" perfect-scrollbar>
+<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">

    <md-sidenav-container>

        <!-- CENTER -->
-        <div class="center" fxFlex perfect-scrollbar>
+        <div class="center" fxFlex fusePerfectScrollbar>

            <!-- HEADER -->
            <div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">

                <div fxLayout="row" fxLayoutAlign="space-between start">

-                    <span class="mat-display-1 mb-0">Welcome back, John!</span>
+                    <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>

                    <button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
                        <md-icon>menu</md-icon>
@@ -41,10 +41,10 @@

                    <md-tab label="Home">

-                        <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 1 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -79,7 +79,8 @@

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

@@ -93,7 +94,7 @@
                            <!-- / WIDGET 1 -->

                            <!-- WIDGET 2 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -121,7 +122,8 @@

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

@@ -135,7 +137,7 @@
                            <!-- / WIDGET 2 -->

                            <!-- WIDGET 3 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -163,7 +165,8 @@

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

@@ -177,7 +180,7 @@
                            <!-- / WIDGET 3 -->

                            <!-- WIDGET 4 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -204,7 +207,8 @@

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

@@ -219,7 +223,7 @@


                            <!-- WIDGET 5 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -282,7 +286,6 @@
                                                        [xAxisLabel]="widget5.supporting.xAxisLabel"
                                                        [yAxisLabel]="widget5.supporting.yAxisLabel"
                                                        [curve]="widget5.supporting.curve">
-                                                        >
                                                    </ngx-charts-area-chart>
                                                </div>
                                            </div>
@@ -296,7 +299,7 @@


                            <!-- WIDGET 6 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -346,7 +349,7 @@
                            <!-- / WIDGET 6 -->

                            <!-- WIDGET 7 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -395,10 +398,10 @@
                    <md-tab label="Budget Summary">

                        <!-- WIDGET GROUP -->
-                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 8 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -429,7 +432,7 @@
                            <!-- / WIDGET 8 -->

                            <!-- WIDGET 9 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -543,7 +546,7 @@
                            <!-- / WIDGET 9 -->

                            <!-- WIDGET 10 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -590,10 +593,10 @@
                    <md-tab label="Team Members">

                        <!-- WIDGET GROUP -->
-                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap>
+                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 11 -->
-                            <fuse-widget class="" fxLayout="row" fxFlex="100">
+                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -688,14 +691,15 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
+
+            <div class="sidenav-content" fusePerfectScrollbar>

-            <div class="sidenav-content" perfect-scrollbar>
                <!-- WIDGET GROUP -->
-                <div class="widget-group" fxLayout="column" fxFlex="100">
+                <div class="widget-group" fxLayout="column" fxFlex="100" *fuseIfOnDom [@animateStagger]="{value:'50'}">

                    <!-- NOW WIDGET -->
-                    <fuse-widget class="sidenav-widget p-0">
+                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">

                        <!-- Front -->
                        <div class="fuse-widget-front">
@@ -738,9 +742,8 @@
                    </fuse-widget>
                    <!-- / NOW WIDGET -->

-
                    <!-- WEATHER WIDGET -->
-                    <fuse-widget class="sidenav-widget p-0">
+                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">

                        <!-- Front -->
                        <div class="fuse-widget-front">
--- a/src/app/main/content/apps/dashboards/project/project.component.scss
+++ b/src/app/main/content/apps/dashboards/project/project.component.scss
@@ -30,6 +30,15 @@
            }

            > .content {
+                flex: 1;
+
+                md-tab-group {
+                    height: 100%;
+
+                    .mat-tab-body-wrapper {
+                        flex-grow: 1;
+                    }
+                }

                .mat-tab-label-container {
                    padding: 0 24px;
--- a/src/app/main/content/apps/dashboards/project/project.component.ts
+++ b/src/app/main/content/apps/dashboards/project/project.component.ts
@@ -4,12 +4,14 @@ import * as shape from 'd3-shape';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector     : 'fuse-project',
    templateUrl  : './project.component.html',
    styleUrls    : ['./project.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseProjectComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.html
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.html
@@ -1,4 +1,4 @@
-<md-table #table [dataSource]="dataSource">
+<md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">

    <!-- Type Column -->
    <ng-container cdkColumnDef="icon">
@@ -53,6 +53,8 @@
    <md-row *cdkRowDef="let row; columns: displayedColumns;"
            (click)="onSelect(row)"
            [ngClass]="{'md-light-blue-50-bg':row == selected}"
-            md-ripple>
+            md-ripple
+            [@animate]="{value:'*',params:{y:'100%'}}"
+    >
    </md-row>
 </md-table>
--- a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
+++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.ts
@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { FileManagerService } from '../file-manager.service';
 import { Observable } from 'rxjs/Observable';
 import { DataSource } from '@angular/cdk/collections';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-file-list',
    templateUrl: './file-list.component.html',
-    styleUrls  : ['./file-list.component.scss']
+    styleUrls  : ['./file-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseFileManagerFileListComponent implements OnInit
 {
--- a/src/app/main/content/apps/file-manager/file-manager.component.html
+++ b/src/app/main/content/apps/file-manager/file-manager.component.html
@@ -1,4 +1,4 @@
-<div id="file-manager" class="page-layout simple right-sidenav" perfect-scrollbar>
+<div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar>

    <md-sidenav-container>

@@ -34,7 +34,8 @@
                <!-- / TOOLBAR -->

                <!-- BREADCRUMB -->
-                <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center">
+                <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
+                     *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
                    <div *ngFor="let path of pathArr; last  as isLast" fxLayout="row" fxLayoutAlign="start center">
                        <span>{{path}}</span>
                        <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
@@ -48,7 +49,8 @@
                    <button md-fab
                            class="add-file-button mat-warn"
                            (click)="fileInput.click()"
-                            aria-label="Add file">
+                            aria-label="Add file"
+                            *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
                        <md-icon>add</md-icon>
                    </button>
                </div>
@@ -58,7 +60,7 @@
            <!-- / HEADER -->

            <!-- CONTENT -->
-            <div class="content md-white-bg" perfect-scrollbar>
+            <div class="content md-white-bg" fusePerfectScrollbar>
                <fuse-file-list></fuse-file-list>
            </div>
            <!-- / CONTENT -->
--- a/src/app/main/content/apps/file-manager/file-manager.component.ts
+++ b/src/app/main/content/apps/file-manager/file-manager.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FileManagerService } from './file-manager.service';
+import { fuseAnimations } from '../../../../core/animations';

@Component({
    selector     : 'fuse-file-manager',
    templateUrl  : './file-manager.component.html',
    styleUrls    : ['./file-manager.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseFileManagerComponent implements OnInit
 {
@@ -15,7 +17,6 @@ export class FuseFileManagerComponent implements OnInit

    constructor(private fileManagerService: FileManagerService)
    {
-
    }

    ngOnInit()
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
+++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
@@ -27,9 +27,10 @@
 <!-- / SIDENAV HEADER -->

 <!-- SIDENAV CONTENT -->
-<div class="content p-24 md-white-bg" perfect-scrollbar>
+<div class="content p-24 md-white-bg" fusePerfectScrollbar>

-    <div class="file-details">
+    <div class="file-details"
+         *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">

        <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
            <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>
--- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
+++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FileManagerService } from '../../file-manager.service';
+import { fuseAnimations } from '../../../../../../core/animations';

@Component({
    selector   : 'fuse-file-manager-details-sidenav',
    templateUrl: './details.component.html',
-    styleUrls  : ['./details.component.scss']
+    styleUrls  : ['./details.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseFileManagerDetailsSidenavComponent implements OnInit
 {
--- a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html
+++ b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html
@@ -10,7 +10,7 @@
 <!-- / SIDENAV HEADER -->

 <!-- SIDENAV CONTENT -->
-<div class="content py-16" perfect-scrollbar>
+<div class="content py-16" fusePerfectScrollbar>

    <div class="nav">

--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html
@@ -1,109 +1,111 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="title dialog-title">New Message</span>
-        <button md-button class="mat-icon-button"
-                (click)="dialogRef.close()"
-                aria-label="Close dialog">
-            <md-icon>close</md-icon>
-        </button>
-    </div>
-</md-toolbar>
+<div class="dialog-content-wrapper">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+            <span class="title dialog-title">New Message</span>
+            <button md-button class="mat-icon-button"
+                    (click)="dialogRef.close()"
+                    aria-label="Close dialog">
+                <md-icon>close</md-icon>
+            </button>
+        </div>
+    </md-toolbar>

-<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>

-    <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
+        <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>

-        <md-input-container>
-            <input mdInput name="from"
-                   placeholder="From"
-                   formControlName="from"
-                   type="email">
-        </md-input-container>
+            <md-input-container>
+                <input mdInput name="from"
+                       placeholder="From"
+                       formControlName="from"
+                       type="email">
+            </md-input-container>

-        <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
-            <input mdInput name="to"
-                   placeholder="To"
-                   formControlName="to"
-                   type="email" required>
-        </md-input-container>
+            <md-input-container>
+                <input mdInput name="to"
+                       placeholder="To"
+                       formControlName="to"
+                       type="email" required>
+            </md-input-container>

-        <md-input-container>
-            <input mdInput
-                   name="cc"
-                   placeholder="Cc"
-                   formControlName="cc"
-                   type="email">
-        </md-input-container>
+            <md-input-container>
+                <input mdInput
+                       name="cc"
+                       placeholder="Cc"
+                       formControlName="cc"
+                       type="email">
+            </md-input-container>

-        <md-input-container>
-            <input mdInput
-                   name="bcc"
-                   placeholder="Bcc"
-                   formControlName="bcc"
-                   type="email">
-        </md-input-container>
+            <md-input-container>
+                <input mdInput
+                       name="bcc"
+                       placeholder="Bcc"
+                       formControlName="bcc"
+                       type="email">
+            </md-input-container>

-        <md-input-container>
-            <input mdInput name="subject"
-                   placeholder="Subject"
-                   formControlName="subject">
-        </md-input-container>
+            <md-input-container>
+                <input mdInput name="subject"
+                       placeholder="Subject"
+                       formControlName="subject">
+            </md-input-container>

-        <md-input-container>
+            <md-input-container>
            <textarea mdInput name="message"
                      placeholder="Message"
                      formControlName="message"
                      rows="6">
            </textarea>
-        </md-input-container>
+            </md-input-container>

-        <div class="attachment-list">
+            <div class="attachment-list">

-            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
-                <div>
-                    <span class="filename">attachment-2.doc</span>
-                    <span class="size">(12 Kb)</span>
+                <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                    <div>
+                        <span class="filename">attachment-2.doc</span>
+                        <span class="size">(12 Kb)</span>
+                    </div>
+
+                    <button md-icon-button aria-label="Delete attachment">
+                        <md-icon class="s-16">close</md-icon>
+                    </button>
                </div>

-                <button md-icon-button aria-label="Delete attachment">
-                    <md-icon class="s-16">close</md-icon>
-                </button>
-            </div>
+                <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                    <div>
+                        <span class="filename">attachment-1.jpg</span>
+                        <span class="size">(350 Kb)</span>
+                    </div>

-            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
-                <div>
-                    <span class="filename">attachment-1.jpg</span>
-                    <span class="size">(350 Kb)</span>
+                    <button md-icon-button aria-label="Delete attachment">
+                        <md-icon class="s-16">close</md-icon>
+                    </button>
                </div>
-
-                <button md-icon-button aria-label="Delete attachment">
-                    <md-icon class="s-16">close</md-icon>
-                </button>
            </div>
-        </div>
-    </form>
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-    <div>
-        <button md-raised-button
-                (click)="dialogRef.close(['send',composeForm])"
-                class="save-button mat-accent"
-                [disabled]="composeForm.invalid"
-                aria-label="SAVE">
-            SEND
-        </button>
-
-        <button md-icon-button md-tooltip="Attach a file">
-            <md-icon>attach_file</md-icon>
-        </button>
+        </form>
    </div>

-    <button md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',composeForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+        <div>
+            <button md-raised-button
+                    (click)="dialogRef.close(['send',composeForm])"
+                    class="save-button mat-accent"
+                    [disabled]="composeForm.invalid"
+                    aria-label="SAVE">
+                SEND
+            </button>
+
+            <button md-icon-button md-tooltip="Attach a file">
+                <md-icon>attach_file</md-icon>
+            </button>
+        </div>
+
+        <button md-button
+                class="mat-icon-button"
+                (click)="dialogRef.close(['delete',composeForm])"
+                aria-label="Delete"
+                md-tooltip="Delete">
+            <md-icon>delete</md-icon>
+        </button>
+    </div>
 </div>
--- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
+++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
@@ -1,15 +1,10 @@
-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .mail-compose-dialog {
    .mat-dialog-container {
        padding: 0;
        width: 720px;

        .compose-form {
-            
+
            .mat-input-container {
                width: 100%;
            }
@@ -36,4 +31,10 @@
            }
        }
    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-128 mb-16">email</md-icon>
-    <span class="select-message-text hint-text">Select a message to read</span>
+    <md-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</md-icon>
+    <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
 </div>

 <div *ngIf="mail">
@@ -85,7 +85,7 @@
            </div>

            <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    ng-click="$mdOpenMenu($event)">
+                    (click)="$event.stopPropagation()">
                <md-icon>more_vert</md-icon>
            </button>

--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.ts
@@ -2,11 +2,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from '../mail.service';
 import { Mail } from '../mail.model';
 import { Subscription } from 'rxjs/Subscription';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-mail-details',
    templateUrl: './mail-details.component.html',
-    styleUrls  : ['./mail-details.component.scss']
+    styleUrls  : ['./mail-details.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailDetailsComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -1,52 +1,67 @@
 <div fxLayout="row" fxLayoutAlign="start center">

-    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" (click)="$event.stopPropagation();"></md-checkbox>
+    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
+                 (click)="$event.stopPropagation();"></md-checkbox>

    <div class="info" fxFlex FlexLayout="column">

-        <div class="name" fxLayout="row" fxLayoutAlign="start center">
+        <div class="row-1" fxLayout="row" fxLayoutAlign="start center">

-            <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
-
-            <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
-
-            <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
-
-            <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
-        </div>
-
-        <div class="subject text-truncate">
-            {{mail.subject}}
-        </div>
-
-        <div class="message text-truncate" *ngIf="mail?.message">
-
-            {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
-        </div>
-
-        <div class="labels" fxLayout="row" fxLayoutWrap>
-            <div class="label" *ngFor="let labelId of mail.labels"
-                 fxLayout="row" fxLayoutAlign="start center">
-                <div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
-                <div class="label-title">{{labels | getById:labelId:'title'}}</div>
+            <div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
+                <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
+                <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
+                <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
            </div>
+
+            <div fxLayout="row" fxLayoutAlign="start center">
+
+                <div class="time">{{mail.time}}</div>
+
+                <!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
+
+                    <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+                        <md-icon *ngIf="mail.starred">star</md-icon>
+                        <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
+                            aria-label="Toggle important">
+                        <md-icon *ngIf="mail.important">label</md-icon>
+                        <md-icon *ngIf="!mail.important">label_outline</md-icon>
+                    </button>
+
+                </div>-->
+
+            </div>
+
        </div>
+
+        <div class="row-2" fxLayout="row" fxLayoutAlign="start center">
+
+            <div fxLayout="column" fxLayoutAlign="start start">
+
+                <div class="subject text-truncate">
+                    {{mail.subject}}
+                </div>
+
+                <div class="message text-truncate" *ngIf="mail?.message">
+                    {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
+                </div>
+
+                <div class="labels" fxLayout="row" fxLayoutWrap fxHide fxShow.gt-sm>
+                    <div class="label" *ngFor="let labelId of mail.labels"
+                         fxLayout="row" fxLayoutAlign="start center">
+                        <div class="label-color"
+                             [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
+                        <div class="label-title">{{labels | getById:labelId:'title'}}</div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
    </div>

-    <div fxLayout="column" fxLayoutAlign="space-between end">
-
-        <div class="time">{{mail.time}}</div>
-
-        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <md-icon *ngIf="mail.starred">star</md-icon>
-                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
-            </button>
-
-            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <md-icon *ngIf="mail.important">label</md-icon>
-                <md-icon *ngIf="!mail.important">label_outline</md-icon>
-            </button>
-        </div>
-    </div>
 </div>
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -12,16 +12,19 @@

        .info {

-            .name,
-            .subject {
+            .name {
                font-weight: 700;
            }

-            .message {
-            }
+            .row-2 {

-            .labels {
-                background: #FFFFFF;
+                .subject {
+                    font-weight: 700;
+                }
+
+                .labels {
+                    background: #FFFFFF;
+                }
            }
        }
    }
@@ -31,12 +34,11 @@

        .info {

-            .message {
+            .row-2 {

-            }
-
-            .labels {
-                background: #FFF8E1;
+                .labels {
+                    background: #FFF8E1;
+                }
            }
        }
    }
@@ -46,10 +48,11 @@

        .info {

-            .message {
-            }
-            .labels {
-                background: #E3F2FD;
+            .row-2 {
+
+                .labels {
+                    background: #E3F2FD;
+                }
            }
        }
    }
@@ -57,68 +60,70 @@
    .info {
        overflow: hidden;
        width: 0;
-        margin: 0 16px;
+        margin-left: 16px;
        position: relative;

-        .name {
-            font-size: 15px;
-            font-weight: 500;
-            padding-bottom: 8px;
+        .row-1 {
+            margin-bottom: 8px;

-            .avatar {
-                min-width: 32px;
-                width: 32px;
-                height: 32px;
-                line-height: 32px;
-                background-color: mat-color($accent);
+            .name {
+                font-size: 15px;
+                font-weight: 500;
+
+                .avatar {
+                    min-width: 32px;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    background-color: mat-color($accent);
+                }
+            }
+
+            .actions {
+                margin-left: 4px;
+
+                .mat-icon-button {
+                    width: 32px;
+                    height: 32px;
+                    line-height: 1;
+                }
            }
        }

-        .subject {
+        .row-2 {

-        }
+            .subject,
+            .message {
+                width: 100%;
+            }

-        .message {
-            position: relative;
-            color: rgba(0, 0, 0, 0.54);
-        }
+            .message {
+                position: relative;
+                color: rgba(0, 0, 0, 0.54);
+            }

-        .labels {
-            position: absolute;
-            background: #FAFAFA;
-            bottom: 0;
-            right: 0;
-            padding-left: 6px;
+            .labels {
+                position: absolute;
+                background: #FFFFFF;
+                bottom: 0;
+                right: 0;
+                padding-left: 6px;

-            .label {
-                font-size: 11px;
-                border-radius: 2px;
-                margin: 0 4px 0 0;
-                padding: 3px 8px;
-                background-color: rgba(0, 0, 0, 0.08);
+                .label {
+                    font-size: 11px;
+                    border-radius: 2px;
+                    margin: 0 4px 0 0;
+                    padding: 3px 8px;
+                    background-color: rgba(0, 0, 0, 0.08);

-                .label-color {
-                    width: 8px;
-                    height: 8px;
-                    margin-right: 8px;
-                    border-radius: 50%;
+                    .label-color {
+                        width: 8px;
+                        height: 8px;
+                        margin-right: 8px;
+                        border-radius: 50%;
+                    }
                }
            }
        }
    }
-
-    .time {
-        margin: 0 8px 6px 8px;
-    }
-
-    .actions {
-
-        .md-icon-button {
-            margin: 0;
-            padding: 0;
-            width: 32px;
-            height: 32px;
-        }
-    }
-
 }
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.html
@@ -2,6 +2,9 @@
    <span class="no-messages-text hint-text">There are no messages!</span>
 </div>

-<fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
-                     [ngClass]="{'current-mail':mail?.id == currentMail?.id}">
-</fuse-mail-list-item>
+<div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
+                         [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
+                         [@animate]="{value:'*',params:{y:'100%'}}">
+    </fuse-mail-list-item>
+</div>
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.scss
+++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.scss
@@ -11,4 +11,11 @@
        font-size: 24px;
        font-weight: 300;
    }
+
+    .mail-list {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
 }
--- a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
+++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.ts
@@ -4,11 +4,13 @@ import { ActivatedRoute } from '@angular/router';
 import { MailService } from '../mail.service';
 import { Location } from '@angular/common';
 import { Subscription } from 'rxjs/Subscription';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-mail-list',
    templateUrl: './mail-list.component.html',
-    styleUrls  : ['./mail-list.component.scss']
+    styleUrls  : ['./mail-list.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailListComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/src/app/main/content/apps/mail/mail.component.html
@@ -1,4 +1,4 @@
-<div id="mail" class="page-layout carded left-sidenav" perfect-scrollbar>
+<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>

    <!-- TOP BACKGROUND -->
    <div class="top-bg md-accent-bg"></div>
@@ -42,7 +42,7 @@
                <!-- CONTENT TOOLBAR -->
                <div class="toolbar px-24 py-8">

-                    <div fxFlex="row" fxLayoutAlign="start center">
+                    <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
                        <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
                                     [indeterminate]="isIndeterminate"></md-checkbox>

@@ -96,9 +96,9 @@
                <!-- CONTENT -->
                <div class="content" fxLayoutAlign="row">

-                    <fuse-mail-list perfect-scrollbar fxFlex></fuse-mail-list>
+                    <fuse-mail-list fusePerfectScrollbar fxFlex></fuse-mail-list>

-                    <fuse-mail-details perfect-scrollbar fxFlex></fuse-mail-details>
+                    <fuse-mail-details fusePerfectScrollbar fxFlex></fuse-mail-details>

                </div>
                <!-- / CONTENT -->
--- a/src/app/main/content/apps/mail/mail.component.scss
+++ b/src/app/main/content/apps/mail/mail.component.scss
@@ -40,6 +40,10 @@

            @include media-breakpoint(xs) {

+                fuse-mail-list {
+                    border-right: none;
+                }
+
                fuse-mail-list,
                fuse-mail-details {
                    flex: 1 0 100%;
@@ -51,6 +55,14 @@

                &.current-mail-selected {

+                    .toolbar {
+                        padding-left: 16px !important;
+
+                        .mail-selection {
+                            display: none !important;
+                        }
+                    }
+
                    .content {

                        fuse-mail-list {
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -2,11 +2,11 @@
 <div fxLayout="column" fxLayoutAlign="space-between start"
     class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
    <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
-        <md-icon class="logo-icon s-32">mail</md-icon>
-        <span class="logo-text">Mailbox</span>
+        <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
+        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
    </div>

-    <div class="account" fxLayout="column">
+    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
        <div class="title">John Doe</div>
        <md-select class="account-selection" placeholder="Mail Selection"
                   floatPlaceholder="never"
@@ -21,7 +21,7 @@
 <!-- / SIDENAV HEADER -->

 <!-- SIDENAV CONTENT -->
-<div class="content" perfect-scrollbar>
+<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">

    <div class="p-24">
        <button md-raised-button fxFlex
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
@@ -4,11 +4,13 @@ import { Subscription } from 'rxjs/Subscription';
 import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
 import { MdDialog } from '@angular/material';
 import { FormGroup } from '@angular/forms';
+import { fuseAnimations } from '../../../../../../core/animations';

@Component({
    selector   : 'fuse-mail-main-sidenav',
    templateUrl: './main-sidenav.component.html',
-    styleUrls  : ['./main-sidenav.component.scss']
+    styleUrls  : ['./main-sidenav.component.scss'],
+    animations : fuseAnimations
 })
 export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@@ -50,11 +50,12 @@
        </div>
        <!-- / HEADER -->

-        <div fxFlex class="board-content-wrapper p-16 p-md-24">
+        <div fxFlex class="board-content-wrapper p-16 p-md-24" [class]="board.settings.color+'-100-bg'">

            <!-- BOARD -->
-            <div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
-                 ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
+            <div class="board-content ngx-dnd-container p-16 p-md-24" fxLayout="row"
+                 ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)"
+                 *fuseIfOnDom [@animateStagger]="{value:'50'}">

                <!-- LIST -->
                <fuse-scrumboard-board-list
@@ -62,12 +63,15 @@
                    ngxDraggable
                    *ngFor="let list of board.lists"
                    [model]="list"
-                    [list]="list">
+                    [list]="list"
+                    [@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
                </fuse-scrumboard-board-list>
                <!-- / LIST -->

                <!-- NEW LIST BUTTON-->
-                <fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"></fuse-scrumboard-board-add-list>
+                <fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"
+                                                [@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
+                </fuse-scrumboard-board-add-list>
                <!-- / NEW LIST BUTTON-->

            </div>
--- a/src/app/main/content/apps/scrumboard/board/board.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/board.component.scss
@@ -100,6 +100,7 @@

            .board-content-wrapper {
                position: relative;
+                background: #E5E7E8;

                .board-content {
                    position: absolute;
@@ -108,7 +109,6 @@
                    bottom: 0;
                    left: 0;
                    height: 100%;
-                    background: #E5E7E8;
                    overflow-y: hidden;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
--- a/src/app/main/content/apps/scrumboard/board/board.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/board.component.ts
@@ -4,11 +4,13 @@ import { ScrumboardService } from '../scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Location } from '@angular/common';
 import { List } from '../list.model';
+import { fuseAnimations } from '../../../../../core/animations';

@Component({
    selector   : 'fuse-scrumboard-board',
    templateUrl: './board.component.html',
-    styleUrls  : ['./board.component.scss']
+    styleUrls  : ['./board.component.scss'],
+    animations  : fuseAnimations
 })
 export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
 {
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -1,452 +1,453 @@
-<md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
+<div class="dialog-content-wrapper">
+    <md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">

-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">

-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+
+                <!-- DUE DATE -->
+                <div class="due-date" fxFlex="0 1 auto">
+
+                    <button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
+                        <md-icon>today</md-icon>
+                    </button>
+
+                    <md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
+                        <button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
+                    </md-menu>
+
+                    <md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
+                </div>
+                <!-- / DUE DATE -->
+
+                <!-- LABELS -->
+                <div class="labels" fxFlex="0 1 auto">
+
+                    <button md-icon-button [mdMenuTriggerFor]="labelsMenu">
+                        <md-icon>label</md-icon>
+                    </button>
+
+                    <md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
+
+                        <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
+
+                    </md-menu>
+                </div>
+                <!-- / LABELS -->
+
+                <!-- MEMBERS -->
+                <div class="members" fxFlex="0 1 auto">
+
+                    <button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
+                        <md-icon>account_circle</md-icon>
+                    </button>
+
+                    <md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
+                        <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
+                            <md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
+                                         *ngFor="let member of board.members"
+                                         (change)="toggleInArray(member.id, card.idMembers);updateCard()">
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
+                                    <p class="member-name">{{ member.name }}</p>
+                                </div>
+                            </md-checkbox>
+                        </div>
+                    </md-menu>
+                </div>
+                <!-- / MEMBERS -->
+
+                <!-- ATTACHMENT -->
+                <button md-icon-button aria-label="Attachment">
+                    <md-icon>attachment</md-icon>
+                </button>
+                <!-- / ATTACHMENT -->
+
+                <!-- CHECKLIST -->
+                <div class="due-date " fxFlex="0 1 auto">
+
+                    <button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
+                        <md-icon>check_box</md-icon>
+                    </button>
+
+                    <md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
+
+                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
+                              fxLayout="column" fxLayoutAlign="start end">
+
+                            <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
+                                <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                            </md-input-container>
+
+                            <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
+                        </form>
+
+                    </md-menu>
+                </div>
+                <!-- / CHECKLIST -->
+
+                <!-- SUBSCRIBE -->
+                <div class="subscribe " fxFlex="0 1 auto">
+                    <button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
+                        <md-icon>remove_red_eye</md-icon>
+                    </button>
+                    <md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
+                        <button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
+                            Unsubscribe
+                        </button>
+                        <button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
+                            Subscribe
+                        </button>
+                    </md-menu>
+                </div>
+                <!-- / SUBSCRIBE -->
+
+                <!-- OPTIONS -->
+                <div class="options " fxFlex="0 1 auto">
+                    <button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
+                        <md-icon>more_horiz</md-icon>
+                    </button>
+                    <md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
+                        <button md-menu-item (click)="removeCard()">
+                            Remove Card
+                        </button>
+                    </md-menu>
+                </div>
+                <!-- / OPTIONS -->
+            </div>
+
+            <!-- CLOSE DIALOG BUTTON -->
+            <button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
+                <md-icon>close</md-icon>
+            </button>
+            <!-- / CLOSE DIALOG BUTTON -->
+        </div>
+    </md-toolbar>
+
+    <div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+
+        <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
+             fxLayout.xs="column" fxLayoutAlign="center center">
+
+            <!-- BREADCRUMB -->
+            <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+                <span>{{board.name}}</span>
+                <md-icon class="s-20">chevron_right</md-icon>
+                <span>{{list.name}}</span>
+            </div>
+            <!-- / BREADCRUMB -->

            <!-- DUE DATE -->
-            <div class="due-date" fxFlex="0 1 auto">
+            <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">

-                <button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
-                    <md-icon>today</md-icon>
+                <md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
+
+                <button md-icon-button class="remove-due-date" (click)="removeDueDate()">
+                    <md-icon class="s-16">close</md-icon>
                </button>
-
-                <md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
-                    <button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
-                </md-menu>
-
-                <md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
            </div>
            <!-- / DUE DATE -->

-            <!-- LABELS -->
-            <div class="labels" fxFlex="0 1 auto">
-
-                <button md-icon-button [mdMenuTriggerFor]="labelsMenu">
-                    <md-icon>label</md-icon>
-                </button>
-
-                <md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
-
-                    <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
-
-                </md-menu>
-            </div>
-            <!-- / LABELS -->
-
-            <!-- MEMBERS -->
-            <div class="members" fxFlex="0 1 auto">
-
-                <button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
-                    <md-icon>account_circle</md-icon>
-                </button>
-
-                <md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
-                    <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
-                        <md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
-                                     *ngFor="let member of board.members"
-                                     (change)="toggleInArray(member.id, card.idMembers);updateCard()">
-                            <div fxLayout="row" fxLayoutAlign="start center">
-                                <img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
-                                <p class="member-name">{{ member.name }}</p>
-                            </div>
-                        </md-checkbox>
-                    </div>
-                </md-menu>
-            </div>
-            <!-- / MEMBERS -->
-
-            <!-- ATTACHMENT -->
-            <button md-icon-button aria-label="Attachment">
-                <md-icon>attachment</md-icon>
-            </button>
-            <!-- / ATTACHMENT -->
-
-            <!-- CHECKLIST -->
-            <div class="due-date " fxFlex="0 1 auto">
-
-                <button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
-                    <md-icon>check_box</md-icon>
-                </button>
-
-                <md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
-
-                    <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
-                          fxLayout="column" fxLayoutAlign="start end">
-
-                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
-                            <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
-                        </md-input-container>
-
-                        <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
-                    </form>
-
-                </md-menu>
-            </div>
-            <!-- / CHECKLIST -->
-
-            <!-- SUBSCRIBE -->
-            <div class="subscribe " fxFlex="0 1 auto">
-                <button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
-                    <md-icon>remove_red_eye</md-icon>
-                </button>
-                <md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
-                    <button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
-                        Unsubscribe
-                    </button>
-                    <button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
-                        Subscribe
-                    </button>
-                </md-menu>
-            </div>
-            <!-- / SUBSCRIBE -->
-
-            <!-- OPTIONS -->
-            <div class="options " fxFlex="0 1 auto">
-                <button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
-                    <md-icon>more_horiz</md-icon>
-                </button>
-                <md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
-                    <button md-menu-item (click)="removeCard()">
-                        Remove Card
-                    </button>
-                </md-menu>
-            </div>
-            <!-- / OPTIONS -->
        </div>

-        <!-- CLOSE DIALOG BUTTON -->
-        <button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
-            <md-icon>close</md-icon>
-        </button>
-        <!-- / CLOSE DIALOG BUTTON -->
-    </div>
-</md-toolbar>
-
-<div *ngIf="card" md-dialog-content class="p-24 m-0" perfect-scrollbar>
-
-    <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
-         fxLayout.xs="column" fxLayoutAlign="center center">
-
-        <!-- BREADCRUMB -->
-        <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
-            <span>{{board.name}}</span>
-            <md-icon class="s-20">chevron_right</md-icon>
-            <span>{{list.name}}</span>
+        <!-- NAME -->
+        <div fxLayout="row" fxLayoutAlign="start center">
+            <md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
+            <div class="card-name">
+                <md-input-container floatPlaceholder="never" fxFlex>
+                    <input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
+                </md-input-container>
+            </div>
        </div>
-        <!-- / BREADCRUMB -->
+        <!-- / NAME -->

-        <!-- DUE DATE -->
-        <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
-
-            <md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
-
-            <button md-icon-button class="remove-due-date" (click)="removeDueDate()">
-                <md-icon class="s-16">close</md-icon>
-            </button>
-        </div>
-        <!-- / DUE DATE -->
-
-    </div>
-
-    <!-- NAME -->
-    <div fxLayout="row" fxLayoutAlign="start center">
-        <md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
-        <div class="card-name">
-            <md-input-container floatPlaceholder="never" fxFlex>
-                <input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
+        <!-- DESCRIPTION -->
+        <div class="description">
+            <md-input-container fxFlex>
+                <textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
            </md-input-container>
        </div>
-    </div>
-    <!-- / NAME -->
+        <!-- / DESCRIPTION -->

-    <!-- DESCRIPTION -->
-    <div class="description">
-        <md-input-container fxFlex>
-            <textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
-        </md-input-container>
-    </div>
-    <!-- / DESCRIPTION -->
+        <!-- SECTIONS -->
+        <div class="sections">

-    <!-- SECTIONS -->
-    <div class="sections">
+            <!-- LABELS SECTION -->
+            <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
+                 fxLayout="column" fxLayout.gt-xs="row">

-        <!-- LABELS SECTION -->
-        <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
-             fxLayout="column" fxLayout.gt-xs="row">
-
-            <div *ngIf="card.idLabels[0]" fxFlex class="labels">
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">label</md-icon>
-                    <span class="section-title">Labels</span>
+                <div *ngIf="card.idLabels[0]" fxFlex class="labels">
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">label</md-icon>
+                        <span class="section-title">Labels</span>
+                    </div>
+                    <div class="section-content">
+                        <md-chip-list class="label-chips">
+                            <md-chip class="label-chip mb-4"
+                                     *ngFor="let labelId of card.idLabels"
+                                     [class]="board.labels | getById:labelId:'color'"
+                                     fxLayout="row" fxLayoutAlign="start center">
+                                <span>{{board.labels|getById:labelId:'name'}}</span>
+                                <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
+                            </md-chip>
+                        </md-chip-list>
+                    </div>
                </div>
-                <div class="section-content">
-                    <md-chip-list class="label-chips">
-                        <md-chip class="label-chip mb-4"
-                                 *ngFor="let labelId of card.idLabels"
-                                 [class]="board.labels | getById:labelId:'color'"
-                                 fxLayout="row" fxLayoutAlign="start center">
-                            <span>{{board.labels|getById:labelId:'name'}}</span>
-                            <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
-                        </md-chip>
-                    </md-chip-list>
+
+                <div *ngIf="card.idMembers[0]" fxFlex class="members">
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">supervisor_account</md-icon>
+                        <span class="section-title">Members</span>
+                    </div>
+                    <div class="section-content">
+                        <md-chip-list class="member-chips">
+                            <md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
+                                     fxLayout="row" fxLayoutAlign="start center">
+                                <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
+                                     [md-tooltip]="board.members | getById:memberId:'name'">
+                                <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
+                            </md-chip>
+                        </md-chip-list>
+                    </div>
                </div>
            </div>
+            <!-- / LABELS SECTION -->

-            <div *ngIf="card.idMembers[0]" fxFlex class="members">
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">supervisor_account</md-icon>
-                    <span class="section-title">Members</span>
-                </div>
-                <div class="section-content">
-                    <md-chip-list class="member-chips">
-                        <md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
-                                 fxLayout="row" fxLayoutAlign="start center">
-                            <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
-                                 [md-tooltip]="board.members | getById:memberId:'name'">
-                            <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
-                        </md-chip>
-                    </md-chip-list>
-                </div>
-            </div>
-        </div>
-        <!-- / LABELS SECTION -->
+            <!-- ATTACHMENTS SECTION -->
+            <div *ngIf="card.attachments[0]" class="section">

-        <!-- ATTACHMENTS SECTION -->
-        <div *ngIf="card.attachments[0]" class="section">
+                <div class="attachments">

-            <div class="attachments">
-
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">attachment</md-icon>
-                    <span class="section-title">Attachments</span>
-                </div>
-
-                <div class="section-content">
-
-                    <div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
-
-                        <div *ngSwitchCase="'image'"
-                             fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
-                             fxLayout="column" fxLayoutAlign="center start">
-
-                            <div class="attachment-preview mat-elevation-z2"
-                                 [ngStyle]="{'background-image': 'url('+item.src+')'}">
-                            </div>
-
-                            <div class="attachment-content" fxLayout="column">
-
-                                <div fxLayout="row" fxLayoutAlign="start center">
-                                    <span class="attachment-name">{{item.name}}</span>
-                                    <md-icon *ngIf="card.idAttachmentCover === item.id"
-                                             class="yellow-700-fg attachment-is-cover s-20">star
-                                    </md-icon>
-                                </div>
-
-                                <span class="attachment-time">{{item.time}}</span>
-
-                                <div>
-                                    <button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
-                                        <span fxLayout="row" fxLayoutAlign="center center">
-                                            <span>Actions</span>
-                                            <md-icon class="s-20">arrow_drop_down</md-icon>
-                                        </span>
-                                    </button>
-                                    <md-menu #attachmentActionsMenu="mdMenu">
-                                        <button md-menu-item (click)="toggleCoverImage(item.id)">
-                                            <span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
-                                            <span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
-                                        </button>
-                                        <button md-menu-item (click)="removeAttachment(item)">
-                                            Remove Attachment
-                                        </button>
-                                    </md-menu>
-                                </div>
-
-                            </div>
-                        </div>
-
-                        <div *ngSwitchCase="'link'" fxLayout="row">
-                            <div class="attachment-preview mat-elevation-z2" fxLayout="column"
-                                 fxLayoutAlign="center center">
-                                <span>LINK</span>
-                            </div>
-                            <div class="attachment-content" fxLayout="column">
-                                <span class="attachment-url">{{item.url}}</span>
-                                <span class="attachment-time">{{item.time}}</span>
-                            </div>
-                        </div>
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">attachment</md-icon>
+                        <span class="section-title">Attachments</span>
                    </div>

-                    <button md-button class="add-attachment-button" aria-label="add attachment">
-                        <div fxLayout="row" fxLayoutAlign="start center">
-                            <md-icon class="s-20">add</md-icon>
-                            <span>Add an attachment</span>
+                    <div class="section-content">
+
+                        <div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
+
+                            <div *ngSwitchCase="'image'"
+                                 fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
+                                 fxLayout="column" fxLayoutAlign="center start">
+
+                                <div class="attachment-preview mat-elevation-z2"
+                                     [ngStyle]="{'background-image': 'url('+item.src+')'}">
+                                </div>
+
+                                <div class="attachment-content" fxLayout="column">
+
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <span class="attachment-name">{{item.name}}</span>
+                                        <md-icon *ngIf="card.idAttachmentCover === item.id"
+                                                 class="yellow-700-fg attachment-is-cover s-20">star
+                                        </md-icon>
+                                    </div>
+
+                                    <span class="attachment-time">{{item.time}}</span>
+
+                                    <div>
+                                        <button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
+                                            <span fxLayout="row" fxLayoutAlign="center center">
+                                                <span>Actions</span>
+                                                <md-icon class="s-20">arrow_drop_down</md-icon>
+                                            </span>
+                                        </button>
+                                        <md-menu #attachmentActionsMenu="mdMenu">
+                                            <button md-menu-item (click)="toggleCoverImage(item.id)">
+                                                <span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
+                                                <span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
+                                            </button>
+                                            <button md-menu-item (click)="removeAttachment(item)">
+                                                Remove Attachment
+                                            </button>
+                                        </md-menu>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                            <div *ngSwitchCase="'link'" fxLayout="row">
+                                <div class="attachment-preview mat-elevation-z2" fxLayout="column"
+                                     fxLayoutAlign="center center">
+                                    <span>LINK</span>
+                                </div>
+                                <div class="attachment-content" fxLayout="column">
+                                    <span class="attachment-url">{{item.url}}</span>
+                                    <span class="attachment-time">{{item.time}}</span>
+                                </div>
+                            </div>
                        </div>
-                    </button>
-                </div>
-            </div>
-        </div>
-        <!-- / ATTACHMENTS SECTION -->

-        <!-- CHECKLISTS SECTION -->
-        <div class="section" *ngFor="let checklist of card.checklists">
-
-            <div class="checklist">
-
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-
-                    <md-icon class="s-20">check_box</md-icon>
-
-                    <span fxFlex class="section-title">{{checklist.name}}</span>
-
-
-                    <div>
-                        <button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
-                            <md-icon class="s-20">more_vert</md-icon>
+                        <button md-button class="add-attachment-button" aria-label="add attachment">
+                            <div fxLayout="row" fxLayoutAlign="start center">
+                                <md-icon class="s-20">add</md-icon>
+                                <span>Add an attachment</span>
+                            </div>
                        </button>
-                        <md-menu #checklistActionsMenu="mdMenu">
-                            <button md-menu-item (click)="removeChecklist(checklist)">
-                                <md-icon>delete</md-icon>
-                                <span>Remove Checklist</span>
-                            </button>
-                        </md-menu>
                    </div>
-
                </div>
+            </div>
+            <!-- / ATTACHMENTS SECTION -->

-                <div class="section-content">
+            <!-- CHECKLISTS SECTION -->
+            <div class="section" *ngFor="let checklist of card.checklists">

-                    <div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">
+                <div class="checklist">

-                        <span class="checklist-progress-value">
-                            {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
-                        </span>
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+
+                        <md-icon class="s-20">check_box</md-icon>
+
+                        <span fxFlex class="section-title">{{checklist.name}}</span>
+
+
+                        <div>
+                            <button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
+                                <md-icon class="s-20">more_vert</md-icon>
+                            </button>
+                            <md-menu #checklistActionsMenu="mdMenu">
+                                <button md-menu-item (click)="removeChecklist(checklist)">
+                                    <md-icon>delete</md-icon>
+                                    <span>Remove Checklist</span>
+                                </button>
+                            </md-menu>
+                        </div>

-                        <md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
-                                         value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
-                        </md-progress-bar>
                    </div>

-                    <div class="check-items">
+                    <div class="section-content">

-                        <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+                        <div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">

-                            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-                                <md-checkbox [(ngModel)]="checkItem.checked"
-                                             (change)="updateCheckedCount(checklist)"
-                                             aria-label="{{checkItem.name}}">
-                                </md-checkbox>
-                                <md-input-container fxFlex class="mx-12">
-                                    <input mdInput [(ngModel)]="checkItem.name">
+                            <span class="checklist-progress-value">
+                                {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
+                            </span>
+
+                            <md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
+                                             value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
+                            </md-progress-bar>
+                        </div>
+
+                        <div class="check-items">
+
+                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+
+                                <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                                    <md-checkbox [(ngModel)]="checkItem.checked"
+                                                 (change)="updateCheckedCount(checklist)"
+                                                 aria-label="{{checkItem.name}}">
+                                    </md-checkbox>
+                                    <md-input-container fxFlex class="mx-12">
+                                        <input mdInput [(ngModel)]="checkItem.name">
+                                    </md-input-container>
+                                </div>
+
+                                <button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
+                                    <md-icon class="s-20">delete</md-icon>
+                                </button>
+
+                            </div>
+                        </div>
+
+                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
+                              fxLayout="row" fxLayoutAlign="start center">
+
+                            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                                <md-icon class="s-20">add</md-icon>
+
+                                <md-input-container class="no-errors-spacer mx-12" fxFlex>
+                                    <input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
                                </md-input-container>
                            </div>

-                            <button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
-                                <md-icon class="s-20">delete</md-icon>
-                            </button>
-
-                        </div>
-                    </div>
-
-                    <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
-                          fxLayout="row" fxLayoutAlign="start center">
-
-                        <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-                            <md-icon class="s-20">add</md-icon>
-
-                            <md-input-container class="no-errors-spacer mx-12" fxFlex>
-                                <input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
-                            </md-input-container>
-                        </div>
-
-                        <button md-raised-button
-                                [disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
-                                class="mat-accent" aria-label="Add">
-                            <span>Add</span>
-                        </button>
-                    </form>
-
-                </div>
-            </div>
-        </div>
-        <!-- / CHECKLISTS SECTION -->
-
-        <!-- COMMENTS SECTION -->
-        <div class="section">
-
-            <div class="comments">
-
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">comment</md-icon>
-                    <span class="section-title">Comments</span>
-                </div>
-
-                <div class="section-content">
-                    <form name="cardCommentForm"
-                          #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
-                          ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
-                          class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
-
-                        <div fxLayout="row">
-                            <img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
-                            <md-input-container fxFlex>
-                                <input mdInput name="newComment" ngModel #newComment="ngModel"
-                                       placeholder="Write a comment.." required>
-                            </md-input-container>
-                        </div>
-
-                        <div fxLayout="row" fxLayoutAlign="end center">
-                            <button md-raised-button class="mat-accent"
-                                    [disabled]="!newCommentForm.valid || newCommentForm.pristine"
-                                    aria-label="Add">
+                            <button md-raised-button
+                                    [disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
+                                    class="mat-accent" aria-label="Add">
                                <span>Add</span>
                            </button>
-                        </div>
-                    </form>
+                        </form>

-                    <div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
+                    </div>
+                </div>
+            </div>
+            <!-- / CHECKLISTS SECTION -->

-                        <img class="comment-member-avatar"
-                             [src]="board.members | getById: comment.idMember:'avatar'">
+            <!-- COMMENTS SECTION -->
+            <div class="section">

-                        <div fxLayout="column">
-                            <div class="comment-member-name">
-                                {{board.members | getById: comment.idMember:'name'}}
+                <div class="comments">
+
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">comment</md-icon>
+                        <span class="section-title">Comments</span>
+                    </div>
+
+                    <div class="section-content">
+                        <form name="cardCommentForm"
+                              #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
+                              class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
+
+                            <div fxLayout="row">
+                                <img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
+                                <md-input-container fxFlex>
+                                    <input mdInput name="newComment" ngModel #newComment="ngModel"
+                                           placeholder="Write a comment.." required>
+                                </md-input-container>
+                            </div>
+
+                            <div fxLayout="row" fxLayoutAlign="end center">
+                                <button md-raised-button class="mat-accent"
+                                        [disabled]="!newCommentForm.valid || newCommentForm.pristine"
+                                        aria-label="Add">
+                                    <span>Add</span>
+                                </button>
+                            </div>
+                        </form>
+
+                        <div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
+
+                            <img class="comment-member-avatar"
+                                 [src]="board.members | getById: comment.idMember:'avatar'">
+
+                            <div fxLayout="column">
+                                <div class="comment-member-name">
+                                    {{board.members | getById: comment.idMember:'name'}}
+                                </div>
+                                <div class="comment-bubble">{{comment.message}}</div>
+                                <div class="comment-time secondary-text">{{comment.time}}</div>
                            </div>
-                            <div class="comment-bubble">{{comment.message}}</div>
-                            <div class="comment-time secondary-text">{{comment.time}}</div>
                        </div>
                    </div>
                </div>
            </div>
-        </div>
-        <!-- / COMMENTS SECTION -->
+            <!-- / COMMENTS SECTION -->

-        <!-- ACTIVITIES SECTION -->
-        <div *ngIf="card.activities[0]" class="section">
+            <!-- ACTIVITIES SECTION -->
+            <div *ngIf="card.activities[0]" class="section">

-            <div class="activities">
+                <div class="activities">

-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">list</md-icon>
-                    <span class="section-title">Activity</span>
-                </div>
-
-                <div class="section-content">
-                    <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
-                        <img class="activity-member-avatar"
-                             [src]="board.members| getById:activity.idMember:'avatar'">
-                        <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
-                        <div class="activity-message">{{activity.message}}</div>
-                        <div class="activity-time secondary-text">{{activity.time}}</div>
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">list</md-icon>
+                        <span class="section-title">Activity</span>
                    </div>
+
+                    <div class="section-content">
+                        <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
+                            <img class="activity-member-avatar"
+                                 [src]="board.members| getById:activity.idMember:'avatar'">
+                            <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
+                            <div class="activity-message">{{activity.message}}</div>
+                            <div class="activity-time secondary-text">{{activity.time}}</div>
+                        </div>
+                    </div>
+
                </div>
-
            </div>
-        </div>
-        <!-- / ACTIVITIES SECTION -->
+            <!-- / ACTIVITIES SECTION -->

+        </div>
+        <!-- / SECTIONS -->
    </div>
-    <!-- / SECTIONS -->
 </div>
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -1,10 +1,5 @@
@import "src/app/core/scss/fuse";

-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .scrumboard-card-dialog {

    .mat-dialog-container {
@@ -387,6 +382,12 @@
        }

    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }

 .scrumboard-members-menu {
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
@@ -10,7 +10,7 @@
            </button>
        </div>

-        <div fxFlex fxLayout="column" perfect-scrollbar>
+        <div fxFlex fxLayout="column" fusePerfectScrollbar>

            <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
                 [class]="label.color">
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
@@ -2,14 +2,14 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsul
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../../scrumboard.service';
 import { FuseUtils } from '../../../../../../../../core/fuseUtils';
-import { Animations } from '../../../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../../../core/animations';

@Component({
    selector     : 'fuse-scrumboard-label-selector',
    templateUrl  : './label-selector.component.html',
    styleUrls    : ['./label-selector.component.scss'],
    encapsulation: ViewEncapsulation.None,
-    animations   : [Animations.slideInLeft, Animations.slideInRight]
+    animations   : fuseAnimations
 })

 export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.html
@@ -26,7 +26,7 @@

        <div class="list-cards ngx-dnd-container"
             [model]="list.idCards" ngxDroppable="card" (out)="onDrop($event)"
-             perfect-scrollbar #listScroll>
+             fusePerfectScrollbar #listScroll>
            <fuse-scrumboard-board-card ngxDraggable
                                        (click)="openCardDialog(cardId)"
                                        class="scrumboard-board-card mat-elevation-z2 ngx-dnd-item"
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.ts
@@ -3,11 +3,11 @@ import { FuseUtils } from '../../../../../../core/fuseUtils';
 import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
 import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
 import { Card } from '../../card.model';
+import { FusePerfectScrollbarDirective } from '../../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

@Component({
    selector     : 'fuse-scrumboard-board-list',
@@ -21,7 +21,7 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
    dialogRef: any;

    @Input() list;
-    @ViewChild(PerfectScrollbarDirective) listScroll: PerfectScrollbarDirective;
+    @ViewChild(FusePerfectScrollbarDirective) listScroll: FusePerfectScrollbarDirective;

    onBoardChanged: Subscription;

--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
@@ -9,7 +9,7 @@
        <!-- / SIDENAV HEADER -->

        <!-- SIDENAV CONTENT -->
-        <div class="content py-16" perfect-scrollbar>
+        <div class="content py-16" fusePerfectScrollbar>

            <div class="nav">
                <div class="nav-item">
@@ -67,7 +67,7 @@
        <!-- / SIDENAV HEADER -->

        <!-- SIDENAV CONTENT -->
-        <div class="content p-8" perfect-scrollbar>
+        <div class="content p-8" fusePerfectScrollbar>
            <fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
        </div>
        <!-- / SIDENAV CONTENT -->
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../scrumboard.service';
-import { Animations } from '../../../../../../../core/animations';
+import { fuseAnimations } from '../../../../../../../core/animations';

@Component({
    selector   : 'fuse-scrumboard-board-settings',
    templateUrl: './settings.component.html',
    styleUrls  : ['./settings.component.scss'],
-    animations : [Animations.slideInLeft, Animations.slideInRight]
+    animations : fuseAnimations
 })
 export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
 {
@@ -19,7 +19,6 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDe
        private scrumboardService: ScrumboardService
    )
    {
-
    }

    ngOnInit()
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.html
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html
@@ -1,17 +1,19 @@
 <!-- BOARDS -->
-<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfect-scrollbar>
+<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>

-    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
+    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms'}}">
        <h1>Scrumboard App</h1>
    </div>

    <!-- BOARD LIST -->
-    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
+    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap
+         *fuseIfOnDom [@animateStagger]="{value:'50'}">

        <!-- BOARD -->
        <div class="board-list-item" *ngFor="let board of boards"
             [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
-             fxLayout="column" fxLayoutAlign="center center">
+             fxLayout="column" fxLayoutAlign="center center"
+             [@animate]="{value:'*',params:{y:'100%'}}">
            <md-icon class="s-64">assessment</md-icon>
            <div class="board-name">{{board.name}}</div>
        </div>
@@ -19,7 +21,8 @@

        <!-- NEW BOARD BUTTON -->
        <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
-             (click)="newBoard()">
+             (click)="newBoard()"
+             [@animate]="{value:'*',params:{y:'100%'}}">
            <md-icon class="s-64">add_circle</md-icon>
            <div class="board-name">Add new board</div>
        </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
mustafahlvc	21c96c76da	Merge remote-tracking branch 'origin/master'	2017-09-22 16:18:24 +03:00
mustafahlvc	5e2e2b7d53	Backdrop added to FuseNavBar for mobile	2017-09-22 16:18:05 +03:00
Sercan Yemen	dcff423943	Updated version to 1.1.0 since we have couple breaking changes!	2017-09-22 16:07:05 +03:00
Sercan Yemen	6747610771	Fixed: Fullwidth simple page layout doesn't scroll + Added: New logo to the various pages + Fixed: Mobile zoom is not disabled + Fixed: Profile timeline mobile order is not correct + Fixed: Quickpanel focusses to the form elements causing it to scroll on mobile devices when opened + Various demo page mobile fixes	2017-09-22 16:04:59 +03:00
Sercan Yemen	e6ee5d017e	small tweaks and ng-* cleanups + Fixed: todo item action buttons shouldn't trigger "view todo" action + Fixed: contacts selected bar mobile issues	2017-09-22 15:02:07 +03:00
Sercan Yemen	cb2b544526	chat, todo & theme options tweaks	2017-09-22 12:11:21 +03:00
mustafahlvc	5ace09f782	Calendar, Contacts, Mail, Scrumboard apps responsive refinements, + temporary fix for md-sidenav-locked transition	2017-09-22 12:03:21 +03:00
Sercan Yemen	678dde8c0e	calendar, mail and todo tweaks	2017-09-22 11:32:31 +03:00
Sercan Yemen	236cf1eb06	renamed the HMR starting scripts + modified the build scripts to use more memory. If you are having `out of memory` issues while building, use these scripts	2017-09-22 11:32:08 +03:00
Sercan Yemen	f4efbe07f7	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-09-22 09:23:38 +03:00
mustafahlvc	671287b55a	Reverting the sidenav fixes..	2017-09-21 19:03:19 +03:00
Sercan Yemen	19c85c964b	updated the version number to 1.0.6	2017-09-21 15:54:25 +03:00
Sercan Yemen	e5cf4fdafb	demo component and service page updates	2017-09-21 15:54:11 +03:00
Sercan Yemen	098dacf2a5	removed console warn	2017-09-21 15:13:27 +03:00
mustafahlvc	2f8539e987	Merge remote-tracking branch 'origin/master'	2017-09-21 15:05:36 +03:00
mustafahlvc	f688a58656	Animations enhanced for all apps and some pages.	2017-09-21 15:05:18 +03:00
Sercan Yemen	9cb8c0c96b	Added a way to swap navigation model on the fly Moved the navigation service to the app.module since we need it to be a singleton at all times	2017-09-21 14:56:08 +03:00
Sercan Yemen	05575d3f82	Fixed: Navigation model must be public	2017-09-21 14:08:37 +03:00
Sercan Yemen	b9198e3717	Entirely changed the navigation model structure (sorry!) + Fixed: Horizontal and Vertical navigation must be able to use the same model structure + Fixed: Collapsable nav item that has the active menu shouldn't be collapsed when other collapsables toggles	2017-09-21 12:08:52 +03:00
Sercan Yemen	769e67c2f3	Added HMR config. Use 'npm run hmr' for HMR enabled environment. This start script disables the sourcemaps to further increase the re-compile performance. If you need HMR with sourcemaps use 'npm run hmrs'	2017-09-21 10:58:19 +03:00
Sercan Yemen	32960abd7c	fixed sidenav for fuse https://github.com/angular/material2/issues/7201	2017-09-20 17:38:14 +03:00
Sercan Yemen	126e32d9e7	updated Angular to 4.4.3	2017-09-20 10:06:43 +03:00
Sercan Yemen	d6d74cb998	small tweaks	2017-09-20 10:06:28 +03:00
Sercan Yemen	6d20c1d62d	Custom perfect-scrollbar directive for better control (replaced the ngx-perfect-scrollbar with fuse-perfect-scrollbar)	2017-09-18 16:06:15 +03:00
Sercan Yemen	b55bce2de4	fixed: navigation collapsable issue on route change fixed: footer stays on top of the navigation on mobile	2017-09-18 15:58:47 +03:00
Sercan Yemen	6f4dc36a3d	locked dev dependency versions to prevent "npm update" errors!	2017-09-18 10:48:02 +03:00
Sercan Yemen	fe7e6d173b	small tweaks and clean-ups	2017-09-18 10:47:35 +03:00
Sercan Yemen	b377d99c66	new fuse logo	2017-09-18 10:47:08 +03:00
Sercan Yemen	d4374e6df0	changed 'perfect-scrollbar' to 'perfectScrollbar'	2017-09-18 10:46:09 +03:00
Sercan Yemen	c74fad84b6	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-09-18 10:25:04 +03:00
mustafahlvc	e09ef05e02	(ngx-perfect-scroolbar) updated to v.4.6.2	2017-09-15 17:40:38 +03:00
Sercan Yemen	2c0fc76b8a	meta tags and description for demo	2017-09-12 14:23:54 +03:00
Sercan Yemen	752660f5dc	fix: theme options are not correctly shown on mobile	2017-09-12 10:25:11 +03:00
				`@@ -1 +0,0 @@`
				`<span class="hint-text">{{ item.title }}</span>`