Change column and horizontal card layouts from flex to grid, add defa…

…ult gap for keyline placement
ubc-web-services · Aug 28, 2023 · 01d7ebe · 01d7ebe
1 parent 481e4e3
commit 01d7ebe
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 110 deletions.
diff --git a/css/ubc.card.css b/css/ubc.card.css
@@ -89,12 +89,25 @@
 @media (min-width: 480px) {
 
   .widget-card--horizontal .ubc-card--horiz {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    grid-template-rows: auto;
+  }
+
+  .widget-card--horizontal .first-image {
+    grid-area: a;
+  }
+
+  .widget-card--horizontal .ubc-card__content_wrapper {
+    grid-area: b;
+  }
+
+  .widget-card--horizontal .ubc-card--horiz {
+    grid-template-areas: 'a b b';
   }
 
   .widget-card--horizontal.widget-card__reverse .ubc-card--horiz {
-    flex-direction: row-reverse;
+    grid-template-areas: 'b b a';
   }
 
 }

diff --git a/css/ubc.columns.css b/css/ubc.columns.css
@@ -26,19 +26,6 @@
 }
 
 /* General styles for columns */
-.widget-column-options .widget--md--grid {
-    display: flex;
-    flex-direction: column;
-}
-
-.widget-column-options .widget-region-one,
-.widget-column-options .widget-region-two,
-.widget-column-options .widget-region-three,
-.widget-column-options .widget-region-four {
-    flex: 1;
-}
-
-/* Columns */
 @media (max-width: 767px) {
 
   .widget-column-options .first-child--mt-0> :first-child {
@@ -49,99 +36,145 @@
 
 @media (min-width: 768px) {
 
-    .widget-column-options .widget--md--grid {
-        flex-direction: row;
-    }
-
-    .widget-columns-2.align-large-left .widget-region-one,
-    .widget-columns-3.align-large-left .widget-region-one,
-    .widget-columns-3.align-large-center .widget-region-two,
-    .widget-columns-2.align-large-right .widget-region-two,
-    .widget-columns-3.align-large-right .widget-region-three {
-        flex: 2;
-    }
-
-    .widget-columns-2.widget-keylines .widget-region-one,
-    .widget-columns-3.widget-keylines .widget-region-one,
-    .widget-columns-3.widget-keylines .widget-region-two,
-    .widget-columns-4.widget-keylines .widget-region-one,
-    .widget-columns-4.widget-keylines .widget-region-two,
-    .widget-columns-4.widget-keylines .widget-region-three {
-      position: relative;
-    }
-
-    .widget-columns-2.widget-keylines .widget-region-one::after,
-    .widget-columns-3.widget-keylines .widget-region-one::after,
-    .widget-columns-3.widget-keylines .widget-region-two::after,
-    .widget-columns-4.widget-keylines .widget-region-one::after,
-    .widget-columns-4.widget-keylines .widget-region-two::after,
-    .widget-columns-4.widget-keylines .widget-region-three::after {
-      content: '';
-      top: 0;
-      height: 100%;
-      width: 1px;
-      position: absolute;
-      background-color: #e0e0e0;
-    }
-
-    .widget-columns-2 .gap-0 .widget-region-one::after,
-    .widget-columns-3 .gap-0 .widget-region-one::after,
-    .widget-columns-3 .gap-0 .widget-region-two::after,
-    .widget-columns-4 .gap-0 .widget-region-one::after,
-    .widget-columns-4 .gap-0 .widget-region-two::after,
-    .widget-columns-4 .gap-0 .widget-region-three::after {
-      right: 0;
-    }
-
-    .widget-columns-2 .gap-4 .widget-region-one::after,
-    .widget-columns-3 .gap-4 .widget-region-one::after,
-    .widget-columns-3 .gap-4 .widget-region-two::after,
-    .widget-columns-4 .gap-4 .widget-region-one::after,
-    .widget-columns-4 .gap-4 .widget-region-two::after,
-    .widget-columns-4 .gap-4 .widget-region-three::after {
-      right: -.5rem
-    }
-
-    .widget-columns-2 .gap-6 .widget-region-one::after,
-    .widget-columns-3 .gap-6 .widget-region-one::after,
-    .widget-columns-3 .gap-6 .widget-region-two::after,
-    .widget-columns-4 .gap-6 .widget-region-one::after,
-    .widget-columns-4 .gap-6 .widget-region-two::after,
-    .widget-columns-4 .gap-6 .widget-region-three::after {
-      right: -.75rem
-    }
-
-    .widget-columns-2 .gap-8 .widget-region-one::after,
-    .widget-columns-3 .gap-8 .widget-region-one::after,
-    .widget-columns-3 .gap-8 .widget-region-two::after,
-    .widget-columns-4 .gap-8 .widget-region-one::after,
-    .widget-columns-4 .gap-8 .widget-region-two::after,
-    .widget-columns-4 .gap-8 .widget-region-three::after {
-      right: -1rem;
-    }
-
-    .widget-columns-2 .gap-12 .widget-region-one::after,
-    .widget-columns-3 .gap-12 .widget-region-one::after,
-    .widget-columns-3 .gap-12 .widget-region-two::after,
-    .widget-columns-4 .gap-12 .widget-region-one::after,
-    .widget-columns-4 .gap-12 .widget-region-two::after,
-    .widget-columns-4 .gap-12 .widget-region-three::after {
-      right: -1.5rem
-    }
-
-    .widget-columns-2.widget-gap-wide .widget-region-one::after,
-    .widget-columns-3.widget-gap-wide .widget-region-one::after,
-    .widget-columns-3.widget-gap-wide .widget-region-two::after,
-    .widget-columns-4.widget-gap-wide .widget-region-one::after,
-    .widget-columns-4.widget-gap-wide .widget-region-two::after,
-    .widget-columns-4.widget-gap-wide .widget-region-three::after,
-    .widget-columns-2 .gap-16 .widget-region-one::after,
-    .widget-columns-3 .gap-16 .widget-region-one::after,
-    .widget-columns-3 .gap-16 .widget-region-two::after,
-    .widget-columns-4 .gap-16 .widget-region-one::after,
-    .widget-columns-4 .gap-16 .widget-region-two::after,
-    .widget-columns-4 .gap-16 .widget-region-three::after {
-      right: -2rem;
-    }
+  .widget-column-options .widget--md--grid {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: repeat(12,minmax(0,1fr));
+    grid-template-rows: auto;
+  }
+
+  .widget-column-options .widget-region-one {
+    grid-area: a;
+  }
+
+  .widget-column-options .widget-region-two {
+    grid-area: b;
+  }
+
+  .widget-column-options .widget-region-three {
+    grid-area: c;
+  }
+
+  .widget-column-options .widget-region-four {
+    grid-area: d;
+  }
+
+  .widget-columns-2 .widget--md--grid,
+  .widget-columns-2.align-equal .widget--md--grid {
+    grid-template-areas: 'a a a a a a b b b b b b';
+  }
+
+  .widget-columns-2.align-large-left .widget--md--grid {
+    grid-template-areas: 'a a a a a a a a b b b b';
+  }
+
+  .widget-columns-2.align-large-right .widget--md--grid {
+    grid-template-areas: 'a a a a b b b b b b b b';
+  }
+
+  .widget-columns-3 .widget--md--grid,
+  .widget-columns-3.align-equal .widget--md--grid {
+    grid-template-areas: 'a a a a b b b b c c c c';
+  }
+
+  .widget-columns-3.align-large-left .widget--md--grid {
+    grid-template-areas: 'a a a a a a b b b c c c';
+  }
 
+  .widget-columns-3.align-large-center .widget--md--grid {
+    grid-template-areas: 'a a a b b b b b b c c c';
   }
+
+  .widget-columns-3.align-large-right .widget--md--grid {
+    grid-template-areas: 'a a a b b b c c c c c c';
+  }
+
+  .widget-columns-4 .widget--md--grid {
+    grid-template-areas: 'a a a b b b c c c d d d';
+  }
+
+  .widget-columns-2.widget-keylines .widget-region-one,
+  .widget-columns-3.widget-keylines .widget-region-one,
+  .widget-columns-3.widget-keylines .widget-region-two,
+  .widget-columns-4.widget-keylines .widget-region-one,
+  .widget-columns-4.widget-keylines .widget-region-two,
+  .widget-columns-4.widget-keylines .widget-region-three {
+    position: relative;
+  }
+
+  .widget-columns-2.widget-keylines .widget-region-one::after,
+  .widget-columns-3.widget-keylines .widget-region-one::after,
+  .widget-columns-3.widget-keylines .widget-region-two::after,
+  .widget-columns-4.widget-keylines .widget-region-one::after,
+  .widget-columns-4.widget-keylines .widget-region-two::after,
+  .widget-columns-4.widget-keylines .widget-region-three::after {
+    content: '';
+    top: 0;
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    background-color: #e0e0e0;
+    right: -1rem; /* default placement */
+  }
+
+  .widget-columns-2 .gap-0 .widget-region-one::after,
+  .widget-columns-3 .gap-0 .widget-region-one::after,
+  .widget-columns-3 .gap-0 .widget-region-two::after,
+  .widget-columns-4 .gap-0 .widget-region-one::after,
+  .widget-columns-4 .gap-0 .widget-region-two::after,
+  .widget-columns-4 .gap-0 .widget-region-three::after {
+    right: 0;
+  }
+
+  .widget-columns-2 .gap-4 .widget-region-one::after,
+  .widget-columns-3 .gap-4 .widget-region-one::after,
+  .widget-columns-3 .gap-4 .widget-region-two::after,
+  .widget-columns-4 .gap-4 .widget-region-one::after,
+  .widget-columns-4 .gap-4 .widget-region-two::after,
+  .widget-columns-4 .gap-4 .widget-region-three::after {
+    right: -.5rem
+  }
+
+  .widget-columns-2 .gap-6 .widget-region-one::after,
+  .widget-columns-3 .gap-6 .widget-region-one::after,
+  .widget-columns-3 .gap-6 .widget-region-two::after,
+  .widget-columns-4 .gap-6 .widget-region-one::after,
+  .widget-columns-4 .gap-6 .widget-region-two::after,
+  .widget-columns-4 .gap-6 .widget-region-three::after {
+    right: -.75rem
+  }
+
+  .widget-columns-2 .gap-8 .widget-region-one::after,
+  .widget-columns-3 .gap-8 .widget-region-one::after,
+  .widget-columns-3 .gap-8 .widget-region-two::after,
+  .widget-columns-4 .gap-8 .widget-region-one::after,
+  .widget-columns-4 .gap-8 .widget-region-two::after,
+  .widget-columns-4 .gap-8 .widget-region-three::after {
+    right: -1rem;
+  }
+
+  .widget-columns-2 .gap-12 .widget-region-one::after,
+  .widget-columns-3 .gap-12 .widget-region-one::after,
+  .widget-columns-3 .gap-12 .widget-region-two::after,
+  .widget-columns-4 .gap-12 .widget-region-one::after,
+  .widget-columns-4 .gap-12 .widget-region-two::after,
+  .widget-columns-4 .gap-12 .widget-region-three::after {
+    right: -1.5rem
+  }
+
+  .widget-columns-2.widget-gap-wide .widget-region-one::after,
+  .widget-columns-3.widget-gap-wide .widget-region-one::after,
+  .widget-columns-3.widget-gap-wide .widget-region-two::after,
+  .widget-columns-4.widget-gap-wide .widget-region-one::after,
+  .widget-columns-4.widget-gap-wide .widget-region-two::after,
+  .widget-columns-4.widget-gap-wide .widget-region-three::after,
+  .widget-columns-2 .gap-16 .widget-region-one::after,
+  .widget-columns-3 .gap-16 .widget-region-one::after,
+  .widget-columns-3 .gap-16 .widget-region-two::after,
+  .widget-columns-4 .gap-16 .widget-region-one::after,
+  .widget-columns-4 .gap-16 .widget-region-two::after,
+  .widget-columns-4 .gap-16 .widget-region-three::after {
+    right: -2rem;
+  }
+
+}