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
2025-01-10 04:25:08 +00:00 · 2018-06-14 12:25:03 +03:00 · 2018-06-14 12:25:03 +03:00 · 91e8d88488
commit 91e8d88488
parent ddcf1d5483
40 changed files with 268 additions and 82 deletions
--- a/src/@fuse/components/highlight/prism-languages.ts
+++ b/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';
--- a/src/@fuse/scss/partials/_typography.scss
+++ b/src/@fuse/scss/partials/_typography.scss
@ -360,3 +360,33 @@ 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);
+    }
+}
--- a/src/app/main/angular-material-elements/angular-material-elements.component.html
+++ b/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>
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/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>
--- a/src/app/main/documentation/components-third-party/components-third-party.module.ts
+++ b/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),
--- a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html
+++ b/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>
--- a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts
+++ b/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;
--- a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html
+++ b/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>
--- a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts
+++ b/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;
--- a/src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts
+++ b/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),
--- a/src/app/main/documentation/components/cards/cards.component.html
+++ b/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>
--- a/src/app/main/documentation/components/cards/cards.component.ts
+++ b/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;
--- a/src/app/main/documentation/components/components.module.ts
+++ b/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 { CardsDocsComponent } from 'app/main/documentation/components/cards/cards.component';
-import { CountdownDocsComponent } from 'app/main/documentation/components/countdown/countdown.component';
-import { HighlightDocsComponent } from 'app/main/documentation/components/highlight/highlight.component';
-import { MaterialColorPickerDocsComponent } 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 { NavigationDocsComponent } from 'app/main/documentation/components/navigation/navigation.component';
-import { SearchBarDocsComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
-import { SidebarDocsComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
-import { ShortcutsDocsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
-import { WidgetDocsComponent } from 'app/main/documentation/components/widget/widget.component';
+import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components';
+import { DocsComponentsCardsComponent } from 'app/main/documentation/components/cards/cards.component';
+import { DocsComponentsCountdownComponent } from 'app/main/documentation/components/countdown/countdown.component';
+import { DocsComponentsHighlightComponent } from 'app/main/documentation/components/highlight/highlight.component';
+import { DocsComponentsMaterialColorPickerComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
+import { DocsComponentsNavigationComponent } from 'app/main/documentation/components/navigation/navigation.component';
+import { DocsComponentsSearchBarComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
+import { DocsComponentsSidebarComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
+import { DocsComponentsShortcutsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
+import { DocsComponentsWidgetComponent } 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
-    },
-    {
-        path     : 'multi-language',
-        component: MultiLanguageDocsComponent
+        component: DocsComponentsMaterialColorPickerComponent
    },
    {
        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,
-        CountdownDocsComponent,
-        HighlightDocsComponent,
-        MaterialColorPickerDocsComponent,
-        MultiLanguageDocsComponent,
-        NavigationDocsComponent,
-        SearchBarDocsComponent,
-        SidebarDocsComponent,
-        ShortcutsDocsComponent,
-        WidgetDocsComponent
+        DocsComponentsCardsComponent,
+        DocsComponentsCountdownComponent,
+        DocsComponentsHighlightComponent,
+        DocsComponentsMaterialColorPickerComponent,
+        DocsComponentsNavigationComponent,
+        DocsComponentsSearchBarComponent,
+        DocsComponentsSidebarComponent,
+        DocsComponentsShortcutsComponent,
+        DocsComponentsWidgetComponent
    ],
    imports     : [
        RouterModule.forChild(routes),
--- a/src/app/main/documentation/components/countdown/countdown.component.html
+++ b/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>
--- a/src/app/main/documentation/components/countdown/countdown.component.ts
+++ b/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
--- a/src/app/main/documentation/components/highlight/highlight.component.html
+++ b/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>
--- a/src/app/main/documentation/components/highlight/highlight.component.ts
+++ b/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
--- a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html
+++ b/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>
--- a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts
+++ b/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
--- a/src/app/main/documentation/components/navigation/navigation.component.html
+++ b/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>
--- a/src/app/main/documentation/components/navigation/navigation.component.ts
+++ b/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;
--- a/src/app/main/documentation/components/search-bar/search-bar.component.html
+++ b/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>
--- a/src/app/main/documentation/components/search-bar/search-bar.component.ts
+++ b/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
--- a/src/app/main/documentation/components/shortcuts/shortcuts.component.html
+++ b/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>
--- a/src/app/main/documentation/components/shortcuts/shortcuts.component.ts
+++ b/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
--- a/src/app/main/documentation/components/sidebar/sidebar.component.html
+++ b/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>
--- a/src/app/main/documentation/components/sidebar/sidebar.component.ts
+++ b/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
--- a/src/app/main/documentation/components/widget/widget.component.html
+++ b/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>
--- a/src/app/main/documentation/components/widget/widget.component.ts
+++ b/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
--- a/src/app/main/documentation/services/config/config.component.html
+++ b/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>
--- a/src/app/main/documentation/services/splash-screen/splash-screen.component.html
+++ b/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>
--- a/src/app/main/ui/colors/colors.component.html
+++ b/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>
--- a/src/app/main/ui/forms/forms.component.html
+++ b/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>
--- a/src/app/main/ui/helper-classes/helper-classes.component.html
+++ b/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>
--- a/src/app/main/ui/icons/icons.component.html
+++ b/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>
--- a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html
+++ b/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>
--- a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts
+++ b/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()
+    {
+
+    }
+}
--- a/src/app/main/ui/typography/typography.component.html
+++ b/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>
--- a/src/app/main/ui/typography/typography.module.ts
+++ b/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     : [