feat(styles): enhance card components with subtitle styling and layou…

projects/apps/updated-demo/src/app/pages/grid/layout/layout.component.ts

@@ -21,7 +21,9 @@ import { StyleDirective } from 'projects/libs/flex-layout/extended/style/style';
     GridColumnsDirective,
   ],
   template: ` <mat-card class="card-demo">
-    <mat-card-title>Basic Responsive Grid App</mat-card-title>
+    <mat-card-title class="card-demo-title"
+      >Basic Responsive Grid App</mat-card-title
+    >
     <mat-card-content class="containerX">
       <div class="colorNested box" style="height: auto;">
         <div

projects/apps/updated-demo/src/app/pages/layout/align-self/align-self.component.ts

@@ -22,9 +22,9 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
   ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex with Align-Self</mat-card-title>
-    <mat-card-subtitle
-      >Click on 'target' to explore how 'flex-align' can change the alignment
-      for a single element only.
+    <mat-card-subtitle class="sub-title">
+      Click on 'target' to explore how 'flex-align' can change the alignment for
+      a single element only.
     </mat-card-subtitle>
     <mat-card-content>
       <div class="containerX">
@@ -65,7 +65,6 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
@@ -74,6 +73,11 @@ const ALIGN_OPTIONS = ['auto', 'start', 'center', 'baseline', 'end', 'stretch'];
         margin: 10px 0 10px 20px;
       }
 
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
       .hint {
         margin: 5px;
         font-size: 0.9em;

projects/apps/updated-demo/src/app/pages/layout/alignment/alignment.component.ts

@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatRadioModule } from '@angular/material/radio';
-import { FlexDirective, ShowHideDirective } from '@ngbracket/ngx-layout';
+import { FlexDirective } from '@ngbracket/ngx-layout';
 import { LayoutAlignDirective } from 'projects/libs/flex-layout/flex/layout-align/layout-align';
 import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
 
@@ -17,7 +17,6 @@ import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
     FlexDirective,
     LayoutDirective,
     LayoutAlignDirective,
-    ShowHideDirective,
     MatRadioModule,
     MatCardModule,
     MatButtonModule,
@@ -146,15 +145,18 @@ import { LayoutDirective } from 'projects/libs/flex-layout/flex/layout/layout';
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
 
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
-
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
       .hint {
         margin: 5px;
         font-size: 0.9em;

projects/apps/updated-demo/src/app/pages/layout/attribute-values/attribute-values.component.ts

@@ -13,7 +13,7 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
   ],
   template: `<mat-card class="card-demo">
     <mat-card-title>Flex Attribute Values</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Explore impact of non-numerical values for the 'fxFlex' API:
     </mat-card-subtitle>
     <mat-card-content>
@@ -44,15 +44,18 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout';
           (
             elevated-container-color: #fff,
             elevated-container-shape: 6px,
-            title-text-size: 1.5rem,
           )
         );
       }
 
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
-
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
       .hint {
         margin: 5px;
         font-size: 0.9em;

projects/apps/updated-demo/src/app/pages/layout/direction/direction.component.ts

@@ -20,13 +20,13 @@ import {
   template: `
     <mat-card class="card-demo">
       <mat-card-title>Direction support for RTL</mat-card-title>
-      <mat-card-subtitle>
+      <mat-card-subtitle class="sub-title">
         Simple row using layout gap and flex offset to demonstrate changes in
         layout direction between rtl and ltr.
       </mat-card-subtitle>
       <mat-card-content fxLayout="column" fxLayoutGap="8px">
         <div>
-          <button (click)="toggleDirection()" mat-raised-button>
+          <button (click)="toggleDirection()" mat-flat-button>
             Toggle direction
           </button>
         </div>
@@ -51,7 +51,36 @@ import {
       </mat-card-footer>
     </mat-card>
   `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class DirectionComponent {
   direction: Direction = 'ltr';

projects/apps/updated-demo/src/app/pages/layout/gap/gap.component.ts

@@ -8,7 +8,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   imports: [MatCardModule, FlexLayoutModule],
   template: ` <mat-card class="card-demo">
     <mat-card-title><a href="" target="_blank">Layout Gap</a></mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Using 'fxLayoutGap' to create a grid-like layout
     </mat-card-subtitle>
     <mat-card-content class="large">
@@ -48,7 +48,36 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       <div class="hint"></div>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class GapComponent {
   direction = 'row';

projects/apps/updated-demo/src/app/pages/layout/offset-values/offset-values.component.ts

@@ -11,7 +11,7 @@ import {
   imports: [MatCardModule, LayoutDirective, FlexDirective, FlexOffsetDirective],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Flex Offset Values</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Explore impact of values for the 'flex-offset' API:</mat-card-subtitle
     >
     <mat-card-content>
@@ -46,6 +46,11 @@ import {
       mat-card-title {
         margin: 10px 0 10px 20px;
       }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
 
       .hint {
         margin: 5px;

projects/apps/updated-demo/src/app/pages/layout/row-fill-wrap/row-fill-wrap.component.ts

@@ -10,7 +10,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   template: `
     <mat-card class="card-demo" (click)="toggleDirection()">
       <mat-card-title>'Flex' with Layout-Wrap</mat-card-title>
-      <mat-card-subtitle
+      <mat-card-subtitle class="sub-title"
         >Using "layout-wrap" to wrap positioned items within a layout container
       </mat-card-subtitle>
       <mat-card-content>
@@ -36,7 +36,35 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       </mat-card-footer>
     </mat-card>
   `,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class RowFillWrapComponent {
   direction = 'row';

projects/apps/updated-demo/src/app/pages/layout/row-fill/row-fill.component.ts

@@ -8,7 +8,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
   imports: [MatCardModule, LayoutDirective, FlexDirective],
   template: `<mat-card class="card-demo" (click)="toggleDirection()">
     <mat-card-title>'Flex' to Fill Row</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Simple row using "flex" on 3rd element to fill available main axis.
     </mat-card-subtitle>
     <mat-card-content>
@@ -29,7 +29,35 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
       <div class="hint">&lt;div fxLayout="{{ direction }}" &gt;</div>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+      .sub-title {
+        margin-left: 20px;
+        margin-bottom: 10px;
+        font-weight: normal;
+      }
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class RowFillComponent {
   direction = 'row';

projects/apps/updated-demo/src/app/pages/responsive/flex-directive/directive.component.ts

@@ -13,7 +13,7 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
   ],
   template: ` <mat-card class="card-demo">
     <mat-card-title>Responsive Flex Directives</mat-card-title>
-    <mat-card-subtitle
+    <mat-card-subtitle class="sub-title"
       >Use the show hide APIs to responsively show or hide elements:
     </mat-card-subtitle>
     <mat-card-content>
@@ -32,6 +32,35 @@ import { MediaQueryStatusComponent } from '../../media-query-status/media-query-
       <app-media-query-status></app-media-query-status>
     </mat-card-footer>
   </mat-card>`,
-  styles: [],
+  styles: [
+    `
+      @use '@angular/material' as mat;
+
+      mat-card {
+        top: 20px;
+        @include mat.card-overrides(
+          (
+            elevated-container-color: #fff,
+            elevated-container-shape: 6px,
+          )
+        );
+      }
+
+      mat-card-title {
+        margin: 10px 0 10px 20px;
+      }
+
+      .sub-title {
+        margin-left: 20px;
+        font-weight: normal;
+      }
+
+      .hint {
+        margin: 5px;
+        font-size: 0.9em;
+        color: #a3a3a3;
+      }
+    `,
+  ],
 })
 export class DirectiveComponent {}