Import the "bash" language color from prism

Added "message-boxes" styles to the typography
Increased the home icon size in doc pages
Changed doc component class names

src/@fuse/components/highlight/prism-languages.ts

@@ -1,4 +1,5 @@
 import 'prismjs/prism';
+import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-c';
 import 'prismjs/components/prism-cpp';
 import 'prismjs/components/prism-csharp';

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

@@ -359,4 +359,34 @@ strong {
             }
         }
     }
+}
+
+// Message boxes
+.message-box {
+    padding: 16px;
+    background: #607D8B;
+    border-left: 6px solid #37474F;
+    color: rgba(255, 255, 255, 1);
+
+    &.alert {
+        background: #EF5350;
+        border-left-color: #B71C1C;
+    }
+
+    &.warning {
+        background: #FFECB3;
+        border-left-color: #FFC107;
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+    &.success {
+        background: #4CAF50;
+        border-left-color: #2E7D32;
+    }
+
+    &.info {
+        background: #B3E5FC;
+        border-left-color: #03A9F4;
+        color: rgba(0, 0, 0, 0.87);
+    }
 }

src/app/main/angular-material-elements/angular-material-elements.component.html

@@ -6,7 +6,7 @@
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>

src/app/main/documentation/changelog/changelog.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
 
         <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-            <mat-icon class="secondary-text s-16">home</mat-icon>
+            <mat-icon class="secondary-text s-18">home</mat-icon>
             <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
             <span class="secondary-text">Documentation</span>
         </div>

src/app/main/documentation/components-third-party/components-third-party.module.ts

@@ -6,18 +6,18 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { GoogleMapsModule } from 'app/main/documentation/components-third-party/google-maps/google-maps.module';
-import { NgxDatatableDocsComponent } from 'app/main/documentation/components-third-party/datatable/ngx-datatable.component';
+import { DocsComponentsThirdPartyNgxDatatableComponent } from 'app/main/documentation/components-third-party/datatable/ngx-datatable.component';
 
 const routes = [
     {
         path     : 'datatables/ngx-datatable',
-        component: NgxDatatableDocsComponent
+        component: DocsComponentsThirdPartyNgxDatatableComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        NgxDatatableDocsComponent
+        DocsComponentsThirdPartyNgxDatatableComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html

@@ -5,7 +5,7 @@
          fxLayoutAlign.gt-xs="space-between center">
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Tables</span>
             </div>

src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts

@@ -4,11 +4,11 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector   : 'ngx-datatable-docs',
+    selector   : 'docs-components-third-party-ngx-datatable',
     templateUrl: './ngx-datatable.component.html',
     styleUrls  : ['./ngx-datatable.component.scss']
 })
-export class NgxDatatableDocsComponent implements OnInit, OnDestroy
+export class DocsComponentsThirdPartyNgxDatatableComponent implements OnInit, OnDestroy
 {
     rows: any[];
     loadingIndicator: boolean;

src/app/main/documentation/components-third-party/google-maps/google-maps.component.html

@@ -5,7 +5,7 @@
          fxLayoutAlign.gt-xs="space-between center">
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Google Maps</span>
             </div>

src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'google-maps-docs',
+    selector   : 'docs-components-third-party-google-maps',
     templateUrl: './google-maps.component.html',
     styleUrls  : ['./google-maps.component.scss']
 })
-export class GoogleMapsDocsComponent
+export class DocsComponentsThirdPartyGoogleMapsComponent
 {
     lat: number;
     lng: number;

src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts

@@ -8,18 +8,18 @@ import { AgmCoreModule } from '@agm/core';
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components/index';
 
-import { GoogleMapsDocsComponent } from './google-maps.component';
+import { DocsComponentsThirdPartyGoogleMapsComponent } from './google-maps.component';
 
 const routes = [
     {
         path     : 'google-maps',
-        component: GoogleMapsDocsComponent
+        component: DocsComponentsThirdPartyGoogleMapsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        GoogleMapsDocsComponent
+        DocsComponentsThirdPartyGoogleMapsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/documentation/components/cards/cards.component.html

@@ -5,7 +5,7 @@
 
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/cards/cards.component.ts

@@ -4,12 +4,12 @@ import * as shape from 'd3-shape';
 import { fuseAnimations } from '@fuse/animations/index';
 
 @Component({
-    selector   : 'cards-docs',
+    selector   : 'docs-components-cards',
     templateUrl: './cards.component.html',
     styleUrls  : ['./cards.component.scss'],
     animations : fuseAnimations
 })
-export class CardsDocsComponent
+export class DocsComponentsCardsComponent
 {
     view: string;
     card9Expanded: boolean;

src/app/main/documentation/components/components.module.ts

@@ -5,73 +5,67 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components/index';
+import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components';
-import { CardsDocsComponent } from 'app/main/documentation/components/cards/cards.component';
+import { DocsComponentsCardsComponent } from 'app/main/documentation/components/cards/cards.component';
-import { CountdownDocsComponent } from 'app/main/documentation/components/countdown/countdown.component';
+import { DocsComponentsCountdownComponent } from 'app/main/documentation/components/countdown/countdown.component';
-import { HighlightDocsComponent } from 'app/main/documentation/components/highlight/highlight.component';
+import { DocsComponentsHighlightComponent } from 'app/main/documentation/components/highlight/highlight.component';
-import { MaterialColorPickerDocsComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
+import { DocsComponentsMaterialColorPickerComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
-import { MultiLanguageDocsComponent } from 'app/main/documentation/components/multi-language/multi-language.component';
+import { DocsComponentsNavigationComponent } from 'app/main/documentation/components/navigation/navigation.component';
-import { NavigationDocsComponent } from 'app/main/documentation/components/navigation/navigation.component';
+import { DocsComponentsSearchBarComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
-import { SearchBarDocsComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
+import { DocsComponentsSidebarComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
-import { SidebarDocsComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
+import { DocsComponentsShortcutsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
-import { ShortcutsDocsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
+import { DocsComponentsWidgetComponent } from 'app/main/documentation/components/widget/widget.component';
-import { WidgetDocsComponent } from 'app/main/documentation/components/widget/widget.component';
 
 const routes = [
     {
         path     : 'cards',
-        component: CardsDocsComponent
+        component: DocsComponentsCardsComponent
     },
     {
         path     : 'countdown',
-        component: CountdownDocsComponent
+        component: DocsComponentsCountdownComponent
     },
     {
         path     : 'highlight',
-        component: HighlightDocsComponent
+        component: DocsComponentsHighlightComponent
     },
     {
         path     : 'material-color-picker',
-        component: MaterialColorPickerDocsComponent
+        component: DocsComponentsMaterialColorPickerComponent
-    },
-    {
-        path     : 'multi-language',
-        component: MultiLanguageDocsComponent
     },
     {
         path     : 'navigation',
-        component: NavigationDocsComponent
+        component: DocsComponentsNavigationComponent
     },
     {
         path     : 'search-bar',
-        component: SearchBarDocsComponent
+        component: DocsComponentsSearchBarComponent
     },
     {
         path     : 'sidebar',
-        component: SidebarDocsComponent
+        component: DocsComponentsSidebarComponent
     },
     {
         path     : 'shortcuts',
-        component: ShortcutsDocsComponent
+        component: DocsComponentsShortcutsComponent
     },
     {
         path     : 'widget',
-        component: WidgetDocsComponent
+        component: DocsComponentsWidgetComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        CardsDocsComponent,
+        DocsComponentsCardsComponent,
-        CountdownDocsComponent,
+        DocsComponentsCountdownComponent,
-        HighlightDocsComponent,
+        DocsComponentsHighlightComponent,
-        MaterialColorPickerDocsComponent,
+        DocsComponentsMaterialColorPickerComponent,
-        MultiLanguageDocsComponent,
+        DocsComponentsNavigationComponent,
-        NavigationDocsComponent,
+        DocsComponentsSearchBarComponent,
-        SearchBarDocsComponent,
+        DocsComponentsSidebarComponent,
-        SidebarDocsComponent,
+        DocsComponentsShortcutsComponent,
-        ShortcutsDocsComponent,
+        DocsComponentsWidgetComponent
-        WidgetDocsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),

src/app/main/documentation/components/countdown/countdown.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/countdown/countdown.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'countdown-docs',
+    selector   : 'docs-components-countdown',
     templateUrl: './countdown.component.html',
     styleUrls  : ['./countdown.component.scss']
 })
-export class CountdownDocsComponent
+export class DocsComponentsCountdownComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/highlight/highlight.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/highlight/highlight.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'highlight-docs',
+    selector   : 'docs-components-highlight',
     templateUrl: './highlight.component.html',
     styleUrls  : ['./highlight.component.scss']
 })
-export class HighlightDocsComponent
+export class DocsComponentsHighlightComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/material-color-picker/material-color-picker.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'material-color-picker-docs',
+    selector   : 'docs-components-material-color-picker',
     templateUrl: './material-color-picker.component.html',
     styleUrls  : ['./material-color-picker.component.scss']
 })
-export class MaterialColorPickerDocsComponent
+export class DocsComponentsMaterialColorPickerComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/navigation/navigation.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/navigation/navigation.component.ts

@@ -3,11 +3,11 @@ import { Component } from '@angular/core';
 import { navigation } from 'app/navigation/navigation';
 
 @Component({
-    selector   : 'navigation-docs',
+    selector   : 'docs-components-navigation',
     templateUrl: './navigation.component.html',
     styleUrls  : ['./navigation.component.scss']
 })
-export class NavigationDocsComponent
+export class DocsComponentsNavigationComponent
 {
     navigation: any;
     hidden: boolean;

src/app/main/documentation/components/search-bar/search-bar.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/search-bar/search-bar.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'search-bar-docs',
+    selector   : 'docs-components-search-bar',
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class SearchBarDocsComponent
+export class DocsComponentsSearchBarComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/shortcuts/shortcuts.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/shortcuts/shortcuts.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'shortcuts-docs',
+    selector   : 'docs-components-shortcuts',
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class ShortcutsDocsComponent
+export class DocsComponentsShortcutsComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/sidebar/sidebar.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/sidebar/sidebar.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'sidebar-docs',
+    selector   : 'docs-components-sidebar',
     templateUrl: './sidebar.component.html',
     styleUrls  : ['./sidebar.component.scss']
 })
-export class SidebarDocsComponent
+export class DocsComponentsSidebarComponent
 {
     /**
      * Constructor

src/app/main/documentation/components/widget/widget.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>

src/app/main/documentation/components/widget/widget.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'widget-docs',
+    selector   : 'docs-components-widget',
     templateUrl: './widget.component.html',
     styleUrls  : ['./widget.component.scss']
 })
-export class WidgetDocsComponent
+export class DocsComponentsWidgetComponent
 {
     /**
      * Constructor

src/app/main/documentation/services/config/config.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Services</span>
             </div>

src/app/main/documentation/services/splash-screen/splash-screen.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Services</span>
             </div>

src/app/main/ui/colors/colors.component.html

@@ -6,7 +6,7 @@
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">User Interface</span>
             </div>

src/app/main/ui/forms/forms.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">User Interface</span>
             </div>

src/app/main/ui/helper-classes/helper-classes.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">User Interface</span>
             </div>

src/app/main/ui/icons/icons.component.html

@@ -6,7 +6,7 @@
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">User Interface</span>
             </div>

src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html

@@ -0,0 +1,105 @@
+<div id="typography-message-boxes" class="p-24">
+
+    <div class="mat-title">Message Boxes</div>
+
+    <div class="mat-white-bg mat-elevation-z2 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="message-box">
+                    This is a standard message box
+                </div>
+            </div>
+
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                            fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="message-box">
+                        This is a standard message box
+                    </div>
+                </textarea>
+            </fuse-highlight>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="message-box alert">
+                    This is an alert message box!
+                </div>
+            </div>
+
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                            fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="message-box alert">
+                        This is an alert message box!
+                    </div>
+                </textarea>
+            </fuse-highlight>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="message-box warning">
+                    This is a warning message box
+                </div>
+            </div>
+
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                            fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="message-box warning">
+                        This is a warning message box!
+                    </div>
+                </textarea>
+            </fuse-highlight>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="message-box success">
+                    This is a success message box
+                </div>
+            </div>
+
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                            fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="message-box success">
+                        This is a success message box!
+                    </div>
+                </textarea>
+            </fuse-highlight>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="message-box info">
+                    This is a info message box
+                </div>
+            </div>
+
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                            fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="message-box info">
+                        This is a info message box!
+                    </div>
+                </textarea>
+            </fuse-highlight>
+
+        </div>
+
+
+    </div>
+
+</div>

src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #typography-message-boxes {
+
+        .source-code {
+            position: relative;
+            margin-bottom: 24px;
+            min-height: 180px;
+            max-height: 500px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'typography-message-boxes',
+    templateUrl: './message-boxes.component.html',
+    styleUrls  : ['./message-boxes.component.scss']
+})
+export class TypographyMessageBoxesComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

src/app/main/ui/typography/typography.component.html

@@ -4,7 +4,7 @@
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-16">home</mat-icon>
+                <mat-icon class="secondary-text s-18">home</mat-icon>
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">User Interface</span>
             </div>
@@ -36,6 +36,12 @@
 
             </mat-tab>
 
+            <mat-tab label="Message Boxes">
+
+                <typography-message-boxes></typography-message-boxes>
+
+            </mat-tab>
+
             <mat-tab label="Helpers">
 
                 <typography-helpers></typography-helpers>

src/app/main/ui/typography/typography.module.ts

@@ -9,6 +9,7 @@ import { TypographyComponent } from 'app/main/ui/typography/typography.component
 import { TypographyHeadingsComponent } from 'app/main/ui/typography/tabs/headings/headings.component';
 import { TypographyInlineTextElementsComponent } from 'app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component';
 import { TypographyBlockquotesListsComponent } from 'app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component';
+import { TypographyMessageBoxesComponent } from 'app/main/ui/typography/tabs/message-boxes/message-boxes.component';
 import { TypographyHelpersComponent } from 'app/main/ui/typography/tabs/helpers/helpers.component';
 
 const routes: Routes = [
@@ -24,6 +25,7 @@ const routes: Routes = [
         TypographyHeadingsComponent,
         TypographyInlineTextElementsComponent,
         TypographyBlockquotesListsComponent,
+        TypographyMessageBoxesComponent,
         TypographyHelpersComponent
     ],
     imports     : [