Merge branch 'master' into skeleton

Updated the changelog

CREDITS

@@ -0,0 +1,16 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Image/Vector/Icon Credits
+// -----------------------------------------------------------------------------------------------------
+Avatars - https://uifaces.co/
+Flag icons - http://www.famfamfam.com/lab/icons/flags/
+Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
+A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
+Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
+Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
+Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
+Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
+Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
+Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
+Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
+Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
+First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4

LICENSE

@@ -1 +1,2 @@
-https://themeforest.net/licenses/terms/regular
+This project is protected by Envato's Regular License. For more information,
+check the official license page at https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
 # Fuse - Angular
 
-Material Design Admin Template with Angular 6+ and Angular Material
+Material Design Admin Template with Angular 7+ and Angular Material
 
 ## The Community
 

angular.json

@@ -48,7 +48,14 @@
                             "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
                         },
                         "ec": {
                             "sourceMap": true,
@@ -96,7 +103,7 @@
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
                         "styles": [
-                            "styles.scss"
+                            "src/styles.scss"
                         ],
                         "scripts": [],
                         "assets": [
@@ -122,12 +129,18 @@
         "fuse-e2e": {
             "root": "e2e/",
             "projectType": "application",
+            "prefix": "",
             "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
                         "protractorConfig": "e2e/protractor.conf.js",
                         "devServerTarget": "fuse:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
                     }
                 },
                 "lint": {

e2e/src/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { FusePage } from './app.po';
 
-describe('Fuse2 App', () => {
-    let page: Fuse2Page;
+describe('Fuse App', () => {
+    let page: FusePage;
 
     beforeEach(() => {
-        page = new Fuse2Page();
+        page = new FusePage();
     });
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
     });
 });

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
-export class Fuse2Page {
+export class FusePage {
     navigateTo(): any {
         return browser.get('/');
     }
 
     getParagraphText(): any {
-        return element(by.css('app-root h1')).getText();
+        return element(by.css('app #main')).getText();
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -18,20 +18,20 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.1.6",
-    "@angular/cdk": "6.4.6",
-    "@angular/common": "6.1.6",
-    "@angular/compiler": "6.1.6",
-    "@angular/core": "6.1.6",
-    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.1.6",
-    "@angular/http": "6.1.6",
-    "@angular/material": "6.4.6",
-    "@angular/material-moment-adapter": "6.4.6",
-    "@angular/platform-browser": "6.1.6",
-    "@angular/platform-browser-dynamic": "6.1.6",
-    "@angular/router": "6.1.6",
+    "@agm/core": "1.0.0-beta.5",
+    "@angular/animations": "7.0.0",
+    "@angular/cdk": "7.0.0",
+    "@angular/common": "7.0.0",
+    "@angular/compiler": "7.0.0",
+    "@angular/core": "7.0.0",
+    "@angular/flex-layout": "7.0.0-beta.19",
+    "@angular/forms": "7.0.0",
+    "@angular/http": "7.0.0",
+    "@angular/material": "7.0.0",
+    "@angular/material-moment-adapter": "7.0.0",
+    "@angular/platform-browser": "7.0.0",
+    "@angular/platform-browser-dynamic": "7.0.0",
+    "@angular/router": "7.0.0",
     "@ngrx/effects": "6.1.0",
     "@ngrx/router-store": "6.1.0",
     "@ngrx/store": "6.1.0",
@@ -40,50 +40,51 @@
     "@swimlane/dragula": "3.7.3",
     "@swimlane/ngx-charts": "9.0.0",
     "@swimlane/ngx-datatable": "13.1.0",
-    "@swimlane/ngx-dnd": "5.0.6",
+    "@swimlane/ngx-dnd": "5.1.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.25.2",
+    "angular-calendar": "0.26.3",
     "angular-in-memory-web-api": "0.6.1",
-    "chart.js": "2.7.2",
+    "chart.js": "2.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.7",
     "d3": "5.7.0",
+    "date-fns": "1.29.0",
     "hammerjs": "2.0.8",
-    "lodash": "4.17.10",
+    "lodash": "4.17.11",
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.6.0",
+    "ngx-color-picker": "6.7.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
-    "rxjs": "6.2.2",
-    "rxjs-compat": "6.2.2",
+    "rxjs": "6.3.3",
+    "rxjs-compat": "6.3.3",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.1.5",
-    "@angular/compiler-cli": "6.1.6",
-    "@angular/language-service": "6.1.6",
-    "@angular-devkit/build-angular": "0.7.5",
+    "@angular/cli": "7.0.1",
+    "@angular/compiler-cli": "7.0.0",
+    "@angular/language-service": "7.0.0",
+    "@angular-devkit/build-angular": "0.10.1",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.8",
-    "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.116",
+    "@types/jasmine": "2.8.9",
+    "@types/jasminewd2": "2.0.5",
+    "@types/lodash": "4.14.117",
     "@types/node": "8.9.5",
-    "codelyzer": "4.2.1",
+    "codelyzer": "4.5.0",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
+    "karma": "3.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.2",
+    "karma-coverage-istanbul-reporter": "2.0.4",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.4.0",
-    "ts-node": "5.0.1",
-    "tslint": "5.9.1",
-    "typescript": "2.7.2",
-    "webpack-bundle-analyzer": "2.13.1"
+    "protractor": "5.4.1",
+    "ts-node": "7.0.1",
+    "tslint": "5.11.0",
+    "typescript": "3.1.3",
+    "webpack-bundle-analyzer": "3.0.3"
   }
 }

src/@fuse/components/demo/demo-content/demo-content.component.html

@@ -37,7 +37,7 @@
         velit.
     </p>
 
-    <img class="mt-24 w-100-p" src="assets/images/etc/early-sunrise.jpg" style="max-width: 640px">
+    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
 
     <p class="mt-8 mb-24 secondary-text">
         <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>

src/@fuse/components/navigation/navigation.component.ts

@@ -1,14 +1,15 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
-    selector     : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    selector       : 'fuse-navigation',
+    templateUrl    : './navigation.component.html',
+    styleUrls      : ['./navigation.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -22,9 +23,12 @@ export class FuseNavigationComponent implements OnInit
     private _unsubscribeAll: Subject<any>;
 
     /**
-     * Constructor
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService
     )
     {
@@ -48,7 +52,24 @@ export class FuseNavigationComponent implements OnInit
         this._fuseNavigationService.onNavigationChanged
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
+
+                // Load the navigation
                 this.navigation = this._fuseNavigationService.getCurrentNavigation();
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
             });
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 }

src/@fuse/components/navigation/navigation.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import * as _ from 'lodash';
 
 import { FuseNavigationItem } from '@fuse/types';
 
@@ -15,6 +16,9 @@ export class FuseNavigationService
     private _onNavigationChanged: BehaviorSubject<any>;
     private _onNavigationRegistered: BehaviorSubject<any>;
     private _onNavigationUnregistered: BehaviorSubject<any>;
+    private _onNavigationItemAdded: BehaviorSubject<any>;
+    private _onNavigationItemUpdated: BehaviorSubject<any>;
+    private _onNavigationItemRemoved: BehaviorSubject<any>;
 
     private _currentNavigationKey: string;
     private _registry: { [key: string]: any } = {};
@@ -33,6 +37,9 @@ export class FuseNavigationService
         this._onNavigationChanged = new BehaviorSubject(null);
         this._onNavigationRegistered = new BehaviorSubject(null);
         this._onNavigationUnregistered = new BehaviorSubject(null);
+        this._onNavigationItemAdded = new BehaviorSubject(null);
+        this._onNavigationItemUpdated = new BehaviorSubject(null);
+        this._onNavigationItemRemoved = new BehaviorSubject(null);
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -69,6 +76,36 @@ export class FuseNavigationService
         return this._onNavigationUnregistered.asObservable();
     }
 
+    /**
+     * Get onNavigationItemAdded
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemAdded(): Observable<any>
+    {
+        return this._onNavigationItemAdded.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemUpdated
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemUpdated(): Observable<any>
+    {
+        return this._onNavigationItemUpdated.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemRemoved
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemRemoved(): Observable<any>
+    {
+        return this._onNavigationItemRemoved.asObservable();
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -319,6 +356,33 @@ export class FuseNavigationService
             // Add the item
             parent.children.push(item);
         }
+
+        // Trigger the observable
+        this._onNavigationItemAdded.next(true);
+    }
+
+    /**
+     * Update navigation item with the given id
+     *
+     * @param id
+     * @param properties
+     */
+    updateNavigationItem(id, properties): void
+    {
+        // Get the navigation item
+        const navigationItem = this.getNavigationItem(id);
+
+        // If there is no navigation with the give id, return
+        if ( !navigationItem )
+        {
+            return;
+        }
+
+        // Merge the navigation properties
+        _.merge(navigationItem, properties);
+
+        // Trigger the observable
+        this._onNavigationItemUpdated.next(true);
     }
 
     /**
@@ -346,5 +410,8 @@ export class FuseNavigationService
 
         // Remove the item
         parent.splice(parent.indexOf(item), 1);
+
+        // Trigger the observable
+        this._onNavigationItemRemoved.next(true);
     }
 }

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts

@@ -1,6 +1,6 @@
-import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
+import { merge, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
@@ -30,10 +30,12 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {ChangeDetectorRef} _changeDetectorRef
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {Router} _router
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
         private _router: Router
     )
@@ -111,6 +113,18 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         {
             this.collapse();
         }
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 
     /**
@@ -154,6 +168,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 
@@ -168,6 +186,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = false;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 

src/@fuse/components/navigation/vertical/group/group.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-group',
     templateUrl: './group.component.html',
     styleUrls  : ['./group.component.scss']
 })
-export class FuseNavVerticalGroupComponent
+export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-group nav-item';
@@ -15,11 +18,57 @@ export class FuseNavVerticalGroupComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 
 }

src/@fuse/components/navigation/vertical/item/item.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-item',
     templateUrl: './item.component.html',
     styleUrls  : ['./item.component.scss']
 })
-export class FuseNavVerticalItemComponent
+export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-item';
@@ -15,10 +18,56 @@ export class FuseNavVerticalItemComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/search-bar/search-bar.component.scss

@@ -9,7 +9,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }

src/@fuse/components/shortcuts/shortcuts.component.html

@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm>
+    <div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 

src/@fuse/components/shortcuts/shortcuts.component.scss

@@ -2,7 +2,7 @@
 
 :host {
 
-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {
 
         #fuse-shortcuts {
 

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -70,9 +70,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         // Get the navigation items and flatten them
         this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 
-        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
-
-        if ( cookieExists )
+        if ( this._cookieService.check('FUSE2.shortcuts') )
         {
             this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
         }
@@ -107,6 +105,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             ];
         }
 
+        // Subscribe to media changes
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {

src/@fuse/components/sidebar/sidebar.component.scss

@@ -16,7 +16,7 @@ fuse-sidebar {
     z-index: 1000;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         min-width: 0 !important;
         max-width: 80vw !important;
         width: 80vw !important;

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,5 +1,5 @@
 import {
-    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
@@ -174,7 +174,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
             // Set the style and class
-            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+            this._renderer.setStyle(sibling, styleRule, styleValue);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
         }
         // If unfolded...
@@ -320,6 +320,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                 // Get the active status
                 const isActive = this._observableMedia.isActive(this.lockedOpen);
+
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
                 {
@@ -434,7 +435,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
         // Set the style and class
-        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+        this._renderer.setStyle(sibling, styleRule, styleValue);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
     }
 

src/@fuse/components/theme-options/theme-options.component.scss

@@ -30,7 +30,7 @@ fuse-theme-options {
 
             .title {
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 padding-left: 4px;
             }
         }
@@ -56,12 +56,12 @@ fuse-theme-options {
                     margin: 0;
                     padding: 0 8px;
                     font-size: 16px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 h3 {
                     font-size: 14px;
-                    font-weight: 500;
+                    font-weight: 600;
                     margin: 24px 0 16px 0;
                     padding: 0;
 

src/@fuse/components/theme-options/theme-options.component.ts

@@ -118,7 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 // Reset the form values based on the
                 // selected layout style
                 this._resetFormValues(value);
-
             });
 
         // Subscribe to the form value changes

src/@fuse/components/widget/widget.component.scss

@@ -20,11 +20,13 @@ fuse-widget {
         width: 100%;
         opacity: 1;
         z-index: 10;
-        border-radius: 2px;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(0deg);
         backface-visibility: hidden;
+        border: 1px solid;
     }
+
     > .fuse-widget-back {
         display: block;
         position: absolute;
@@ -36,9 +38,11 @@ fuse-widget {
         visibility: hidden;
         opacity: 0;
         z-index: 10;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(180deg);
         backface-visibility: hidden;
+        border: 1px solid;
 
         [fuseWidgetToggle] {
             position: absolute;

src/@fuse/components/widget/widget.theme.scss

@@ -8,6 +8,7 @@
         > .fuse-widget-front,
         > .fuse-widget-back {
             background: map-get($background, card);
+            border-color: map-get($foreground, divider);
         }
     }
 }

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -15,7 +15,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
     isInitialized: boolean;
     isMobile: boolean;
-    ps: PerfectScrollbar;
+    ps: PerfectScrollbar | any;
 
     // Private
     private _enabled: boolean | '';
@@ -200,6 +200,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
             ...this.fusePerfectScrollbarOptions
         });
+
+        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
+        // high CPU usage on Angular Material inputs.
+        // Loop through all the event elements of this PerfectScrollbar instance
+        this.ps.event.eventElements.forEach((eventElement) => {
+
+            // If we hit to the element with a 'keydown' event...
+            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
+            {
+                // Unbind it
+                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
+            }
+        });
     }
 
     /**

src/@fuse/scss/core.scss

@@ -17,11 +17,10 @@
 @include mat-core();
 
 // Partials
-@import "partials/reset";
 @import "partials/normalize";
 @import "partials/scrollbars";
 @import "partials/helpers";
-@import "partials/global";
+@import "partials/general";
 @import "partials/icons";
 @import "partials/colors";
 @import "partials/material";
@@ -32,7 +31,6 @@
 @import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
-@import "partials/toolbar";
 @import "partials/print";
 
 // Plugins

src/@fuse/scss/fuse.scss

@@ -2,4 +2,4 @@
 @import '~@angular/material/theming';
 
 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";

src/@fuse/scss/mixins/_breakpoints.scss

@@ -1,126 +0,0 @@
-// Media step breakpoint mixin based on Angular Material lib
-$breakpoints: (
-    xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
-    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
-    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 959px)',
-    lt-lg: 'screen and (max-width: 1279px)',
-    lt-xl: 'screen and (max-width: 1919px)',
-    gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 960px)',
-    gt-md: 'screen and (min-width: 1280px)',
-    gt-lg: 'screen and (min-width: 1920px)'
-) !default;
-
-$grid-breakpoints: (
-    xs: 0,
-    sm: 600px,
-    md: 960px,
-    lg: 1280px,
-    xl: 1920px
-) !default;
-
-@mixin media-breakpoint($breakpointName) {
-
-    $mediaQuery: map-get($breakpoints, $breakpointName);
-
-    @if ($mediaQuery != null) {
-
-        @media #{$mediaQuery} {
-            @content
-        }
-    }
-}
-
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-    $n: index($breakpoint-names, $name);
-    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
-//
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-    $next: breakpoint-next($name, $breakpoints);
-    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-    $max: breakpoint-max($name, $breakpoints);
-    @if $max {
-        @media (max-width: $max) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-max($lower, $breakpoints);
-    $max: breakpoint-max($upper, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    $max: breakpoint-max($name, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -1,3 +1,31 @@
+// Fix: "Remove the cdk-global-scrollblock effects from the HTML"
+// Fuse already blocks the body scroll so it doesn't need this feature. We are disabling it
+// because on Windows, it causes a scrollbar to show up.
+html {
+
+    &.cdk-global-scrollblock {
+        position: relative !important;
+        overflow: hidden !important;
+    }
+}
+
+// Fix: "Inconsistent button heights due to inconsistent line heights"
+button {
+
+    .mat-button-wrapper {
+        line-height: normal;
+    }
+}
+
+.mat-icon {
+
+    // Fix: "Font-weight config affecting the icons"
+    font-weight: 400 !important;
+
+    // Fix: "Inconsistent positioning on custom font icons"
+    line-height: 1;
+}
+
 // Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
@@ -30,9 +58,9 @@
     background-color: rgba(0, 0, 0, 0.12);
 }
 
-// Fix: "Table-cell and inline-table in mat-select"
 .mat-form-field {
 
+    // Fix: "Table-cell and inline-table in mat-select"
     &.mat-form-field-type-mat-select {
 
         .mat-form-field-infix {

src/@fuse/scss/partials/_breakpoints.scss

@@ -0,0 +1,38 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 959px)',
+    lt-lg: 'screen and (max-width: 1279px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    xs: null,
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery == null) {
+        @content
+    } @else {
+        @media #{$mediaQuery} {
+            @content
+        }
+    }
+}

src/@fuse/scss/partials/_cards.scss

@@ -8,6 +8,7 @@
 
     .fuse-card {
         background: map-get($background, card);
+        border-color: map-get($foreground, divider);
 
         .card-divider {
             border-top: 1px solid map-get($foreground, divider);
@@ -21,8 +22,8 @@
 .fuse-card {
     max-width: 320px;
     min-width: 320px;
-    border-radius: 2px;
-    @include mat-elevation(2);
+    border-radius: 8px;
+    border: 1px solid;
 
     &.variable-width {
         min-width: 0;

src/@fuse/scss/partials/_general.scss

@@ -0,0 +1,70 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Body scroll lock
+// -----------------------------------------------------------------------------------------------------
+html,
+body {
+    display: flex;
+    flex: 1 0 auto;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Boxed body
+// -----------------------------------------------------------------------------------------------------
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  @ Text rendering & box sizing
+/*----------------------------------------------------------------*/
+* {
+    text-rendering: optimizeLegibility;
+    -o-text-rendering: optimizeLegibility;
+    -ms-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    -webkit-text-rendering: optimizeLegibility;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+
+    &:before, &:after {
+        box-sizing: border-box;
+    }
+
+    // Remove focus outline
+    &:focus {
+        outline: none;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Responsive images
+// -----------------------------------------------------------------------------------------------------
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: top;
+    border: none;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Input
+// -----------------------------------------------------------------------------------------------------
+input {
+    border: none;
+    padding: 0 16px;
+}

src/@fuse/scss/partials/_global.scss

@@ -1,23 +0,0 @@
-html,
-body {
-    display: flex;
-    flex: 1 0 auto;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
-
-body {
-
-    // Boxed
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-
-        @include mat-elevation(8);
-    }
-}

src/@fuse/scss/partials/_helpers.scss

@@ -1,11 +1,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Position helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .position#{$infix}-relative {
             position: relative;
@@ -24,11 +24,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Absolute position alignment helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .align#{$infix}-top {
             top: 0;
@@ -78,11 +78,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Spacing helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         @each $prop, $abbrev in (margin: m, padding: p) {
 

src/@fuse/scss/partials/_icons.scss

@@ -7,11 +7,11 @@ mat-icon {
     min-height: 24px;
     line-height: 24px;
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-        @include media-breakpoint-up($breakpoint) {
+        @include media-breakpoint($materialBreakpoint) {
 
-            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
             @for $size from 2 through 128 {
 

src/@fuse/scss/partials/_material.scss

@@ -172,7 +172,7 @@
     margin: 0 8px 0 0;
     border-radius: 50%;
     font-size: 17px;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
 
     &.square {
@@ -230,13 +230,12 @@ mat-icon.status {
         color: #F44336;
 
         &:before {
-            content: "do_not_disturb_on";
+            content: "remove_circle_outline";
         }
     }
 
     &.away {
-        background-color: #FFC107;
-        color: #FFFFFF;
+        color: #FFC107;
 
         &:before {
             content: "access_time";
@@ -245,7 +244,6 @@ mat-icon.status {
 
     &.offline {
         color: #646464;
-        background-color: #FFFFFF;
 
         &:before {
             content: "not_interested";
@@ -287,14 +285,14 @@ mat-icon.status {
 
         .title {
             font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
             line-height: 1;
         }
     }
 
     .subheader {
         font-size: 13px;
-        font-weight: 500;
+        font-weight: 600;
         margin-top: 8px;
     }
 
@@ -310,8 +308,9 @@ mat-icon.status {
     position: relative;
     display: inline-flex;
     flex-direction: row;
-    @include mat-elevation(1);
     padding: 0 8px;
+    border-radius: 4px;
+    @include mat-elevation(1);
 
     .pagination-item {
         display: flex;
@@ -364,7 +363,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -406,14 +405,14 @@ mat-icon.status {
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 padding: 6px 8px;
             }
 
             .package-type {
                 padding: 48px 32px 24px 32px;
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -423,7 +422,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -436,7 +435,7 @@ mat-icon.status {
             .period {
                 padding: 0 32px;
                 font-size: 15px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -471,7 +470,7 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
             }
 
@@ -481,7 +480,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 15px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -546,7 +545,7 @@ table {
 
                 th {
                     padding: 16px 8px;
-                    font-weight: 500;
+                    font-weight: 600;
                     white-space: nowrap;
 
                     &:first-child {

src/@fuse/scss/partials/_navigation.scss

@@ -4,7 +4,7 @@
         display: flex;
         align-items: center;
         height: 48px;
-        font-weight: 500;
+        font-weight: 600;
         padding-left: 24px;
         margin-top: 8px;
         font-size: 12px;
@@ -19,7 +19,7 @@
             display: flex;
             align-items: center;
             height: 48px;
-            font-weight: 500;
+            font-weight: 600;
             padding-left: 24px;
             margin-top: 8px;
             font-size: 12px;
@@ -53,7 +53,7 @@
                 height: 20px;
                 padding: 0 7px;
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 border-radius: 20px;
                 transition: opacity 0.2s ease-in-out 0.1s;
                 margin-left: 8px;
@@ -85,7 +85,6 @@
 
             .nav-link-icon {
                 margin-right: 16px;
-                opacity: 0.7;
             }
 
             .nav-link-icon,
@@ -220,24 +219,27 @@
         }
     }
 
-    // Material style
-    &.material {
+    // Material 2 style
+    &.material2,
+    .material2 & {
 
         .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-            &:first-child {
-                border-top: none;
-            }
+            height: 40px;
         }
 
+        .nav-group {
+
+            > .group-title {
+                height: 40px;
+            }
+        }
         .nav-item {
 
             .nav-link {
                 height: 40px;
-                padding: 0 16px;
-                margin: 4px 8px;
-                border-radius: 4px;
+                padding: 0 12px 0 24px;
+                border-radius: 0 20px 20px 0;
+                margin-right: 16px;
             }
         }
     }

src/@fuse/scss/partials/_page-layouts.scss

@@ -18,6 +18,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -34,6 +35,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -79,15 +81,11 @@
 // @ Page Layouts
 // -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
-$carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
-
 $header-height: 120px !default;
-$header-height-sm: 100px !default;
 
-// Calculate toolbarless header height
+// Calculate toolbar-less carded header height
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
-$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
 .page-layout {
     position: relative;
@@ -109,10 +107,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             right: 0;
             left: 0;
             height: $carded-header-height;
-
-            @include media-breakpoint-down('sm') {
-                height: $carded-header-height-sm;
-            }
         }
 
         // Fullwidth
@@ -136,12 +130,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar !important;
                     min-height: $carded-header-height-without-toolbar !important;
                     max-height: $carded-header-height-without-toolbar !important;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm !important;
-                        min-height: $carded-header-height-without-toolbar-sm !important;
-                        max-height: $carded-header-height-without-toolbar-sm !important;
-                    }
                 }
 
                 > .content-card {
@@ -149,7 +137,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 0 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -303,12 +291,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height;
                     min-height: $carded-header-height;
                     max-height: $carded-header-height;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-sm;
-                        min-height: $carded-header-height-sm;
-                        max-height: $carded-header-height-sm;
-                    }
                 }
 
                 .content {
@@ -334,12 +316,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar;
                     min-height: $carded-header-height-without-toolbar;
                     max-height: $carded-header-height-without-toolbar;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm;
-                        min-height: $carded-header-height-without-toolbar-sm;
-                        max-height: $carded-header-height-without-toolbar-sm;
-                    }
                 }
 
                 > .content-card {
@@ -347,7 +323,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 1 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -379,7 +355,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     width: calc(100% - 32px);
                     min-width: 0;
 
-                    @include media-breakpoint-down('md') {
+                    @include media-breakpoint('lt-lg') {
                         width: calc(100% - 64px);
                     }
 
@@ -566,7 +542,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 z-index: 3;
                 min-width: 0;
                 width: 100%;
-                @include mat-elevation(7);
+                @include mat-elevation(1);
 
                 > .header {
                     height: $header-height;
@@ -625,6 +601,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
                         overflow: auto;
                         -webkit-overflow-scrolling: touch;
+
+                        > .content {
+                            border-radius: 8px;
+                            @include mat-elevation(1);
+                        }
                     }
                 }
             }
@@ -685,7 +666,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         min-height: 100%;
     }
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
 
         // Smaller margins
         &.carded {

src/@fuse/scss/partials/_print.scss

@@ -9,7 +9,6 @@
     .page-break-before {
         display: none;
     }
-
 }
 
 @media print {
@@ -47,6 +46,13 @@
             display: none !important;
         }
 
+        #main,
+        #container-1,
+        #container-2,
+        #container-3 {
+            padding: 0 !important;
+        }
+
         .ps {
             overflow: visible !important;
         }

src/@fuse/scss/partials/_reset.scss

@@ -1,76 +0,0 @@
-/*----------------------------------------------------------------*/
-/*  Reset
-/*----------------------------------------------------------------*/
-* {
-    text-rendering: optimizeLegibility;
-    -o-text-rendering: optimizeLegibility;
-    -ms-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    -webkit-text-rendering: optimizeLegibility;
-    -webkit-tap-highlight-color: transparent;
-    box-sizing: border-box;
-
-    &:before, &:after {
-        box-sizing: border-box;
-    }
-
-    // Remove focus outline
-    &:focus {
-        outline: none;
-    }
-}
-
-// Reset non angular-material input's default browser/os styles
-*:not(mat-form-field) {
-
-    > input {
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-
-    > input[type="text"],
-    > input[type="tel"],
-    > input[type="email"],
-    > input[type="search"],
-    > input[type="password"],
-    > input[type="button"],
-    > button,
-    > input[type="submit"],
-    > input[type="image"],
-    > textarea {
-        appearance: none;
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-*:not(mat-form-field) {
-
-    > input[type="button"],
-    > button,
-    > input[type="submit"] {
-        background: none;
-    }
-}
-
-button {
-    border-radius: 0;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0;
-    margin: 0;
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: top;
-    border: none;
-}

src/@fuse/scss/partials/_scrollbars.scss

@@ -12,12 +12,12 @@ body:not(.is-mobile) {
 
     ::-webkit-scrollbar-thumb {
         border: 2px solid transparent;
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px;
     }
 
     ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        border-radius: 12px;
     }
 }

src/@fuse/scss/partials/_toolbar.scss

@@ -1,9 +0,0 @@
-.toolbar {
-
-    .toolbar-separator {
-        height: 48px;
-        width: 1px;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-        margin: 0 12px;
-    }
-}

src/@fuse/scss/partials/_typography.scss

@@ -41,7 +41,7 @@
 // -----------------------------------------------------------------------------------------------------
 html {
     font-size: 62.5%;
-    font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
     line-height: 1.4 !important;
     letter-spacing: -0.1px !important;
 }
@@ -89,7 +89,7 @@ h6, .h6 {
 a {
     text-decoration: none;
 
-    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
 
         &:hover, &:active {
             text-decoration: underline;
@@ -304,7 +304,7 @@ strong {
     padding: 4px 8px;
     margin: 0 8px;
     font-size: 11px;
-    font-weight: 500;
+    font-weight: 600;
     white-space: nowrap;
 }
 
@@ -399,6 +399,10 @@ strong {
                 li {
                     margin-bottom: 6px;
                     letter-spacing: 0.015em;
+
+                    ul {
+                        margin-top: 6px;
+                    }
                 }
             }
         }
@@ -433,4 +437,4 @@ strong {
         border-left-color: #03A9F4;
         color: rgba(0, 0, 0, 0.87);
     }
-}
+}

src/app/app.component.scss

@@ -23,6 +23,17 @@
         opacity: .90;
         z-index: 998;
 
+        &.right-side-panel {
+
+            @include media-breakpoint('gt-md') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
+        }
+
         mat-icon {
             animation: rotating 3s linear infinite;
         }
@@ -37,4 +48,4 @@
         min-width: 360px;
         max-width: 360px;
     }
-}
+}

src/app/app.component.ts

@@ -73,9 +73,12 @@ export class AppComponent implements OnInit, OnDestroy
         this._translateService.use('en');
 
         /**
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          * ngxTranslate Fix Start
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
+         */
+
+        /**
          * If you are using a language other than the default one, i.e. Turkish in this case,
          * you may encounter an issue where some of the components are not actually being
          * translated when your app first initialized.
@@ -97,9 +100,9 @@ export class AppComponent implements OnInit, OnDestroy
          */
 
         /**
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          * ngxTranslate Fix End
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          */
 
         // Add is-mobile class to the body if the platform is mobile

src/app/app.theme.scss

@@ -63,7 +63,11 @@ $custom_palettes: (
 
 // Force the input field font sizes to 16px
 $typography: mat-typography-config(
-    $input: mat-typography-level(16px, 1.125, 400)
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 );
 
 // Setup the typography
@@ -223,4 +227,4 @@ body.theme-pink-dark {
     );
 
     @include fuse-color-classes($palettes);
-}
+}

src/app/layout/components/content/content.module.ts

@@ -11,9 +11,9 @@ import { ContentComponent } from 'app/layout/components/content/content.componen
     ],
     imports     : [
         RouterModule,
-        FuseSharedModule,
+        FuseSharedModule
     ],
-    exports: [
+    exports     : [
         ContentComponent
     ]
 })

src/app/layout/components/footer/footer.component.html

@@ -6,7 +6,7 @@
            target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular 6+)</span>
+            <span>Purchase FUSE (Angular 7+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
@@ -15,7 +15,6 @@
             <a mat-button routerLink="/documentation/changelog">Changelog</a>
         </div>
 
-
     </div>
 
 </mat-toolbar>

src/app/layout/components/navbar/vertical/style-1/style-1.component.html

@@ -36,7 +36,7 @@
     </div>
 
     <div class="navbar-content">
-        <fuse-navigation layout="vertical"></fuse-navigation>
+        <fuse-navigation class="material2" layout="vertical"></fuse-navigation>
     </div>
 
 </div>

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -61,6 +61,19 @@ fuse-sidebar {
 
                         .navbar-content {
                             padding-top: 0;
+
+                            // Material 2 specific style
+                            .material2 {
+
+                                .nav-item {
+
+                                    .nav-link {
+                                        border-radius: 20px;
+                                        margin: 0 12px;
+                                        padding: 0 12px;
+                                    }
+                                }
+                            }
                         }
                     }
                 }

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -22,6 +22,22 @@ fuse-sidebar {
                             }
                         }
                     }
+
+                    .navbar-content {
+
+                        // Material 2 specific style
+                        .material2 {
+
+                            .nav-item {
+
+                                .nav-link {
+                                    border-radius: 20px;
+                                    margin: 0 12px;
+                                    padding: 0 12px;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }

src/app/layout/components/toolbar/toolbar.component.html

@@ -63,7 +63,7 @@
                     class="language-button"
                     [matMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">
-                    <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
+                    <img class="flag mr-8" [src]="'assets/icons/flags/'+selectedLanguage.flag+'.png'">
                     <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
                 </div>
             </button>
@@ -72,7 +72,7 @@
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <span fxLayout="row" fxLayoutAlign="start center">
-                        <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
+                        <img class="flag mr-16" [src]="'assets/icons/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </span>
                 </button>

src/app/layout/components/toolbar/toolbar.component.scss

@@ -33,7 +33,7 @@ toolbar {
         min-width: 64px;
         height: 64px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }
@@ -47,7 +47,7 @@ toolbar {
         height: 64px;
         width: 1px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }

src/app/layout/components/toolbar/toolbar.theme.scss

@@ -2,7 +2,10 @@
 
     $foreground: map-get($theme, foreground);
 
-    .toolbar-separator {
-        background: map-get($foreground, divider);
+    toolbar {
+
+        .toolbar-separator {
+            background: map-get($foreground, divider);
+        }
     }
 }