From c61db76230e1a5640efa3b213af7ffda5f588917 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 23 Nov 2022 14:55:29 -0500
Subject: [PATCH] ISTWCMS-5880: rebase continue 2

---
 src/patterns/04-components/card/_card.scss    |   5 +-
 .../card/card--node/_card--node.scss          | 110 ++++++++++++++----
 2 files changed, 88 insertions(+), 27 deletions(-)

diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index eb96036d..c8502956 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -2,6 +2,7 @@
 // Styles for Cards..
 
 @use '../../01-core' as *;
+
 $card-border-color: var(--gray-3);
 $card-accent-border-color: var(--uw-black-primary) !default;
 $card-link-color: var(--uw-black-primary) !default;
@@ -135,10 +136,6 @@ $card-padding: var(--size-2) !default;
   padding: 0 0 var(--size-1) 0;
 }
 
-.card__media{
-//
-}
-
 // body
 .card__body {
   width: 100%;
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index e000fa2f..283d7345 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -13,8 +13,11 @@
     max-width: var(--layout-max-width);
   }
   .uw-node__with-media &{
-    > .card__header{
+    > .card__header {
       padding: var(--size-2);
+      @media(min-width: $screen-xxl) {
+        padding: var(--size-2) 0;
+      }
     }
   }
   .uw-node__without-media & {
@@ -83,54 +86,113 @@
   }
   // CSS for specific node card presentations:
   &--contact {
-    background: $test-color-9;
+    @include uw-contained-width();
     display: grid;
-    gap: var(--grid-gap);
-
+    grid-template-columns: 100%;
+    .card__media{
+      @include uw-full-width-margin;
+      grid-column: 1 / 3;
+      grid-row: 1 / 2;
+      margin-bottom: var(--size-2);
+      @media(min-width: $screen-md) {
+        margin-bottom: 0;
+      }
+      &.uw-contained-width{
+        .card__node--uw_ct_contact{
+          @include uw-contained-width;
+        }
+      }
+      &.uw-contained-width--wide{
+        .card__node--uw_ct_contact{
+          @include uw-contained-width;
+          max-width: 47.0625rem;
+        }
+      }
+      &.uw-contained-width--narrow{
+        .card__node--uw_ct_contact{
+          @include uw-contained-width;
+          max-width: 31rem;
+        }
+      }
+      &.layout {
+        padding: 0;
+      }
+    }
     .card__content {
       .layout {
         padding: 0;
       }
     }
 
-    @media(min-width: $screen-md) {
-      display: grid;
-      gap: var(--size-4);
-      //grid-template-columns: var(--size-20) 1fr;
+    .uw-node__with-media &{
+      @media(min-width: $screen-md) {
+        grid-template-columns: 100%;
+      }
     }
-
-    .card__image {
-      //grid-column: 1 / 3;
-      background: $test-color-3;
+    .uw-node__with-portrait &{
+      grid-template-columns: 100%;
       @media(min-width: $screen-md) {
-        //grid-column: 1 / 2;
+        gap: var(--size-4);
+        grid-template-columns: var(--size-20) 1fr;
+        .card__image {
+          grid-column: 1 / 3;
+          @media(min-width: $screen-md) {
+            grid-column: 1 / 2;
+          }
+        }
+        .card__header{
+          grid-column: 1 / 2;
+          @media(min-width: $screen-md) {
+            grid-column: 2 / 3;
+          }
+        }
       }
     }
 
-    .card__header,
     .card__body,
     .card__footer {
-      //grid-column: 1 / 3;
-      @media(min-width: $screen-md) {
-        //grid-column: 2 / 3;
-      }
+      grid-column: 1 / 3;
       padding: 0;
     }
 
     .uw-node__without-media & {
-      background: $test-color-9;
       @media(min-width: $screen-md) {
         grid-template-columns: 100%;
       }
 
-      .card__header,
       .card__body,
       .card__footer {
-        //grid-column: 1 / 2;
+        grid-column: 1 / 2;
+      }
+    }
+    .uw-node__without-media.uw-node__with-portrait &{
+      @media(min-width: $screen-md) {
+        gap: var(--size-4);
+        grid-template-columns: var(--size-20) 1fr;
+        .card__image {
+          grid-column: 1 / 3;
+          @media(min-width: $screen-md) {
+            grid-column: 1 / 2;
+          }
+        }
+        .card__header{
+          grid-column: 1 / 2;
+          @media(min-width: $screen-md) {
+            grid-column: 2 / 3;
+          }
+        }
+      }
+    }
+    .uw-node__with-media.uw-node__with-portrait &{
+      .card__header{
+        grid-column: 1 / 2;
+        padding: 0;
+        @media(min-width: $screen-md) {
+          grid-column: 2 / 3;
+        }
       }
     }
   }
-
   // CSS for specific node card presentations:
   &--blog,
   &--news-item,
@@ -149,7 +211,6 @@
           margin: 0;
           padding: var(--size-2) 0;
         }
-
       }
       .card__media{
         //
@@ -229,3 +290,6 @@
     }
   }
 }
+.card__node--uw_ct_contact .card__image{
+  display: none !important;
+}
-- 
GitLab