New: Material design cards

src/app/core/animations.ts

@@ -129,6 +129,17 @@ export const fuseAnimations = [
         transition('* => void', animate('300ms'))
     ]),
 
+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [

src/app/core/scss/core.scss

@@ -25,6 +25,7 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+@import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";

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

@@ -0,0 +1,154 @@
+.fuse-card {
+    max-width: 320px;
+    min-width: 320px;
+    background: white;
+    border-radius: 2px;
+    @include mat-elevation(2);
+
+    &.variable-width {
+        min-width: 0;
+    }
+
+    .card-rich-media {
+        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 {
+            margin-left: auto;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-expand-area {
+        overflow: hidden;
+
+        .card-expanded-supporting-text {
+            padding: 8px 16px 16px 16px;
+            font-size: 14px;
+            line-height: 1.75;
+        }
+    }
+}

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

@@ -0,0 +1,29 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    .content {
+
+        .card-row {
+            display: flex;
+            width: 100%;
+            padding: 24px 24px 48px 24px;
+            margin-bottom: 24px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+            .card-preview {
+                display: flex;
+                min-width: 320px;
+            }
+
+            .card-source {
+                display: flex;
+                flex: 1;
+                max-height: 400px;
+                overflow: auto;
+                min-width: 400px;
+                margin-left: 24px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { fuseAnimations } from '../../../../core/animations';
+
+@Component({
+    selector   : 'fuse-cards-docs',
+    templateUrl: './cards.component.html',
+    styleUrls  : ['./cards.component.scss'],
+    animations : fuseAnimations
+})
+export class FuseCardsDocsComponent
+{
+    constructor()
+    {
+
+    }
+}

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
+import { FuseCardsDocsComponent } from './cards/cards.component';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
 import { FuseHljsDocsComponent } from './hljs/hljs.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
@@ -12,6 +13,10 @@ import { FuseWidgetDocsComponent } from './widget/widget.component';
 import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
 
 const routes = [
+    {
+        path     : 'components/cards',
+        component: FuseCardsDocsComponent
+    },
     {
         path     : 'components/countdown',
         component: FuseCountdownDocsComponent
@@ -53,6 +58,7 @@ const routes = [
         FuseWidgetModule
     ],
     declarations: [
+        FuseCardsDocsComponent,
         FuseCountdownDocsComponent,
         FuseHljsDocsComponent,
         FuseMaterialColorPickerDocsComponent,

src/app/navigation.model.ts

@@ -710,6 +710,13 @@ export class NavigationModel
                             }
                         ]
                     },
+                    {
+                        'id'   : 'cards',
+                        'title': 'Cards',
+                        'type' : 'item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/cards'
+                    },
                     {
                         'id'   : 'countdown',
                         'title': 'Countdown',