Merge branch 'feature/ISTWCMS-4837-ebremner-layouts' into '8.x-1.x'

Feature/istwcms 4837 ebremner layouts

See merge request !97

layouts/layout--uw-2-col.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-2-col',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--2-col/layout--2-col.twig' with {
+  'classes': classes,
+  'content': content
+} %}

layouts/layout--uw-3-col.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-3-col',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--3-col/layout--3-col.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-4-col.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-4-col',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--4-col/layout--4-col.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-5-col.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-5-col',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--5-col/layout--5-col.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-inverted-l-left.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-inverted-l-left',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/layout--uw-inverted-l-right.html.twig

+{%
+  set classes = [
+  'layout',
+  'layout--uw-inverted-l-right',
+  settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig' with {
+  'classes': classes,
+  'content': content,
+} %}

layouts/uw-1-col/uw-layout-1-col.css

-.layout--uw-1-col {
-  display: grid;
-  grid-template-columns: 100%;
-}
-
-.layout--uw-1-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-2-col/layout--uw-2-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-2-col',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-</section>

layouts/uw-2-col/uw-layout-2-col.css

-.layout--uw-2-col {
-  display: grid;
-}
-
-.layout--uw-2-col.larger-left {
-  grid-template-columns: 67% 33%;
-}
-
-.layout--uw-2-col.larger-right {
-  grid-template-columns: 33% 67%;
-}
-
-.layout--uw-2-col.even-split {
-  grid-template-columns: 50% 50%;
-}
-
-.layout--uw-2-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-2-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-3-col/layout--uw-3-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-3-col',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-</section>

layouts/uw-3-col/uw-layout-3-col.css

-.layout--uw-3-col {
-  display: grid;
-}
-
-.layout--uw-3-col.even-split {
-  grid-template-columns: 33% 34% 33%;
-}
-
-.layout--uw-3-col.larger-left {
-  grid-template-columns: 50% 25% 25%;
-}
-
-.layout--uw-3-col.larger-middle {
-  grid-template-columns: 25% 50% 25%;
-}
-
-.layout--uw-3-col.larger-right {
-  grid-template-columns: 25% 25% 50%;
-}
-
-.layout--uw-3-col.legacy-38-38-24 {
-  grid-template-columns: 38% 38% 24%;
-}
-
-.layout--uw-3-col.legacy-24-38-38 {
-  grid-template-columns: 24% 38% 38%;
-}
-
-.layout--uw-3-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-3-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-3-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-4-col/layout--uw-4-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-4-col',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.fourth }}
-  </div>
-
-</section>

layouts/uw-4-col/uw-layout-4-col.css

-.layout--uw-4-col {
-  display: grid;
-}
-
-.layout--uw-4-col.even-split {
-  grid-template-columns: 25% 25% 25% 25%;
-}
-
-.layout--uw-4-col.larger-left {
-  grid-template-columns: 50% 16.67% 16.67% 16.66%;
-}
-
-.layout--uw-4-col.larger-second {
-  grid-template-columns: 16.67% 50% 16.67% 16.66%;
-}
-
-.layout--uw-4-col.larger-third {
-  grid-template-columns: 16.67% 16.67% 50% 16.66%;
-}
-
-.layout--uw-4-col.larger-right {
-  grid-template-columns: 16.67% 16.67% 16.66% 50%;
-}
-
-.layout--uw-4-col.legacy-23-27-27-23 {
-  grid-template-columns: 23% 27% 27% 23%;
-}
-
-.layout--uw-4-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-4-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-4-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.layout--uw-4-col .layout__region--fourth {
-  grid-column: 4 / 5;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-5-col/layout--uw-5-col.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-5-col',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
-    {{ content.fifth }}
-  </div>
-
-</section>

layouts/uw-5-col/uw-layout-5-col.css

-.layout--uw-5-col {
-  display: grid;
-}
-
-.layout--uw-5-col.even-split {
-  grid-template-columns: 20% 20% 20% 20% 20%;
-}
-
-.layout--uw-5-col.larger-left {
-  grid-template-columns: 40% 15% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-second {
-  grid-template-columns: 15% 40% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-third {
-  grid-template-columns: 15% 15% 40% 15% 15%;
-}
-
-.layout--uw-5-col.larger-fourth {
-  grid-template-columns: 15% 15% 15% 40% 15%;
-}
-
-.layout--uw-5-col.larger-right {
-  grid-template-columns: 15% 15% 15% 15% 40%;
-}
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
-  grid-template-columns: 23% 19% 19% 19% 20%;
-}
-
-.layout--uw-5-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-5-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-5-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.layout--uw-5-col .layout__region--fourth {
-  grid-column: 4 / 5;
-}
-
-.layout--uw-5-col.layout__region--fifth {
-  grid-column: 5 / 6;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-inverted-l-left',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.fourth }}
-  </div>
-
-</section>

layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css

-.layout--uw-inverted-l-left {
-  display: grid;
-}
-
-.layout--uw-inverted-l-left.even-split {
-  grid-template-columns: 50% 25% 25%;
-}
-
-.layout--uw-inverted-l-left.larger-left {
-  grid-template-columns: 50% 33.5% 16.5%;
-}
-
-.layout--uw-inverted-l-left.larger-right {
-  grid-template-columns: 50% 16.5% 33.5%;
-}
-
-.layout--uw-inverted-l-left .layout__region--first {
-  grid-column: 1 / 2;
-  grid-row: 1 / 3;
-}
-
-.layout--uw-inverted-l-left .layout__region--second {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--third {
-  grid-column: 3 / 4;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--fourth {
-  grid-column: 2 / 4;
-  grid-row: 2 / 3;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}

layouts/uw-inverted-l-right/layout--uw-inverted-l-right.html.twig

-{%
-  set classes = [
-  'layout',
-  'layout--uw-inverted-l-right',
-  settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
-  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
-    {{ content.first }}
-  </div>
-
-  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
-    {{ content.second }}
-  </div>
-
-  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
-    {{ content.third }}
-  </div>
-
-  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
-    {{ content.fourth }}
-  </div>
-
-</section>

layouts/uw-inverted-l-right/uw-layout-inverted-l-right.css

-.layout--uw-inverted-l-right {
-  display: grid;
-}
-
-.layout--uw-inverted-l-right.even-split {
-  grid-template-columns: 25% 25% 50%;
-}
-
-.layout--uw-inverted-l-right.larger-left {
-  grid-template-columns: 33.5% 16.5% 50%;
-}
-
-.layout--uw-inverted-l-right.larger-right {
-  grid-template-columns: 16.5% 33.5% 50%;
-}
-
-.layout--uw-inverted-l-right .layout__region--first {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-right .layout__region--first {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-right .layout__region--third {
-  grid-column: 1 / 3;
-  grid-row: 2 / 3;
-}
-
-.layout--uw-inverted-l-right .layout__region--fourth {
-  grid-column: 3 / 4;
-  grid-row: 1 / 3;
-}
-
-.path-dashboard .layout__region {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
-  box-shadow: none;
-  border: 1px solid #bfbfba;
-  padding: 1rem;
-}