From d2eaf3c4b547f226a5b2336a9e335b1d1da06c9a Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Mon, 14 Sep 2020 10:22:51 -0400
Subject: [PATCH] ISTWCMS-4084: adding inverted L left layout

---
 css/styles.css                                | 21 +++++++++++
 .../_layout--invertedlleft.scss               | 35 +++++++++++++++++++
 .../layout--invertedlleft.twig                | 35 +++++++++++++++++++
 3 files changed, 91 insertions(+)
 create mode 100644 source/_patterns/03-layouts/layout/layout--invertedlleft/_layout--invertedlleft.scss
 create mode 100644 source/_patterns/03-layouts/layout/layout--invertedlleft/layout--invertedlleft.twig

diff --git a/css/styles.css b/css/styles.css
index 2f755275..9cd6ad5c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1765,6 +1765,27 @@ svg:not(:root) {
 .layout--uwfourcol.legacy-23-27-27-23 {
   grid-template-columns: 23% 27% 27% 23%; }
 
+.layout--invertedlleft {
+  display: grid; }
+  .layout--invertedlleft.even-split {
+    grid-template-columns: 50% 25% 25%; }
+  .layout--invertedlleft.larger-left {
+    grid-template-columns: 50% 33.5% 16.5%; }
+  .layout--invertedlleft.larger-right {
+    grid-template-columns: 50% 16.5% 33.5%; }
+  .layout--invertedlleft .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 3; }
+  .layout--invertedlleft .layout__region--second {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--invertedlleft .layout__region--third {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2; }
+  .layout--invertedlleft .layout__region--fourth {
+    grid-column: 2 / 4;
+    grid-row: 2 / 3; }
+
 .layout--invertedlright {
   display: grid; }
   .layout--invertedlright.even-split {
diff --git a/source/_patterns/03-layouts/layout/layout--invertedlleft/_layout--invertedlleft.scss b/source/_patterns/03-layouts/layout/layout--invertedlleft/_layout--invertedlleft.scss
new file mode 100644
index 00000000..250e5629
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--invertedlleft/_layout--invertedlleft.scss
@@ -0,0 +1,35 @@
+.layout--invertedlleft {
+  display: grid;
+
+  &.even-split {
+    grid-template-columns: 50% 25% 25%;
+  }
+
+  &.larger-left {
+    grid-template-columns: 50% 33.5% 16.5%;
+  }
+
+  &.larger-right {
+    grid-template-columns: 50% 16.5% 33.5%;
+  }
+
+  .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+  }
+
+  .layout__region--second {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--third {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--fourth {
+    grid-column: 2 / 4;
+    grid-row: 2 / 3;
+  }
+}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/layout/layout--invertedlleft/layout--invertedlleft.twig b/source/_patterns/03-layouts/layout/layout--invertedlleft/layout--invertedlleft.twig
new file mode 100644
index 00000000..018e3c3b
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--invertedlleft/layout--invertedlleft.twig
@@ -0,0 +1,35 @@
+{%
+  set classes = [
+  'layout',
+  'layout--invertedlleft',
+  column_class,
+]
+%}
+
+<section{{ attributes.addClass(classes) }}>
+
+  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+    {% block content_first %}
+      Layout Region Column one
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    {% block content_second %}
+      Layout Region Column two
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+    {% block content_third %}
+      Layout Region Column three
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
+    {% block content_fourth %}
+      Layout Region Column four
+    {% endblock %}
+  </div>
+
+</section>
-- 
GitLab