From 12d24acf13b465111e2a0a09af42e71425d4fb13 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Mon, 14 Sep 2020 09:52:06 -0400
Subject: [PATCH] ISTWCMS-4084: adding inverted L right layout

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

diff --git a/css/styles.css b/css/styles.css
index 224dbc94..2f755275 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--invertedlright {
+  display: grid; }
+  .layout--invertedlright.even-split {
+    grid-template-columns: 25% 25% 50%; }
+  .layout--invertedlright.larger-left {
+    grid-template-columns: 33.5% 16.5% 50%; }
+  .layout--invertedlright.larger-right {
+    grid-template-columns: 16.5% 33.5% 50%; }
+  .layout--invertedlright .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--invertedlright .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--invertedlright .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
+  .layout--invertedlright .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3; }
+
 .layout--uwfourcol {
   display: grid;
   grid-template-columns: 100%; }
diff --git a/source/_patterns/03-layouts/layout/layout--invertedlright/_layout--invertedlright.scss b/source/_patterns/03-layouts/layout/layout--invertedlright/_layout--invertedlright.scss
new file mode 100644
index 00000000..fe3dbc23
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--invertedlright/_layout--invertedlright.scss
@@ -0,0 +1,36 @@
+.layout--invertedlright {
+  display: grid;
+
+  &.even-split {
+    grid-template-columns: 25% 25% 50%;
+  }
+
+  &.larger-left {
+    grid-template-columns: 33.5% 16.5% 50%;
+  }
+
+  &.larger-right {
+    grid-template-columns: 16.5% 33.5% 50%;
+  }
+
+  .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+
+  .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+  }
+
+}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/layout/layout--invertedlright/layout--invertedlright.twig b/source/_patterns/03-layouts/layout/layout--invertedlright/layout--invertedlright.twig
new file mode 100644
index 00000000..0cb804ba
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--invertedlright/layout--invertedlright.twig
@@ -0,0 +1,35 @@
+{%
+  set classes = [
+  'layout',
+  'layout--invertedlright',
+  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