Added new cards

src/app/core/scss/partials/_angular-material-fix.scss

@@ -20,8 +20,8 @@
 }
 
 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
+    width: 14px !important;
-    height: 7px;
+    height: 7px !important;
 }
 
 // Fix: "Input underlines has wrong color opacity value"

src/app/core/scss/partials/_cards.scss

@@ -9,145 +9,47 @@
         min-width: 0;
     }
 
-    .card-rich-media {
+    // Buttons
-        position: relative;
-
-        .card-title {
-            position: absolute;
-            right: 16px;
-            bottom: 16px;
-            left: 16px;
-            font-size: 20px;
-            color: white;
-        }
-    }
-
-    .card-media-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        &.medium {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 120px;
-                height: 120px;
-            }
-        }
-
-        &.large {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 160px;
-                height: 160px;
-            }
-        }
-
-        .card-primary-title {
-            padding: 0 16px 0 0;
-            flex: 1;
-        }
-
-        .card-rich-media {
-            width: 80px;
-            height: 80px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-avatar-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        .card-avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            margin-right: 16px;
-        }
-
-        .card-avatar-title {
-
-            .card-title {
-                font-size: 14px;
-                font-weight: bold;
-            }
-
-            .card-subtitle {
-                font-size: 13px;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .card-primary-title {
-        padding: 16px;
-
-        .card-title {
-            font-size: 24px;
-        }
-
-        .card-subtitle {
-            font-size: 14px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-supporting-text {
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.75;
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-actions {
-        display: flex;
-        padding: 8px;
-
-        &.icon-buttons {
-            padding: 0 8px;
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-
-        &.align-right {
-            justify-content: flex-end;
-        }
-
     .mat-button {
         min-width: 0 !important;
         padding: 0 8px !important;
     }
 
-        .card-expander {
+    // Button Toggle Group
-            margin-left: auto;
+    .mat-button-toggle-group,
+    .mat-button-toggle-standalone {
+        box-shadow: none !important;
     }
 
-        + div {
+    // Tabs
-            padding-top: 0;
+    .mat-tab-labels {
+        justify-content: center;
+    }
+
+    .mat-tab-label {
+        min-width: 0 !important;
+    }
+
+    // Divider
+    .card-divider {
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+        margin: 16px;
+
+        &.light {
+            border-top-color: rgba(255, 255, 255, 0.12);
+        }
+
+        &.full-width {
+            margin: 0;
         }
     }
 
+    // Expand Area
     .card-expand-area {
         overflow: hidden;
 
-        .card-expanded-supporting-text {
+        .card-expanded-content {
             padding: 8px 16px 16px 16px;
-            font-size: 14px;
             line-height: 1.75;
         }
     }

src/app/core/scss/partials/_helpers.scss

@@ -1,9 +1,59 @@
+// ######################
+// POSITION HELPERS
+// ######################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .position#{$infix}-relative {
+            position: relative;
+        }
+
+        .position#{$infix}-absolute {
+            position: absolute;
+        }
+
+        .position#{$infix}-static {
+            position: static;
+        }
+    }
+}
+
+// ####################################
+// ABSOLUTE POSITION ALIGNMENT HELPERS
+// ####################################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .align#{$infix}-top {
+            top: 0;
+        }
+
+        .align#{$infix}-right {
+            right: 0;
+        }
+
+        .align#{$infix}-bottom {
+            bottom: 0;
+        }
+
+        .align#{$infix}-left {
+            left: 0;
+        }
+    }
+}
+
 // ######################
 // SIZE HELPERS
 // ######################
 @each $prop, $abbrev in (height: h, width: w) {
 
-    @for $index from 0 through 128 {
+    @for $index from 0 through 180 {
         $size: $index * 4;
         $length: #{$size}px;
 
@@ -28,7 +78,6 @@
 // ######################
 // SPACING HELPERS
 // ######################
-
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -83,9 +132,6 @@
             }
 
             @if ($abbrev == m) {
-                @for $index from 0 through 64 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
                 // Some special margin utils for flex alignments
                 .m#{$infix}-auto {
@@ -121,9 +167,10 @@
         }
     }
 }
-}
 
-// Border helpers
+// ######################
+// BORDER HELPERS
+// ######################
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-top: $border-style;
     border-bottom: $border-style;
 }
+
+// ######################
+// BORDER RADIUS HELPERS
+// ######################
+.border-radius-100 {
+    border-radius: 100%;
+}

src/app/core/scss/partials/_material.scss

@@ -411,7 +411,6 @@ table {
                     color: rgba(0, 0, 0, 0.54);
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
-                    min-width: 120px;
 
                     &:first-child {
                         padding-left: 24px;

src/app/core/scss/partials/_typography.scss

@@ -229,6 +229,22 @@ strong {
     }
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
+.line-height-1\.25 {
+    line-height: 1.25;
+}
+
+.line-height-1\.50 {
+    line-height: 1.5;
+}
+
+.line-height-1\.75 {
+    line-height: 1.75;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;

src/app/main/content/components/cards/cards.component.scss

@@ -4,12 +4,17 @@
 
     .content {
 
-        .card-row {
+        .cards {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: flex-start;
+
+            .card {
                 display: flex;
-            width: 100%;
                 padding: 24px 24px 48px 24px;
-            margin-bottom: 24px;
+                margin-bottom: 96px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                 .card-preview {
                     display: flex;
@@ -17,7 +22,23 @@
                 }
 
                 .card-source {
-                display: flex;
+                    display: none;
+                }
+            }
+        }
+
+        &.source {
+
+            .cards {
+                flex-direction: column;
+
+                .card {
+                    width: 100%;
+                    margin-bottom: 24px;
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                    .card-source {
+                        display: flex !important;
                         flex: 1;
                         max-height: 400px;
                         overflow: auto;
@@ -27,3 +48,5 @@
                 }
             }
         }
+    }
+}

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import * as shape from 'd3-shape';
 import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
@@ -9,11 +10,207 @@ import { fuseAnimations } from '../../../../core/animations';
 })
 export class FuseCardsDocsComponent
 {
+    view = 'preview';
+
+    // Card 9
     card9Expanded = false;
+
+    // Card 10
     card10Expanded = false;
 
+    // Card 19
+    card19 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'GOOG',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 539.4
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 538.9
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 539.6
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 540
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 540.48
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
+    // Card 24
+    card24 = {
+        scheme : {
+            domain: ['#4867d2', '#5c84f1', '#89a9f4']
+        },
+        devices: [
+            {
+                'name'  : 'Desktop',
+                'value' : 92.8,
+                'change': -0.6
+            },
+            {
+                'name'  : 'Mobile',
+                'value' : 6.1,
+                'change': 0.7
+            },
+            {
+                'name'  : 'Tablet',
+                'value' : 1.1,
+                'change': 0.1
+            }
+        ]
+    };
+
+    // Card 25
+    card25 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name' : 'Monday',
+                'value': 221
+            },
+            {
+                'name' : 'Tuesday',
+                'value': 428
+            },
+            {
+                'name' : 'Wednesday',
+                'value': 492
+            },
+            {
+                'name' : 'Thursday',
+                'value': 471
+            },
+            {
+                'name' : 'Friday',
+                'value': 413
+            },
+            {
+                'name' : 'Saturday',
+                'value': 344
+            },
+            {
+                'name' : 'Sunday',
+                'value': 294
+            }
+        ]
+    };
+
+    // Card 26
+    card26 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'Impressions',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 670000
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 540000
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 820000
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 870000
+                    },
+                    {
+                        'name' : 'Jan 8',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 9',
+                        'value': 890000
+                    },
+                    {
+                        'name' : 'Jan 10',
+                        'value': 987000
+                    },
+                    {
+                        'name' : 'Jan 11',
+                        'value': 1120000
+                    },
+                    {
+                        'name' : 'Jan 12',
+                        'value': 1360000
+                    },
+                    {
+                        'name' : 'Jan 13',
+                        'value': 1100000
+                    },
+                    {
+                        'name' : 'Jan 14',
+                        'value': 1490000
+                    },
+                    {
+                        'name' : 'Jan 15',
+                        'value': 980000
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
     constructor()
     {
 
     }
+
+    toggleView()
+    {
+        if ( this.view === 'preview' )
+        {
+            this.view = 'source';
+        }
+        else
+        {
+            this.view = 'preview';
+        }
+    }
 }

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

@@ -7,10 +7,11 @@ import { FuseHljsDocsComponent } from './hljs/hljs.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
+import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
-import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
 import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes = [
     {
@@ -55,7 +56,8 @@ const routes = [
     imports     : [
         SharedModule,
         RouterModule.forChild(routes),
-        FuseWidgetModule
+        FuseWidgetModule,
+        NgxChartsModule
     ],
     declarations: [
         FuseCardsDocsComponent,